I read this whole article just waiting for the HTML Meter Element to be mentioned as a much simpler alternative, but it never was.
Semantic HTML is powerful, the wheel doesn’t always need to be re-invented with SVG.
Thanks to you, I know of HTML Meter Element now :).
I love it - I don’t know why I always forget about . Thanks for the reminder!
I definitely agree that reinventing the wheel for its own sake is wrong. I meant for this post to be more a teaching experience of “how would I go about creating a component like this”. There are lots of tidbits that I’ve had to learn on my own, and was hoping to share - like drawing with SVG in React and using d3 scales. I wonder what I could do to reinforce that point.
Neat article, but I was more taken aback by the design of the blog. I love the integration between the text and the code sample on the right. Gauge is broken on Safari however. :(
thanks for the flag! There’s something tricksy with SVG transforms on Safari that I need to figure out
Impressive reading experience: the sync between code and explanation, the visual design, so well done.
Was this all bespoke stuff written by you?
thank you! It’s all bespoke, but would be great as an open source component.
code at https://github.com/Wattenberger/Wattenberger-2019/tree/master/src/components/Blog/posts/GaugeWalkthrough
I know Rodrigo Pombo has something similar up at https://codesurfer.pomb.us/
I didn’t recognise the author’s name at first but the effort put into the design instantly made me recognise I’d been on the site before (I think when the d3 guide was posted)
I’d also be interested to hear a bit about the design process and how long it took/how much custom code was required
awesome to hear it! It’s pretty much all custom, with some shared components (code blocks, block quotes) with other blog posts. It took.. a while. Maybe 13 hours, overall? I definitely enjoy the creative freedom that comes with creating these posts, which keeps me going.
Ah, thanks for posting a link to your Github repo above! I’m looking forward to having a look around B)
I quite like the presentation of the code snippets and how they’re built up. Just a personal preference, but I don’t like the midpoint line - it looks like a visual bug more than a midpoint indicator!
totally understandable - another strange thing with the midline is that it’s not visible when the value is nearby, which kind of takes away from its usefulness. 🤷♀️ I 50% like it and 50% dislike it, but thought it was good to include, for people to form their own opinions.