Show HN: A gallery of graphs built with React and D3.js(react-graph-gallery.com)
react-graph-gallery.com
Show HN: A gallery of graphs built with React and D3.js
https://www.react-graph-gallery.com
62 comments
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
VisX is mentioned in the about page, so presumably. https://www.react-graph-gallery.com/about, that page also gives some motivation on why this is a separate project.
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.
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.
Wow how have I never heard of this? Looks wonderful
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
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.
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.
> 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.
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.
Data calculations and rendering should be done in the same framework if you wish to optimize interactivity.
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.
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?
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...
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...
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
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
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.
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?
- 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?
All the map sections are not ready yet. But they will be soon!
Did anyone else just waste 5 minutes playing with the background image?
I haven't seen that before - very cool.
I haven't seen that before - very cool.
it comes from some library called js particles or particles.js i forget which and there are knockoffs... https://particles.js.org/samples/index.html#basic
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.
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!
I like react-spring but there are sooo many approached. All with pros and cons.
I'll write more about it soon!
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
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.
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.
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.
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.
Any good resources you could share that has helped you? Thank you.
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.
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.
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.
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.
Observable Plot (based on D3) might be a better place to start: https://observablehq.com/blog/introducing-observable-plot
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
D3.js is split in 2 types of functions:
- "math" - rendering
Math functions cannot be avoided for sure
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/
https://blog.logrocket.com/data-visualization-svelte-d3/
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.
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.
You can:
- call d3.axis in a useEffect
- Or create your own axis component rendering some svg. It is not so hard actually.
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?
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.
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.
D3.js comes with function that modify the DOM. This is react job too. So using both together can be a challenge.
The page background is wild. It's really neat how it reacts to the mouse cursor.
Well, I don't have any constructive feedback, but it's beautiful.
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.
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!
I really enjoyed the Fullstack D3 book by Amelia Wattenberger:
https://www.newline.co/fullstack-d3
I'd recommend the book over the video as it does more elaborate data visualizations.
https://www.newline.co/fullstack-d3
I'd recommend the book over the video as it does more elaborate data visualizations.
Many great books exist for d3.js.
For d3.js AND react, it is missing for now IMO
For d3.js AND react, it is missing for now IMO
Interesting to see this built on substack. I didn't know it had the capacity for something this custom
Substack is just the tool I use for the newsletter!
The website is made using Next.JS
The website is made using Next.JS
They form a grammar of viz techniques. Brilliant, thank you.
[deleted]
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!