Frank ⌁ Profile picture
Jun 5, 2018 11 tweets 8 min read Read on X
⬇️ 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

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with Frank ⌁

Frank ⌁ Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us!

:(