If you want to sacrifice some of the flexibility for less verbosity try out ObservableHQ's Plot [1] 1: https://observablehq.com/plot/
For context, Observable is the startup from the original author of d3.
Why is D3 so Verbose?
51–60 of 75 posts
Re: Why is D3 so Verbose?
#52I love D3, but its a library not a language.
D3 is a good example of inventing a language without inventing a syntax for that language. It very much is a DSL implemented in JavaScript.
When Francisco Tolmasky launched Objective J, he wrote a really interesting article that still impacts how I think about this stuff more than a decade later.
Francisco was working on an in-browser slideshow tool like Google Slides, but in the late 00s. To power it, he invented his own language: Objective-J. It had its own toolchain, in the days when most developers were just writing JavaScript inline or maybe in .js files.
Remember, it took React a few years to catch on because it required command line tools to translate JSX to JS. This had the same friction, but years earlier.
This was the thesis behind Objective-J: In the late 1900s, C was the foundation of a good language, but it needed another layer of abstraction on top of it to be more ergonomic. The developers at NeXT/Apple built that layer and called it Objective-C. Objective-J saw the same potential in JavaScript, and ported the ergonomics of Objective-C atop it. It basically tried to do for JavaScript what Objective-C had done for C.
This was the critical part of the argument:
JavaScript (in the era before modules, => functions, and the other current niceties) was the core of a useful language, but it needed a more ergonomic layer on top. Libraries like jQuery were building de-facto DSLs, but calling them libraries. Objective-J was taking conceptual responsibility for being a language on top of JavaScript, instead of being "just" a library. By owning up to being its own language, they could take syntactical liberties that they couldn't under the constraints of being just another JS library.
Re: Why is D3 so Verbose?
#53I could not get over the fact that 0,0 in d3 is the top left corner instead of the bottom left. Why?? Everything in real life uses bottom left for 0,0! Probably because the first EGA/VGA accelerators worked this way to save one instruction in the most common use case and things never change....
It's not a d3 thing, it is an SVG thing. It's pretty much the standard for 2d computer graphics. Also same in CSS.
Re: Why is D3 so Verbose?
#54More granular control, more verbosity. I am still proud of the D3 gadget I made about 8 years back as a green web dev. Couldn't have made it any other way, not sure if I could with any other library today . Wouldn't want to do it again, though, unless I was a dedicated front-end guy.
What was the gadget? I'm also more of a back-end guy that occasionally does front-end. I have a strong design taste, but it takes a lot of effort to improve my skills be able to act on it. I feel like D3 appeals to people with a strong sense of taste.
Re: Why is D3 so Verbose?
#55First of all, shocked people still use d3. Hasn't there been something better? It's pretty ancient by javascript standards. Do people still use jquery too? Haha... been about a decade since I touched this stuff!
Second of all, isn't it ungodly slow? I get that it can draw a few boxes nicely, and maybe shuffle them around, but I had to write my own engine using html canvas because d3 couldn't get svg to flow properly if I had thousands of pixels in my image.
Honestly, if you're going to go through the trouble of understanding d3, I would just write your own javascript canvas to animate things.
Re: Why is D3 so Verbose?
#56recently i've been having a lot of success with working with d3 + solid.js. I use d3 as the data processing layer, and solid for actually rendering svgs from the data. the combination is lovely, you get all the power of d3, while the parts that usually end up verbose are written succinctly in jsx. and it's a lot less pain than doing it in react, because the mental models of solid/d3 feel much more aligned
can you elaborate a bit? how do you use d3 but not have it render svgs?
D3 renders using the logic you provide, and while it gives you a lot of helpers to make it easy to write SVG or HTML canvas tags, it's just as easy to tie it into other JS frameworks as well.
Re: Why is D3 so Verbose?
#57D3 is painful, we don't have to appeal to authority to admit that. Mike Bostock is an interesting person, and a case study in why we don't design languages from a single person's genius.
Yes, we do. Do you want design by committee?! If you don't like it, don't use it. I don't!
Re: Why is D3 so Verbose?
#58recently i've been having a lot of success with working with d3 + solid.js. I use d3 as the data processing layer, and solid for actually rendering svgs from the data. the combination is lovely, you get all the power of d3, while the parts that usually end up verbose are written succinctly in jsx. and it's a lot less pain than doing it in react, because the mental models of solid/d3 feel much more aligned
can you elaborate a bit? how do you use d3 but not have it render svgs?
D3 provides a bunch of utilities for building visualizations beyond DOM manipulation. Here are some of the modules I use regularly:
- d3-array: data processing
- d3-scale: mapping from data attributes to visualization encodings
- d3-scale-chromatic: color schemes
- d3-shape: defining the shapes of paths, such for a line chart
- d3-color: manipulating colors
- d3-time: manipulating dates
- d3-format: formatting numbers
- d3-time-format: formatting dates
These modules are useful even if you don't use D3 to manage the DOM. For example, you can use these utilities to help calculate all of the attributes for your SVG elements, but then use Svelte/React/Solid/Vue to create and render the SVG.
If I'm building a visualization inside of a web app, I tend to prefer this approach since it leaves the framework in control of the DOM throughout the whole app. It feels simpler, especially if I want interactions in the visualization to modify the app's state.
Re: Why is D3 so Verbose?
#59Earlier quoted context omitted.
Uh, there are arrow operators in JS. D3.JS in Action Third Edition exclusively uses arrow operators. (Trust me. I don't know jack about JavaScript, I had to get through the MDN docs to understand what they were, and once I did, made a whole lot more sense).
The feature the person you're replying to is talking about is not arrow functions (`=>`), but what are called "threading macros" in other languages. In Clojure[1], the main one is named `->` and used as a way to thread a value through a series of functions that take it as a first argument, using the return value from the first function as the first argument to the second, and so on. It allows you to compose a series…
I stand corrected. Thanks for pointing that out. Learned something new.
Re: Why is D3 so Verbose?
#60I could not get over the fact that 0,0 in d3 is the top left corner instead of the bottom left. Why?? Everything in real life uses bottom left for 0,0! Probably because the first EGA/VGA accelerators worked this way to save one instruction in the most common use case and things never change....
It predates EGA. Most/all 8bit BASIC systems were top left, and they got it from somewhere earlier. Spreadsheets are top left, as are lots of other apps graphical or otherwise. The web (CSS, SVG etc). OpenGL etc etc.
CRTs scanned downwards, most people read downwards.
I would say that nearly everything in the real world (outside math) especially computer related uses top left as an origin.