Yes, thank you!
01.03.2026 21:16
👍 1
🔁 0
💬 0
📌 0
Yes, thank you!
Arrived at Dagstuhl castle for an intense week on data visualization for biology! 📊🧬
Really looking forward to this week among so many fascinating scientists!
If the outer circle shows 2000 km, the circle is possibly wrong.
Who listened to Trump‘s State of the Union?
🫢
And yes, we also provide you with the knitting patterns for all Olympic countries! 🧶🧶🧶
The Norwegian-style medal count scarf for Norway. (Click on the image to see true size.)
We visualize the Olympic medal count as Norwegian-style scarf. :) 📊
Check out how Germany looks like and generate your own scarf – including download of the knitting pattern.
Heel mooie datavisualisatie door @spiegel.de van de Olympische Spelen in Noorse stijl: alle behaalde medailles in een sjaal (onderaan artikel kan je per land bekijken)
Who says you can't offer the medal table as a knitting pattern for people to knit themselves?
#dataviz
gift link: www.spiegel.de/sport/olympi...
Today's viz inspo
ah, btw:
With the piece of interactivity I described.
Yes, it is! And also highly reusable!
Thank you! 🙏
And my original post about this article: bsky.app/profile/higs...
And here is the link to our Olympic medal count article (gift link for the first 10 clicks): www.spiegel.de/sport/olympi...
<Canvas> itself is another Svelte component that makes it possible to describe canvas content in a descriptive way. That's what we call renderless components. We have already used this principle in this open-sourced story code here: github.com/spiegelgraph...
Within InteractiveCanvas.svelte we build up two canvases where the first is the real visible canvas, the knitting pattern. And the second is the identification canvas. Invisible to the users, but crucial for the event handlers.
With Svelte you can package this logic into a new component <InteractiveCanvas>, including mousemove and click handlers.
With this trick, we know again, which element (medal) a user is hovering over or clicking on.
When a user now hovers or clicks over a medal, we're asking for the color beneath the pointer. So, for example, we know that the user is hovering over the red shade rgb(144,1,0). Then we take our look-up table and find out which medal that is.
What you can do: Add a second, invisible canvas that only shows the medals. Each in a unique color. Under the hood, you know, which color stands for which medal. So here, we use different shades of red for each medal.
A canvas is a drawing area in the browser where you add your image pixel by pixel. In contrast to SVG, there are no ready-to-use elements such as circles and lines. And so you also cannot put click handlers on elements – like our medal visualizations.
Have you seen our Olympic medal count visualization?
BTW: To generate the Olympic medal scarfs, we render it on HTML canvas. A powerful drawing technology, but inherently non-interactive. We wanted the medals to be clickable. So: How do you render an interactive canvas?
A technical deep-dive #Svelte
amei
Thanks!
Thanks!
Thank you! :)
