16 ms·
Show HN: A gallery of graphs built with React and D3.js
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!
- aweb 3y agoWow, 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 3y agoThanks a lot for the nice feedback!
- azangru 3y agoCould 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 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 3y agoIn 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-demo/ https://swizec.com/blog/a-better-react-18-starttransition-de...
- holtzy 3y agoThis 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 3y agoThe page background is wild. It's really neat how it reacts to the mouse cursor.
- julien040 3y agoThis 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 3y agoI'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 3y agoI 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.
- xnx 3y agoObservable Plot (based on D3) might be a better place to start: https://observablehq.com/blog/introducing-observable-plot https://observablehq.com/blog/introducing-observable-plot
- holtzy 3y agoI also have the d3 graph gallery. It shows only simple charts which ease the learning curve d3-graph-gallery.com
- jsweojtj 3y agoVery 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 3y agoThanks! Glad to hear this!
- wing-_-nuts 3y agoWould 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.
- azemetre 3y agoI really enjoyed the Fullstack D3 book by Amelia Wattenberger: https://www.newline.co/fullstack-d3 https://www.newline.co/fullstack-d3 I'd recommend the book over the video as it does more elaborate data visualizations.
- p4ul 3y agoI'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 3y agoMany great books exist for d3.js. For d3.js AND react, it is missing for now IMO
- itairall 3y agoGreat 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 3y agoYou can: - call d3.axis in a useEffect - Or create your own axis component rendering some svg. It is not so hard actually.
- littlecranky67 3y agoThis 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 3y ago> 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 3y agoData calculations and rendering should be done in the same framework if you wish to optimize interactivity.
- littlecranky67 3y agoI 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 3y agoVery 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 https://airbnb.io/visx/gallery
- internetter 3y agoWow how have I never heard of this? Looks wonderful
- jitl 3y agoHarry (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 https://twitter.com/hshoff
- patrickthebold 3y agoVisX is mentioned in the about page, so presumably. https://www.react-graph-gallery.com/about https://www.react-graph-gallery.com/about, that page also gives some motivation on why this is a separate project.
- holtzy 3y agoYes 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 3y agoThey form a grammar of viz techniques. Brilliant, thank you.
- cududa 3y agoJust curious, does your setup support exporting the charts as base64 or PNG’s?
- holtzy 3y agoNope. Charts are added to the DOM using SVG or Canvas.
- deleted 3y ago[deleted]
- sputknick 3y agoThis 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.
- holtzy 3y agoNice thanks!
- mhh__ 3y agoIn 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 3y agoInteresting to see this built on substack. I didn't know it had the capacity for something this custom
- holtzy 3y agoSubstack is just the tool I use for the newsletter! The website is made using Next.JS
- comboy 3y agoWell, I don't have any constructive feedback, but it's beautiful.
- _Parfait_ 3y agoDon't ever let this site go dark for any reason ever please. Great stuff
- holtzy 3y agoIt's fully static and hosted on github. It won't go dark. (And I'm actively working on it :) )
- tunesmith 3y agoThis 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 3y agoAnimation 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 3y agoDo 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 3y agoWe really need to rally all the dataviz tools around a grammar of graphics (Wilkinson, 2005)
- jibbit 3y agoWhat 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 3y agoI 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 3y agoI 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.
- MR4D 3y agoDid anyone else just waste 5 minutes playing with the background image? I haven't seen that before - very cool.
- Juicyy 3y agoit 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 https://particles.js.org/samples/index.html#basic
- erksa 3y agoGreat work!
- holtzy 3y agoThanks!
- sterlind 3y agoThe 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 3y agoAll the map sections are not ready yet. But they will be soon!
- ttfkam 3y agoUsing 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/