vis-1

View Github Repository Open presentation in a new window

Boulder-Denver-d3-vis

See all presentation from Boulder-Denver-d3-vis

vis-1

4 1

vis-1

slides for denver/boulder d3/vis meetup

On Github Boulder-Denver-d3-vis / vis-1

Boulder/Denver D3 and Data Visualization

October 24th, 2013

Welcome!

Who I am:

Erik Cunningham

@trinary

http://github.com/trinary

The Meetup

A place for hands on learning about visualization.

I'm focused on D3, but there are lots of other tools out there.

You probably saw the note I sent out about getting GitHub going on your computer. I want this to be a place that we get into the details Whenever possible, presentations should have a way for the group to be hands-on.

Topics

  • Choosing a visualization
  • Processing data
  • Design
  • Implementation

Drawing Data

William Playfair, 1758

We've been doing this for a long time, and in its current form for 250ish years

Visual Processing

The largest known systems in the human brain process visual information.

We see trends, patterns, and outliers in images far faster than in raw data.

It also brings overfitting, bias, and other distortions.

Why

Because done poorly, data visualization at best obscures the truth, and at worst lies about it.

Pinwheel of Obscurity

Map of WTF

Someone spent hours on this!

Cause and Effect?

Of course, we should ask which is the independent variable?

Intuitive Communication

Count the dimensions shown here:

Charles Minard, 1868

Considered by many to be the best visualization ever made.

Dimensions

  • Position
  • Direction
  • Army Size
  • Temperature
  • Time

Hundreds of pieces of data in five dimensions, distilled into a single, understandable image.

"The great growth of statistical research in our times has made felt the need to record the results in forms less dry, more useful, and able to be explored more rapidly than numbers alone."

Minard

Less Dry

More Useful

Able to be explored rapidly

BART Strike

The Bay Area D3 group decided to do some analysis.

The Progress So Far

Community D3 group who wanted to get some analysis and answers on the strike issue

D3

Data Driven Documents

Created by Mike Bostock

Builds off of work in Protovis at the Stanford Vis Group

Maps data to DOM (HTML, SVG)

Limited support for Canvas rendering targets (geo projections)

Initial release in 2011. JQuery was released in 2006. Backbone 0.1.0 2010.

D3 is Big

389 API functions in 47 objects.

Mike Bostock's examples page has 681 curated examples.

There are lots of tricks and non-obvious patterns, a common complaint is that the learning curve is far too steep.

D3 Is Not A Chart Library

No presets, no wizards.

It is a tool that allows you to create the visualization you want, rather than pick one from a menu.

Drawbacks

  • Learning curve
  • Performance with many objects
  • Sometimes SVG/HTML/CSS workarounds are required

  • Limited support for IE, especially versions before 10

    Workarounds: compound lines, draw ordering

Fundamental D3 Concepts

  • Data Binding
  • Enter, Exit, and Update sections
  • Callbacks to set attributes and styles
Data binding - associating an array of data with an array of elements Enter, exit: "what to do when the data and the document are out of sync" Update: "What to do when data and document are in sync" Function generators: builds a function for you from a configuration Callbacks: how data-dependent attributes are set.

Data Binding

Given an array of data: 

[0,1,2]

Bind it to an existing set of elements: 

<div></div>
<div></div>
<div></div>

Like this:

d3.selectAll("div").data([0,1,2])

Enter

Given a data binding

d3.select("body").selectAll("div").data([0,1,2])

Tell D3 what to do when there is no corresponding document element for a data element:

<body></body>

d3.select("body").selectAll("div").data([0,1,2]).enter().append("div");

"Inside the body tag, bind each element of [0,1,2] to a div, creating it inside body if it doesn't exist."

Exit

Given an existing data binding, with elements created via enter()

s = d3.select("body").selectAll("div").data([0,1,2]);
s.enter().append("div");

Tell D3 what to do when there's no data to be bound to an element:

s.exit().remove();

"If there's no data for an existing element, remove() it."

Callbacks

When setting attributes or styles on bound elements, you can supply a callback.

myData = [{ size: 10}, {size: 2}];
...
mySelection.attr("r", function(d,i) { return d.size; });

The bound data and its index in the data array get passed in.

The return value is gets set as the attribute value.

Let's look at an example:

Tributary is a live-coding environment for D3.

http://tributary.io/inlet/7049427

The x positions of the circles are determined by the value of each element in data

Okay, but that's pretty boring

Yeah, you're right. Let's take a look at something more relevant.

A bar chart!

http://tributary.io/inlet/7109378

Not quite right

SVG uses a (0,0) point at the upper left corner.

  • X increases to the right
  • Y increases to the bottom

For our bar chart to look right, we need to specify the y and height values with this in mind.

Let's take a look: http://tributary.io/inlet/7112787

Building Blocks

These techniques are used with d3 primitives like:

  • scales and axes
  • line and shape generators
  • behaviors and layouts
  • event handlers and callbacks

They result in the beautiful, interactive vector displays you see in examples. The way the API gets used is more sophisticated, but these fundamentals are how they are implemented.

The Real Thing

Here's what a bar chart looks like using more of D3's functionality.

  • Scales
  • Axes
  • Labels

http://tributary.io/inlet/7142407

An Exercise

Edit the working bar chart example:

  • Make the color of each bar reflect its value
  • Make the color of each bar reflect its position in the data array

If you already know how to do this, help the people near you.

http://tributary.io/inlet/7142407

How to Learn More