D3 in Depth
d3indepth.com
d3indepth.com
And even beyond that, there's Observable Framework[2], a static site generator for building visualization dashboards (that supports Plot, D3 and lots of other libraries).
Anything else would be unwise to invest time in learning.
Never had a problem, never felt the need to upgrade. Still have a bunch of stuff that just works.
Thank you for your effort.
Of course sometimes you just want to make a damn histogram without reinventing the wheel which is where some of the niceties discussed above come in.
Sure you have to write code, but it does a lot of things in the background that would take you s lot longer to do yourself. High level is not just "here's a library on top of D3 that you just give data to and you're done, but then you have to cry for days because you need to do something it didn't think of - 80% of use cases". When I used it I didn't get it, but then I took some time, a couple days, to actually understand it and I got a lot more productive. It's a great feeling when instead of thinking in workarounds for a missing configuration option you can think in solutions for the actual task. A lot quicker and more rewarding.
I didn't do much computer graphics in my life, some mandatory university classes, but I'd say doing it on the simplest beginner level it was a much different experience.
It’s hard to think of a lower level abstraction for that purpose.
The community also has helped with some bizarre integrations I was trying to do, into libraries like highcharts for strange reasons etc.
Yes? I guess I didn't think it needed to be said so explicitly, but if you are opting into Plot and Framework, you are accepting convention over configuration as they say.
And for some situations, that is what you want.
If you value flexibility and control above all else, then I agree they may not be for you.
But if you value other things, like speed of iteration, or just getting some good data visualizations built without a deep investment in learning underlying concepts, then Plot and/or Framework have definite advantages over doing it all with D3.
These days I kinda want the opposite. Most of the time I know exactly what I want my output to look like. But frameworks inherently provide a large bag of presets and if you want something slightly different from the preset it's a pain in the ass.
For many types of plots I find it's actually kinda easier to just manipulate SVG data directly. It's not that hard!
I'd like to see a library/framework that focuses on making it easier to manipulate SVG or canvas output. It should be trivial to make tweaks. But the higher level a framework goes the harder it is to step off the golden path.
But I've found lots of value in using Plot to explore data, and quickly throw something together and look at it, and decide if it's a good way to present the data or not.
Although I will say that you can "drop down" to the SVG pretty easily with Plot. Lots of examples even on their site where they start with Plot marks and then heavily customize the SVG directly.
edit: nvm, turned on hardware acceleration. Smoother, but still jankier than I'd like on a Ryzen 9.
I try to avoid graphs with html5 canvas like the plague maybe a new way to design them would be nice.
The docs are pretty OK, the only thing missing is a usable API reference section, so discoverability is not great.
Whereas you could show me some partial differential equations to solve that I haven’t touched in 10 years and that somehow comes back quicker.
But I also think the d3 reference docs are absolutely horrible too.
Not saying this is an easy problem to solve either. If I needed to generate some very specific data driven graphics it would probably still be my go to.
For me it also always had this moment when it „clicked“ just to disappear after not using it for a couple of months.
Which is an interesting problem!
Is it better to optimally model ones problem space?
Or suboptimally model it, but create a model that's closer to developer/user expectations?
I could not understand some of the design choices until I understood tidy data and not being much into R, I never ran across the idea previously.
Mike Bostock is so brilliant and has put in such an immense amount of work into d3 that if you even start trying to build your own data visualization javascript library you will end up leveraging d3 at some point as to not reinvent the wheel.
Again, I’m not an expert on d3, just someone who spent ~12-18months maintaining couple visualizations (among other things)
Maybe 80% of what I do is applications, 10% systems and 10% data analysis. Often I will spend two weeks making Jupyter notebooks and then not look at it for two months.
I find most plotting libs have a lot of arbitrary things to remember, they usually have several nano DSLs (strings that get interpreted in ways more complex than atoi.). On top of that most plotting libs have something wrong from my point of view in various areas like deciding the range of the axes or handling huge numbers of points or something.
D3 makes you do a lot yourself but the interfaces it provides to do that are conceptually straightforward. Instead of using someone else’s bloated and buggy general purpose code though an APi that feels like assembling a ship in a bottle you can just do it right with D3.js.
But having to do it yourself is a lot of work so you have to make an executive decision between shoehorning some plotting library that can’t do a chart feature that honestly should be supported versus building an entire chart from scratch.
You still end up finding a million ways to use the d3 library even if you never use attr at all.
The HCI (human calculation interface) for calculus has been lovingly polished for many, many generations. A quick read over Newtons original texts will quickly reveal that wasn't always so.
It seems unfair to hold an API to the standard, really.
I feel like its more stable now though. Something clicks for me since ive started writing it in more imperative style with svelte+d3 rather than d3 alone. The generated elements are easier for me to reason about, rather than otherwise relying on inspecting the generated elements with dev-tools after the generation.
This site was helpful to me, to combine d3 and svelte: https://svelte.recipes/
Then, I just had to write the necessary aggregation/group_by sql to give it the data it expects in the correct shape. Tedious, but it was the path of least resistance.
Even if you don't draw data on the web, you'll probably eventually draw data somewhere, and you'll be glad to look for an equivalent in that ecosystem.
Pretty sure I had to scale the rectangles I was drawing for the graph according to the dimensions of the png I was making.
It was of course very trivial, and nothing like the amazing things D3 can do. But it was a neat experience, making something of my own for very first time that produced an image on the computer.
D3 was never intuitive for me. Maybe the problem is that it tries to do too much, at too many different level of abstraction? If it's just about projecting data, that's easy enough to understand. But I guess projection is also closely tied to axis and other pieces.
Despite this shift, I am grateful to D3.js for the beautiful years it gave me and for teaching me various good practices in data visualization. The defaults and demos by Mike Bostock have been both an inspiration and an example of good standards, aligned with Tufte's minimalism.
I view D3 and jQuery as being somewhat similar and both are very prone to spaghetti. Something like VisX adds a lot of structure over the D3 you're using to keep things sane.
If you don't need any real customizability (and know you won't need it in the future), I'd stick with something with something less customizable, but faster to setup. If you know you need custom, take the 10-20% more time to setup and be able to change in the future as that'll be faster than porting your charts over.
Another tool also inspired by GG is aptly named ggplot2 and for the R language. It offers a much more terse and functional inspired interface that also works well with an uncommon tool named Rush, R one-liners for the Shell, for quickly creating graphics from CSVs piped into the tool.
All of these things usually depend on browser functionality or use some janky as fuck SSR solution using a headless browser to generate them server side.
Of particular note, I’d also like to be able to programmatically generate Venn diagrams. It seems there is, bizarrely, a complete dearth of anything in this space. A couple of JavaScript chart libraries support them, but generally speaking there seems to be hardly any support for them.
gnuplot seems good - just no Venn diagram support.
[1] https://vega.github.io/vega/docs/ [2] https://opensearch.org/docs/latest/dashboards/visualize/vega...
For example, why must a data join be performed like `selection.data(array).join(element-type)` instead of something like `selection.join(element-type, array)`. Looking from a pure API-design perspective, not getting bogged down in the technical details.
Lazy eval method chaining is a natural fit for applying+branching large amounts of HTML/CSS state updates but I feel that the designers took it a bit too far with the core D3 operations.
That also means the d3-* libraries compose really well, since the data is the common binding, and not some conceptual class or custom element.
I could really use a "start from the basics" tutorial.
I will say Github Copilot has been excellent at helping me with random TS errors when porting my graphs from JS to TS. It's nice how typed D3 can be when you finally opt into it.
Here's a recent example I built: https://alexsci.com/rss-blogroll-network/
D3 in Depth - https://news.ycombinator.com/item?id=16844250 - April 2018 (52 comments)
I haven't used Altair but I wanted something higher level than D3 (which I've used but it feels fairly low level) so I went through the learning curve for Vega.js, and it could handle every usecase that I tried, some of which were pretty complex.