I started my blog to “pay it forward” for all of the amazing, free write-ups I’ve benefited from in my career. I like to experiment with innovative ways to communicate concepts on the web, so hopefully people find some of those experiments enjoyable, and I also write because good content on data visualization can be tough to find.
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.
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)
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/
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
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.
Matt DesLauriers does a lot of generative art, and he created a great lib for scaffolding a simple environment (JS): canvas-sketch
You took the UX to a whole new level. Good one.
I disagree, since it took me a few to realize the sliders were even moveable, and moving them at an angle is a PITA. It looks just fine without the rotation. Function > form, please.
You can fix it using your browser’s inspector to disable the transforms in the TelescopeExplorable__controls CSS class.
I’d say you’re right when it comes to a real-world application, but for a demonstration/PoC, I was quite impressed, even if a linear transformation isn’t that foreign at first.
It seems to be just a bit of fun and made me say, “Wow!” It would seem appropriate to be positive about this rather than complain.
I find @icefox disagreement explained and well justified.
You might not like the negativity of the comment, nevertheless it’s pretty subjective and probably helpful for the author of the page.
This is definitely something I was worried about when I skewed the controls, which is why I limited it to a 6 degree rotation. Thanks for the feedback - sometimes it’s a balancing act between whimsy and usable, and I tend to agree with you that usability is non-negotiable.
What were you looking for with the sliders - an initial focus state?
Thanks for taking my griping gracefully, sorry if I was overly grumpy. I should maybe just not post first thing in the morning. :-)
With the sliders, it was more the fact that they were rotated at all that made my mind skim over the fact that they were real, and the fact that they’re in a non-platform color/style didn’t really help. I just automatically assumed it was a static image, ‘cause it countered expectations. It just took a while for my coffee-deprived brain to process “wait, you CAN rotate UI elements, can’t you?” and try it.
no worries! I always appreciate feedback. And that makes total sense about the rotation and custom styles - I’ll keep that in mind for the future. Thanks!
Does switching to this page’s tab bring Firefox (Nightly 72.0a1 (2019-11-25) (64-bit)) to a crawl for anyone else?
oh that’s strange! I’m seeing an issue on Firefox as well - thanks for flagging! I’ll have to look into it, although it smells like a rabbit hole
As a data point: works fine for me on FF 69.0.1 (Linux)
Nope, fine here. (linux)
Something weird is happening with this page for me - FF 70.0.1. The sliders taking seconds to respond when moved.
I like this, it’s a really nice way to express this concept. I love the illustrations on this too — they’re even SVG :) What did you use to draw them with?
thanks! The person is from Pablo Stanley’s Humaaans and I drew the telescope in Figma
When I set the width and height sliders lower than the preset, I get panning instead of zooming. What’s up with that?
It’s the alignment value for preserveAspectRatio. Basically, there are a bunch of different behaviours* for when the aspect ratios don’t match, and this is using the default. It does scale as expected if you set width and height to the same value.
(*by “a bunch” I mean three each for width and height)
yep! What @tentacloids said, and I wanted to drop a link to the MDN docs:
(edit: just saw that it was linked to already! 🙌)
The default value is meet, which scales the svg based on three requirements:
Still figuring out a way to explain this in the guide without confusing more than helping.
Cool to get on here and see the top story by an old coworker :)
Who you calling old?
Hope all is good with you!!