Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

D3 in Depth

d3indepth.com

Post reply on HN
Print view View original

51–60 of 84 posts

Re: D3 in Depth

#51

Post by ghostly_s »

toasted-subs wrote: post #47
mbostock wrote: post #17

Earlier quoted context omitted.

In what way are these free open-source tools “locked-in” to Observable? Observable Plot is a vanilla JavaScript library that is released under the ISC license and can be used with any style of web development (e.g., React, Svelte, whatever). And likewise Observable Framework is released under the ISC license and you’re able to self-host projects anywhere and develop locally?

Can you add the library as a html link. Anything else would be unwise to invest time in learning.

Yes? Examples here: https://observablehq.com/plot/getting-started

Re: D3 in Depth

#52

Post by contravariant »

forrestthewoods wrote: post #42
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…

> but you want something a bit higher level These days I kinda want the opposite. Most of the time I know exactly what I want my output to look like. But frameworks inherently provide a large bag of presets and if you want something slightly different from the preset it's a pain in the ass. For many types of plots I find it's actually kinda easier to just manipulate SVG data directly. It's not that hard! I'd like to…

Why does d3 not work for you if you just want to manipulate the svg directly? You can use it to generate or update arbitrary xml as far as I know.

Re: D3 in Depth

#53

Post by hajile »

laurels-marts wrote: post #11
hajile wrote: post #6

Learn D3 then (assuming you're doing something chart-like as most of us are) move to something like VisX or some non-React equivalent and never look back. I view D3 and jQuery as being somewhat similar and both are very prone to spaghetti. Something like VisX adds a lot of structure over the D3 you're using to keep things sane.

I’ve been using D3 on and off for quite some time. I’m just starting now with react and visx definitely looks very promising as it bridges the gap nicely. Do you find it limiting though (like you have to fight the tool) to achieve something more custom vs. using plain D3?

VisX starts with low-level primitive components that match very closely to D3 primitives. It then builds some chart primitives on top of those and then builds some charts on top of that. You can build pretty much anything using the lowest-level primitives and still have a better developer experience than D3 IMO.

If you don't need any real customizability (and know you won't need it in the future), I'd stick with something with something less customizable, but faster to setup. If you know you need custom, take the 10-20% more time to setup and be able to change in the future as that'll be faster than porting your charts over.

Re: D3 in Depth

#54

Post by breadwinner »

D3 is a terrific toolkit. The fact that it is a low-level toolkit means you have to write more code, but on the other hand, you have more power. One of the negatives of D3 is that D3 charts are not responsive by default. Whether the chart fills the screen, or fills a small area in a dashboard, the grid lines are spaced the same and fonts are the same size. You can add responsiveness manually. It would be nice if a future version was responsive out of the box.

Re: D3 in Depth

#55

Post by zdragnar »

contravariant wrote: post #52
forrestthewoods wrote: post #42

Earlier quoted context omitted.

> but you want something a bit higher level These days I kinda want the opposite. Most of the time I know exactly what I want my output to look like. But frameworks inherently provide a large bag of presets and if you want something slightly different from the preset it's a pain in the ass. For many types of plots I find it's actually kinda easier to just manipulate SVG data directly. It's not that hard! I'd like to…

Why does d3 not work for you if you just want to manipulate the svg directly? You can use it to generate or update arbitrary xml as far as I know.

The higher level in this case is observable plot, not d3.

Re: D3 in Depth

#56

Post by hantusk »

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…

I also have written a lot d3, between versions 2 and 7, and the refactoring that has happened meant a lot of examples online that were hard to comprehend were even harder to update.

I feel like its more stable now though. Something clicks for me since ive started writing it in more imperative style with svelte+d3 rather than d3 alone. The generated elements are easier for me to reason about, rather than otherwise relying on inspecting the generated elements with dev-tools after the generation.

This site was helpful to me, to combine d3 and svelte: https://svelte.recipes/

Re: D3 in Depth

#57

Post by sbarre »

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.

I'll ignore the part where you're wrong about the lock-in, but to the rest of what you said...

Yes? I guess I didn't think it needed to be said so explicitly, but if you are opting into Plot and Framework, you are accepting convention over configuration as they say.

And for some situations, that is what you want.

If you value flexibility and control above all else, then I agree they may not be for you.

But if you value other things, like speed of iteration, or just getting some good data visualizations built without a deep investment in learning underlying concepts, then Plot and/or Framework have definite advantages over doing it all with D3.

Re: D3 in Depth

#58

Post by hantusk »

pphysch wrote: post #12

D3 has an unnecessarily non-intuitive API design, and I think that kills it for a lot of people. For example, why must a data join be performed like `selection.data(array).join(element-type)` instead of something like `selection.join(element-type, array)`. Looking from a pure API-design perspective, not getting bogged down in the technical details. Lazy eval method chaining is a natural fit for applying+branching lar…

I don't think it was for the technical fit or performance reasons, but more a philosophy about everything starts with data, and graphics are just visualizations anchored to the data points (or a functionally derived property of the data points).

That also means the d3-* libraries compose really well, since the data is the common binding, and not some conceptual class or custom element.

Re: D3 in Depth

#59

Post by locallost »

wisemang wrote: post #33
locallost wrote: post #25

Earlier quoted context omitted.

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.

D3 runs in the browser and it manipulates DOM nodes, a very high level abstraction. You can accomplish something with it using SVG, which is again a high level abstraction. You can give it data and it will spit out numbers that you can use to draw something on the screen. You can bind that data to elements and it will keep track of what's entering and what's exiting. You can apply fancy transitions with a line of code! You can make it change an appearance of e.g. a graph by changing the interpolation method. And so on.

Sure you have to write code, but it does a lot of things in the background that would take you s lot longer to do yourself. High level is not just "here's a library on top of D3 that you just give data to and you're done, but then you have to cry for days because you need to do something it didn't think of - 80% of use cases". When I used it I didn't get it, but then I took some time, a couple days, to actually understand it and I got a lot more productive. It's a great feeling when instead of thinking in workarounds for a missing configuration option you can think in solutions for the actual task. A lot quicker and more rewarding.

I didn't do much computer graphics in my life, some mandatory university classes, but I'd say doing it on the simplest beginner level it was a much different experience.

Re: D3 in Depth

#60

Post by jo-m »

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…

Observable Plot is amazing. It is very flexible and intuitive to use. I now prefer it over Plotly.js which I used to use before.

The docs are pretty OK, the only thing missing is a usable API reference section, so discoverability is not great.

Post reply on HN