Frank ⌁ Profile picture
📊 data visualization anarchist doing accessibility @cmuhcii and 🍎 | disabled | working on a ttrpg | ⚑ anti-fascist | at mastodon: @frankelavsky@vis.social

Jun 5, 2018, 11 tweets

⬇️ Thread of thoughts on this topic ⬇️

I've taught #D3js to nearly 300 faculty, staff, and students at primarily the grad/PhD level across various workshops and bootcamps.

Some key reasons behind why D3 is hard, I'll outline below (in case anyone is learning or curious)

While you DO need to understand empathy, design, color perception, visual cognition, story-telling, geometric thinking, graphical conventions, basic statistics, data structures, linear/spatial algebra, and trigonometry to do VISUALIZATION well, D3 makes all of this *EVEN HARDER*

Why? Because the CORE of D3 is in its name: 'Data Driven Documents.' Data-driven is one thing, but the 'Documents' part refers to the DOM, which is a broad term referring to the *stuff* that makes up the web:
HTML
CSS
SVG/XML
Canvas
JavaScript
& more - all at once

People think #D3js is about visualization.

That's mistake #1.

What D3 does is it turns data-stuff into web-stuff. MOST of the time this is for #dataviz.

But the web-stuff all has different standards for data/grammar. (Just look at the 'd' attribute of an SVG path:)

This thing is a monster to parse, and this attribute is technically an XML data type of its own. The fact that it is accessed by .attr('d') via D3 is complex enough, let alone turning your csv data into JSON and then into a list of paired M/Q/L commands just to draw ONE LINE.

.@hadleywickham had the right idea applying Wilkinson's 'Grammar of Graphics' to #rstats: #ggplot2 empowers the user to produce geometries using a grammar that puts graphics *first.* Sure, it is limited to the grammar of R, but it is still one of the best examples of this

So to speak plainly (from my professional opinion):
#D3js is NOT a graphics-first grammar but rather a data-first grammar *for the DOM.* This is a very tough realization for most who are new to the library. Most expect something like d3.make.barchart(mydata).add(interactivity)

I could break down why @d3js_org is still vital to the practice of visualization, despite not being a graphics-first grammar.

@albertocairo even joked that you need a background in philosophy to grasp D3 (I do have a degree in it, as a hilarious aside)

But YOUR takeaway? Whether you are a web, data, or a viz-expert and you are trying to learn D3, know this:

#D3js is a grammar that puts data first and drives the DOM with that data. It is intrinsically a library bound to web standards. It can do amazing stuff, so don't give up!

For example, my work with @LIGO, @NUCIERA, and @NUITResearch: without #d3js this tool could never have been so widely distributed to scientists across the world (who use it in talks, papers, and courses - including the @NobelPrize laureate Barry Barish) ligo.northwestern.edu/media/mass-plo…

/endthread

Share this Scrolly Tale with your friends.

A Scrolly Tale is a new way to read Twitter threads with a more visually immersive experience.
Discover more beautiful Scrolly Tales like this.

Keep scrolling