HN Explorer

Show HN: A gallery of graphs built with React and D3.js (react-graph-gallery.com)

297 points by holtzy ↗ HN
Many JS libraries exist to build graphs on the web (Vega, chartJS, Plotly...).

They allow to make charts quickly. But you lose flexibility: you're limited by the options they offer.

I just created a gallery with hundreds of graphs made with d3.js and React. - Examples are split by graph types - They all come with explanation and code sandboxes - Gradual complexity to ease the learning curve

It took me ages to create this project! Feedback welcome!

62 comments

[ 0.29 ms ] story [ 115 ms ] thread
aweb
Wow, I don't know a thing about dataviz but I really liked the website! The real world examples are really helpful to understand why we could use a certain kind of chart. Keep up the good work!
holtzy
Thanks a lot for the nice feedback!
azangru
Could you tell us what you have learnt about the performance of these tools? E.g. when you write about different approaches to building charts with d3 and react here (https://www.react-graph-gallery.com/about), is approach 2, which directly interacts with the DOM, more performant than approach 3, which has to go through React? Also, what, approximately, is the upper limit of a dataset size after which the React+d3=>svg approach begins to stutter?
Swizec
In my experience (author of ReactForDataviz) the React renders SVG approach starts struggling around 10,000 to 50,000 nodes depending on hardware and what kind of calculations you’re doing.

Directly manipulating the SVG DOM with D3 (wrapped in a React blackbox) goes to around 100,000 nodes. After that you really have to start using canvas or webgl.

At those numbers you also start getting huge performance gains by mutating data and doing less copying. Everything you learn in “how to do react” tutorials quickly starts being wrong when your arrays have thousands of elements.

Edit: there’s also a lot you can do with how things are nested. The flatter your DOM, the fewer nodes React has to touch for every update

Here’s a fun stress test I built a while back that goes up to a million nodes rendered by React https://swizec.com/blog/a-better-react-18-starttransition-de...

holtzy
This is a very good question as performance is a key struggle in Data Visualization. Swizec answer below is great.

I will write more about performance soon. But using several layers of canvas is definitely the way to go in most situation to put it in a nutshell

SkyPuncher
The page background is wild. It's really neat how it reacts to the mouse cursor.
julien040
This is awesome! I have always wanted to learn about D3.js, but I've never really started. I hope these well-made examples will help. Thank you for creating this.
mjfisher
I've been vaugely interested for years, but I never quite had a good handle on what problems D3 solved; it's lower level than a charting library - to the extent that you use it to manipulate SVG primitives directly. At that point I figured you may as well go all the way and write it all yourself.

However now I've started playing around with it, I realise its killer core feature: it manages the relationships between the scale of your data and the coordinates on your screen, which saves a ton of awkward calculations. Add in helpers built on top for things like axes, line smoothing etc. and you've got a hell of a powerful API for creating charts, custom visualisations and anything else you can think of. I'm becoming a fan.

vidyesh
I really like the power of D3 but I have tried and failed at learning D3.js properly, I was unable to understand basic bars and graphs but the same reason you mentioned I find it difficult to advance, SVG manipulation with a big dataset is difficult after some point to create a complex visualizations.

Any good resources you could share that has helped you? Thank you.

holtzy
I also have the d3 graph gallery. It shows only simple charts which ease the learning curve

d3-graph-gallery.com

vidyesh
Thank you.

Really nice gallery. I think this will serve as a great reference material for me when learning.

mjfisher
A bit late on the reply, but someone else mentioned observable HQ for lots of examples.

I found this YouTube video of someone walking through creating a bar chart helpful - the author explains as he goes:

https://youtu.be/BDpBAFvdjYo

Beyond that, copying and pasting working examples and trying to adjust them for your purposes works really well. I still don't fully understand the API but it doesn't seem to matter that much to start with - I'm still in the "monkey see, monkey do, monkey iterate" phase.

vidyesh
I have tried ObservableHQ but I am not sure it helps me understand D3 as much as it does help me use it like a Jupyter notebook.

And unlike Jupyter, ObservableHQ notebook does a lot of heavy lifting when it comes to creating charts for the web which outside that makes it really difficult to adapt to.

I guess I will have to follow the monkey rule until I really understand it well and need to learn desperately.

holtzy
If 1 day you need to compute the position of all the rectangles in a treemap, you will understand how handy d3.js is.

D3.js is split in 2 types of functions:

- "math" - rendering

Math functions cannot be avoided for sure

jsweojtj
Very nice! I've been a fan of your other data viz gallery work w/ python especially. I love how clearly you explain how to build up these results as well.
holtzy
Thanks! Glad to hear this!
wing-_-nuts
Would anyone have book recommendations for react and d3? I'm a backend dev, with little interest in front end but the ability to visualize data like this is a 'killer app' for me.
p4ul
I'm a big fan of "D3 for the Impatient". It's rather brief, but still manages to cover a huge number of topics. I also appreciate its style of gradually building up an intuition for how D3 works. I always recommend this book for people coming to D3!
holtzy
Many great books exist for d3.js.

For d3.js AND react, it is missing for now IMO

itairall
Great stuff. I had gone down this path last year with not using attr and it was so hard to find good examples like this.

The thing I never figured out was how to use d3 axis as a svg generator. Starting from scratch on each project is quite painful for the axis and d3 axis is so nice.

holtzy
You can: - call d3.axis in a useEffect - Or create your own axis component rendering some svg. It is not so hard actually.
littlecranky67
This is great! The example page on official d3 is a bit dated and certainly has "grown" over time. I also particular don't like that d3 is too much of a "one tool for everything" approach. I.e. the data calculations and the drawings shouldn't be done in the same framework (thats were React comes into play).

My biggest pet peeve with D3 is the lack of TypeScript friendly-ness. I not only mean the lack of official typescript .d.ts bindings, but the API itself is completely not designed for strict typing. Functions are heavily overloaded/polymorphic, take all sort of different types of parameter shapes, and change their return values on what is passed in etc. My experience was always, once I got my code "properly" typed, the next update of the .d.ts bindings would break again, and this would repeat every couple of weeks.

azangru
> I.e. the data calculations and the drawings shouldn't be done in the same framework (thats were React comes into play).

I used to think so too; but I don't any longer. Rendering in React is fairly expensive. It may easily turn out that direct DOM manipulation is better suited to visualizations than DOM manipulation through React.

jdonaldson
Data calculations and rendering should be done in the same framework if you wish to optimize interactivity.
littlecranky67
I get your point and tend to agree; the issue I have is that d3 drawing and updating, along with internal events (i.e. d3 custom dragndrop implementation) don't play nicely together with React (or Angular or Vue, for that matter). But I admit, I wouldn't know how to improve on that.
jitl
Very cool to explore the code here. Have you looked at Visx? It’s a D3+React mashup library, used by Airbnb and Notion for graphs. https://airbnb.io/visx/gallery
internetter
Wow how have I never heard of this? Looks wonderful
jitl
Harry (the guy who wrote it) is skilled but not a JS thought-leader Twitter personality. I know about it because I worked at Airbnb back in the day. https://twitter.com/hshoff
holtzy
Yes I know about VisX.

The approach is kind of in-between what I suggest and what a classic JS library like Vega does.

It is definitely a very good abstraction imo!! But I'm always scared to be stuck with a customisation I cannot do because of a layer of abstraction.

motohagiography
They form a grammar of viz techniques. Brilliant, thank you.
cududa
Just curious, does your setup support exporting the charts as base64 or PNG’s?
holtzy
Nope. Charts are added to the DOM using SVG or Canvas.
[deleted]
(comment deleted)
sputknick
This is really helpful for me, the right level of example. I find most D3 examples to either be too simple or too complex, this nails the sweetspot of visually impressive, while still being practical.
mhh__
In my experience of implementing some clever financial plots in D3 I find that most examples on websites such as these are very quickly exhausted - unless you're dealing with a chart that either an undergraduate statistician or a programmer of any level might use you're on your own - I don't mind that, except that I notice that libraries often focus on a few examples rather than really nailing (say) getting zooming right.
internetter
Interesting to see this built on substack. I didn't know it had the capacity for something this custom
holtzy
Substack is just the tool I use for the newsletter!

The website is made using Next.JS

comboy
Well, I don't have any constructive feedback, but it's beautiful.
_Parfait_
Don't ever let this site go dark for any reason ever please. Great stuff
holtzy
It's fully static and hosted on github. It won't go dark. (And I'm actively working on it :) )
tunesmith
This subject goes so deep, thank you for creating this. I spent significant time creating my own component that uses elk to lay out a graph, and d3 transitions with interpolation to animate from one graph state to another. I didn't try react-spring and don't have much of an insight between when to use react-spring and when I'd have to use transitions anyway. I'm looking forward to if you add more information along those lines.
holtzy
Animation is the trickiest part of dataviz on the web IMO.

I like react-spring but there are sooo many approached. All with pros and cons.

I'll write more about it soon!

Tokumei-no-hito
Do you have a Substack? I remember your name from the data-to-viz. I’m interested in reading more about your experiences and thoughts on the space
epgui
We really need to rally all the dataviz tools around a grammar of graphics (Wilkinson, 2005)
holtzy
Ever heard about ggplot2 ?

www.r-graph-gallery.com

epgui
Yes haha. I really dislike working in R but ggplot2 is great.
jibbit
What is it about D3 that is hard to explain? I know that documentation is hard, but e.g. something about React makes it easily grokable, and something about D3 is the opposite. Do react and d3 compliment each other? Or overlap?
spion
I think the rendering pipeline for D3 is actually the hard/strange part, and to be honest, the less-valuable part too (can be swapped with React). The rest of the API is great. The new strange, unordered observablehq examples with extra DSL interspersed aren't helping.
holtzy
I agree a LOT with the comment below.

D3.js comes with function that modify the DOM. This is react job too. So using both together can be a challenge.

sterlind
The link for "Connections" (I've been calling them geo-graphs or network maps) seems to be broken, which is a shame. I've had a hard time finding good libraries for them, and they're hard to get right for a few reasons:

- if you zoom out to show the world, map projections wrap around the antimeridian (e.g. you turn right at Kamchatka, loop around and hit Alaska.) if you want your edges to wrap (i.e. follow a great arc) rather than taking the long way around (i.e. drawing a line all through Europe and Asia), you have to do spherical math.

- if you want a multigraph (multiple edges between any pair of nodes), you need to have a way for those edges to "curve" rather than following a straight path (great arc.) this makes the math much more complicated, especially keeping numerical stability and accounting for coordinate singularities.

- now imagine all the fiddly bits of making the arrowheads touch the nodes at the right place, scale in width properly, etc. if you're really committed, you'll use lat/lon for every vertex of every poly you render. if not, there will be distortions. it's a trade-off.

- now imagine updating all of that while panning and zooming, and keeping it efficient and smooth.

I made a component for this, I'll try to open-source it, but I'm curious how other people have tackled the same issue. Did I just over-engineer the hell out of it doing spherical trig, vector math and iterative methods, or is it plain hard?

holtzy
All the map sections are not ready yet. But they will be soon!
ttfkam
Using Svelte and D3 together for data visualization leads to more declarative code and componentized code that developers have become accustomed to but without sacrificing performance.

https://blog.logrocket.com/data-visualization-svelte-d3/

holtzy
How does Svelte makes the code more declarative and Componentized than with React ?
ttfkam
Because React makes you add a bunch of boilerplate and extra steps in code for performance like useMemo(...) that simply aren't needed in Svelte.