undefined | Better HN

0 pointschubot6y ago0 comments

Thanks for these tips -- I've seen your visualizations and it's nice to hear from people who have done it!

It's cool that you were able to reproduce the diagram quickly and in a small amount of code. It looks a bit foreign to me, probably because I don't know much about SVG (or canvas for that matter). And as I understand it Observable is almost another language on top. (I do know HTML, CSS, and JS pretty well, but there's still a gap.)

Do you ever mock visualizations up in a WYSIWIG tool, or do you always use web technologies in a text editor?

Doing it programmatically has advantages when you need to make 30 similar diagrams, as in this post about gears.

But I also feel WYSIWIG tools could help in prototyping to avoid throwing away a lot of code that wasn't properly conceived of. That is, implementing the visualization is only part of the huge amount of work; the other part is designing it of course. And in many cases the design effort is probably larger.

For example, I have wanted to write an article about regexes, visualizing NFAs and DFAs. I find that some programmers have trouble with the idea of nondeterminism, which is more of a mathematical thing. A subtitle would be something like "A trie is a special case of a DFA".

This post has some nice diagrams, and you can easily imagine them being interactive and more approachable:

https://swtch.com/~rsc/regexp/regexp1.html

(in fact a few months ago else I posited that a textual summary of these great but dense posts would be useful too)

I can sort of imagine what I want to visualize, but I also think there will also be many false starts. Though maybe a pencil and paper is sufficient. I'm not sure I will get to it, but this polished and smooth gears post got me thinking again! Using something reactive like vue rather than doing it "vanilla JS" is also probably something I should look into as well.

0 comments

amitp6y ago

SVG is declarative. You write <circle cx=300 cy=400 r=100 fill=red/> to make a red circle at (300,400) with radius 100. You can then change any of these properties and the system will redraw automatically. Canvas is imperative. You write ctx = canvas.getContext('2d'); ctx.fillStyle = "red"; ctx.beginPath(); ctx.arc(300, 400, 100, 0, 2 * Math.PI); ctx.fill(); and the system will draw that circle. You handle redraw yourself by redrawing everything on that canvas, so you need to keep track of it all. The DOM helpers (React, Vue, etc.) help you with SVG but not with Canvas.

I usually mock visualizations on paper! I'm interested in using WYSIWIG interactive diagram tools like http://aprt.us/ but I never seem to get into them. When I started, making the visualizations was the largest part of the work, but now I've gotten better at it, and making the explanation is now the part that takes the most time.

After paper, I often use SVG to make a non interactive diagram, either by hand, or in inkscape. One of my guiding principles is that the page should be usable without interaction, so the static diagram is a test of that. If it looks promising I can then gradually transform it into an interactive diagram. For example if I had the circle above, and I am using vue.js, I can change it to <circle :cx=x :cy=y r=100 fill=red/> (note the ":" before attributes), and then vue will fill those values in from the object I give it. I can give it {x: 300, y: 400}, and any time I change x or y, it will automatically redraw. I can then hook up x or y to a slider to try out the interactivity. This allows me to start with a static diagram, gradually add interactivity, and then build reusable abstractions that I can apply to multiple diagrams. ObservableHQ and React/JSX allow something similar, with slightly different syntax.

I'd love to see an article about regexes with interactive diagrams. There's a standalone diagram tool https://regexper.com/ and an interactive tutorial https://regexone.com/ but neither is an essay in the style of the Gears article. If you're pursuing this, let me know at redblobgames@gmail.com and I can send over more resources.

j / k navigate · click thread line to collapse

0 comments

amitp6y ago

j / k navigate · click thread line to collapse