This fall I made an interactive visualization of the fine-grained plate tectonic model I have built for the Himalaya and Tibet for a research project. The model building process (i.e., finding the relative motions of the plates) is largely solving a system of linear equations, so it's not immediately apparent what the results really mean and whether they are acceptably realistic.
D3.js allows me to explore and understand my own scientific results so much more thoroughly than the static quiver plots that I was making in Matplotlib--being able to pan and zoom a globe (not just a projected map!) and see the tectonic plates move through time is phenomenal. Being able to share the results so trivially as a web page is a huge force multiplier as well.
Thanks so much, Mike!
Here is my favorite example - try click the 4 buttons at the top:
Here is an example of a graph we did where we blatantly ripped off one of mbostock’s other NYTimes graphs:
I’m impressed also with what I’ve seen, but I don’t know what they do.
In other news, I’ve enjoyed using D3 over the years, and always jump on visualization projects as a result. Here’s my favorite thing I’ve made while I was learning D3: https://www.jwilber.me/permutationtest/
Did you open source that page?
It was very slow to render. Eventually I found out why: D3 was round-tripping the SVG through text! The render time was dominated by the browser parsing the thousands of 15+ digit floating point numbers.
I added a call to round the floats to two decimal places, so they would be textually shorter, and it was a huge speedup. What a strange optimization.
I later rewrote it using WebGL; here it is should you care: https://ridiculousfish.com/wavefiz/
"To maximize your impact, then, teaching must be central to your strategy. This means documentation, tutorials, examples, videos, tweets, and more."
I have pretty comprehensive documentation ( https://docs.datasette.io/ ) but almost nothing in the way of tutorials - and I added the first demo video to the website just last week.
This has given me a ton to think about. Thanks, Mike!
I specifically recommend Divio's "Documentation System" structure, and the Vue docs "Writing Style Guide" section as being particularly good resources:
And here's one of the new tutorials I ended up writing, which took inspiration from many different sources:
This is applicable in almost all types software, not just graphical ones like D3. Many software lack this and can be made much better/attract more adoption if there are more examples.
Every function/method/class has code examples of actual usage (and many times multiple examples for different use cases).
It also provides a section where people can post documentation comments per function/method/class.
This has been there since nearly day 1. Wouldnt surprise me if this helped considerably in its overall adoption as a language.
I honestly wish more language documentation provided this kind of format and accessibility.
(Shameless plug: during a two week quarantine isolation I started but did not finish making a video series on using d3 with Svelte: https://youtube.com/playlist?list=PLXiRqCwhpnehz5z0gpsmcb2l8...)
The one place I’ve found it doesn’t quite play nice with React is not the DOM at all, but that the force simulation insists on modifying data in place where React wants things to be immutable, but it’s not a dealbreaker.
With SVG as your canvas and a good framework for DOM manipulation (in my case it is mostly vue), and the shapes and scales available from D3, it really starts to feel like you have as much freedom as you would with a pen and paper.
Most of the the fullstack (renamed to newline) books are pretty good.
No affiliation just a happy customer.
> The only way to recognize — and then bridge — the gulf of understanding between you and people using your tool is to observe their struggles and talk to them. It’s amazing how quickly glaring flaws are revealed this way. Answering questions on Stack Overflow (or GitHub, Twitter, Slack, or wherever else) is not a selfless act of altruism; it’s a chance to learn, to find where people struggle and hear their perspective. Each question is an opportunity to help one individual, but that question can also inspire a tutorial, an example, or even a feature that prevents others from hitting the same issue.
What I love about being a front-end engineer is seeing how people use what I build, which almost always brings up "obvious" issues and improvements that weren't so obvious when you're working on it yourself.
Now that I'm mostly building developer tooling, this gets even better: not only are the users like me so I can empathise with them better, but I know where they're going with their questions and observe them "in the wild", and easily figure out what help they need without needing to set up specific UX research sessions.
But this primarily gets fun if you use it as a way to scale up your support. Which means it's important to keep the following in mind:
> But there’s also a limit. As one person, you can’t help everyone. And you can’t make everyone happy because your tool is only a tiny part of their life. Don’t make that your goal: focus on learning and broadening your perspective. If it stops being constructive for you, then stop. Period. And don’t feel bad!
Love this window into his thought process.
I'm also happy to see someone as accomplished as him say that randos on the internet are also capable of hurting his feelings. It makes me feel substantially less alone in that regard.
I'm looking to build a complex dependency/timeline graph for a web of interconnected stories in a media franchise. Each story has a release date where it needs to appear, and an arbitrary list of dependencies for previous episodes/stories/interludes which would have a line drawn to that dependency. The end result would be a sort of hybrid digraph/timeline, enabling a reader to get the 'minimum path' to catch up to a certain story in the collection.
D3 looked promising, but there's no direct equivalent I can see in the examples. For those that are experienced with D3, is that sort of thing achievable? Should I be looking at D3 or something else?
The way I would plot it is to have a long horizontal scroll along the x-axis where a series of nodes are scattered in the single date dimension. Hovering (or clicking) over this node would expand a list of dependencies into the second dimension (distance from the original node might represent time; perhaps in two columns, past [depends on] and future [depended by]). Clicking on one of these dependency nodes would scroll you smoothly where this dependency nodes reside on the main axis.
All of this is possible (and almost trivial) with D3. However you might need to be innovative in implementation as I don’t think there are easy examples for you to follow.
I think this is one of the main reasons the FastAPI framework is very successful. The documentation teaches you about everything and doesn't assume any prerequisites besides general Python knowledge. I've used it recently, and it's such a delight to work with.
I'm (a little) older and (a little) wiser, and know this kind of support is a huge amount of work. It sounds like
"focus[ing] on learning and broadening your perspective" is what fueled all those answers I so appreciated.