|
| wing-_-nuts wrote:
| 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 wrote:
| 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!
| azemetre wrote:
| 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.
| itairall wrote:
| 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.
| motohagiography wrote:
| They form a grammar of viz techniques. Brilliant, thank you.
| mhh__ wrote:
| 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.
| cududa wrote:
| Just curious, does your setup support exporting the charts as
| base64 or PNG's?
| internetter wrote:
| Interesting to see this built on substack. I didn't know it had
| the capacity for something this custom
| tunesmith wrote:
| 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.
| MR4D wrote:
| Did anyone else just waste 5 minutes playing with the background
| image?
|
| I haven't seen that before - very cool.
| Juicyy wrote:
| 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
| _Parfait_ wrote:
| Don't ever let this site go dark for any reason ever please.
| Great stuff
| jibbit wrote:
| 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 wrote:
| 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.
| SkyPuncher wrote:
| The page background is wild. It's really neat how it reacts to
| the mouse cursor.
| littlecranky67 wrote:
| 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 wrote:
| > 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 wrote:
| Data calculations and rendering should be done in the same
| framework if you wish to optimize interactivity.
| julien040 wrote:
| 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 wrote:
| 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 wrote:
| 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.
| xnx wrote:
| Observable Plot (based on D3) might be a better place to
| start: https://observablehq.com/blog/introducing-
| observable-plot
| epgui wrote:
| We really need to rally all the dataviz tools around a grammar of
| graphics (Wilkinson, 2005)
| erksa wrote:
| Great work!
| azangru wrote:
| 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 wrote:
| 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...
| jitl wrote:
| 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 wrote:
| Wow how have I never heard of this? Looks wonderful
| jitl wrote:
| 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
| patrickthebold wrote:
| 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.
| aweb wrote:
| 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 wrote:
| Thanks a lot for the nice feedback!
| jsweojtj wrote:
| 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.
| comboy wrote:
| Well, I don't have any constructive feedback, but it's beautiful.
| [deleted]
| sputknick wrote:
| 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.
___________________________________________________________________
(page generated 2023-06-23 23:01 UTC) |