D3 in Depth • Hacker News Board

Re: D3 in Depth

#31

Post by lloydatkinson » Thu, May 16, 2024, 5:31 PM UTC

I keep searching for entirely not-web based diagramming/charting solutions. That can be driven via CLI or using some library, and output SVG or PNG.

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.

Re: D3 in Depth

#32

Post by laurels-marts » Thu, May 16, 2024, 5:36 PM UTC

bilater wrote: post #29

I love the visualizations created but something about D3 syntax has just never clicked for me. It seems overly convoluted, verbose and from an old era. We've thankfully moved to a more declarative way of doing things.

D3 is from jQuery era so there are a lot of methods for manually manipulating the DOM like d3.select() and then selection.attr() etc. but those patterns tend to lead to components that are lengthy, hard to read and hard to maintain. Arguably a better approach is to group each D3 module based on whether it "modifies DOM" or "doesn't modify DOM". Then use React/Svelte to declaratively render the DOM and only use the D3 modules from the latter group for their math utilities.

Re: D3 in Depth

#33

Post by wisemang » Thu, May 16, 2024, 5:43 PM UTC

locallost wrote: post #25

jeffbee wrote: post #18

Earlier quoted context omitted.

This is like saying that a computer without an operating system offers the best flexibility, or that a pile of sand is more flexible than an assembled computer.

D3 is not an empty computer. It's a high level library built in a high level language that runs in a browser. You are very very very far away from "metal". Being able to do something in a few clicks or little typing is nice until you need to do something more complicated. Sometimes it's worth actually learning how something basically works. Sometimes it isn't, it's everybody's choice.

So D3 is not what I’d consider a high-level library. The point of it is to be able to do all kinds of stuff not supported by your average charting solution’s out of the box histograms and whatnot. It’s a great way to make more bespoke visualizations.

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.

Re: D3 in Depth

#34

Post by wbeckler » Thu, May 16, 2024, 5:45 PM UTC

I've heard great things about Vega [1], which sits on top of D3. It's a dependency of OpenSearch Dashboards, allowing users to create custom dashboards on log and observability data [2]. The vega library might alleviate some of the concerns others are expressing about the learnability of D3.

[1] https://vega.github.io/vega/docs/ [2] https://opensearch.org/docs/latest/dashboards/visualize/vega...

Re: D3 in Depth

#35

Post by simonw » Thu, May 16, 2024, 5:49 PM UTC

gaws wrote: post #15

sbarre wrote: post #5

If you like the idea of using D3 for data visualization but you want something a bit higher level, check out Observable Plot[1], a library by the D3 team that adds a lot of conventions and conveniences on top of D3, specifically for building plots, charts and graphs. And even beyond that, there's Observable Framework[2], a static site generator for building visualization dashboards (that supports Plot, D3 and lots of…

Plot and Framework are locked into the Observable ecosystem, which has its own learning curve. Learning D3 offers the best flexibility and control.

Plot isn't locked into the Observable ecosystem at all - it's a JavaScript library that you can use independently of everything else there.

Re: D3 in Depth

#36

Post by __MatrixMan__ » Thu, May 16, 2024, 6:03 PM UTC

locallost wrote: post #25

jeffbee wrote: post #18

Earlier quoted context omitted.

This is like saying that a computer without an operating system offers the best flexibility, or that a pile of sand is more flexible than an assembled computer.

D3 is not an empty computer. It's a high level library built in a high level language that runs in a browser. You are very very very far away from "metal". Being able to do something in a few clicks or little typing is nice until you need to do something more complicated. Sometimes it's worth actually learning how something basically works. Sometimes it isn't, it's everybody's choice.

I've used D3 in nodejs to generate a png. Is it really that different than using something like Python or Java to do the same?

Re: D3 in Depth

#37

Post by bilekas » Thu, May 16, 2024, 6:09 PM UTC

gaws wrote: post #15

sbarre wrote: post #5

If you like the idea of using D3 for data visualization but you want something a bit higher level, check out Observable Plot[1], a library by the D3 team that adds a lot of conventions and conveniences on top of D3, specifically for building plots, charts and graphs. And even beyond that, there's Observable Framework[2], a static site generator for building visualization dashboards (that supports Plot, D3 and lots of…

Plot and Framework are locked into the Observable ecosystem, which has its own learning curve. Learning D3 offers the best flexibility and control.

Yeah, I can say from experience of D3 at least, it's very far from locked in. In fact I would ask what library you're thinking of could be less.

The community also has helped with some bizarre integrations I was trying to do, into libraries like highcharts for strange reasons etc.

Re: D3 in Depth

#38

Post by javajosh » Thu, May 16, 2024, 6:19 PM UTC

The real problem with D3 is that, as a library, it doesn't really do visualizations. It gives you functions and exmaples to compose your own visualizations, whose key requirement is an expert-level understanding of JavaScript (particularly closures and functional programming). What mbostock says is the core "abstraction" of D3, the select and select diffing, is only an affordance for writing reentrant "paint()", with the flourish that your paint statements are expressed as builder statements, which themselves are scoped to select and can be broken up for various effects. Especially in animated examples, D3 does suprisingly little for you, as it's up to you to write the outer loop and track state over time. Nor does D3 give you any abstraction for encapsulating a visualization, as a function or otherwise. This is left as an exercise for the reader. All of this comes as a big surprise, or shock, to the new D3 user. It would be like adopting a new database and finding only a library for file IO and BTree indices and query optimizers, that you need to wire up yourself.

Re: D3 in Depth

#39

Post by ska » Thu, May 16, 2024, 6:33 PM UTC

treflop wrote: post #9

I like d3 and have built a lot of things in it but every time I go back to it after not using it for a few years, I can never remember much, the docs just confuse me more, and I feel like I’m back at square one. 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 to…

> hereas you could show me some partial differential equations to solve that I haven’t touched in 10 years and that somehow comes back quicker.

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.

Re: D3 in Depth

#40

Post by stared » Thu, May 16, 2024, 6:42 PM UTC

I've been in love with D3.js and have used it as the key technology for dozens of data visualization projects, both commercial and personal. However, its rendering syntax now feels dated, reminiscent of the jQuery era. While I still use various auxiliary functions (e.g., for ease or scaling), I now create actual components in a modern framework (in my case, Vue 3 and TypeScript).

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.