3 ms·

Yes, they look really great and responsive, too. I'd actually like to know how they were done... Are they just basically coded by hand or is there a visual tool

Yes, they look really great and responsive, too. I'd actually like to know how they were done... Are they just basically coded by hand or is there a visual tool you can use to design interactive graphical stuff like this in what I guess is HTML5/CSS/maybe JavaScript, similar to (dare I mention the word) Flash in the olden days? (Sorry, haven't done any web development in decades, obviously :-)).

adamschwartz 6y ago
Yup, they were coded by hand! Here was the initial commit which added the first diagram (originally there was only one): https://git.io/JfJ4K https://git.io/JfJ4K
- job 6y ago
  a really cool way to explain RPKI, thanks for sharing!
neurostimulant 6y ago
It's basically animating SVG with CSS, which is very neat. Not using js at all except to toggle some class names when you click the button.
- adamschwartz 6y ago
  It’s really just using CSS to animate regular HTML elements. SVG is used for the icons (the laptop, server, cloud), but the grid lines, connection lines, and packet animation are all just plain `<div/>`s :P But you’re totally correct about the JS only toggling between path="happy" and path="sad"
joan_kode 6y ago
Nitpick but the terms are useful: they are not responsive, they are interactive. Responsive (in modern front-end parlance) means they would adapt to different screen sizes. Some mainstream publications have been publishing responsive diagrams and I love it (here's an outstanding example: [1]). But this is not the case here. [1]: https://graphics.reuters.com/CHINA-HEALTH-SOUTHKOREA-CLUSTERS/0100B5G33SB/index.html https://graphics.reuters.com/CHINA-HEALTH-SOUTHKOREA-CLUSTER...