Welcome! – What is Data Visualization? – Step 1 - The Basics

View Github Repository Open presentation in a new window

gdiboulder

See all presentation from gdiboulder

Welcome! – What is Data Visualization? – Step 1 - The Basics

1 1

d3-slides

Slides for the d3 workshop

On Github gdiboulder / d3-slides

Welcome!

Wifi Info

Network: Simple Energy Guest

Password: domorefaster

Welcome!

Girl Develop It is here to provide affordable and accessible programs to learn software through mentorship and hands-on instruction.

Some "rules"

  • We are here for you!
  • Every question is important
  • Help each other
  • Have fun

Thanks to our sponsor

Go Code Colorado Kick-Off

Wednesday March 19th

Code and Cocktails

Wednesday March 26th

Intro to HTML/CSS

March 29th & 30th

Data Visualization With D3

Our Instructor!

Michael Kelly, designer and web-monkey specializing in data visualization and interaction

What is Data Visualization?

By William Playfair (1759-1823), via Wikimedia Commons
By Charles Minard (1781-1870) [Public domain], via Wikimedia Commons
By John Snow (1813–1858), from Wikimedia Commons
By Florence Nightingale (1820–1910), via Wikimedia Commons
By Andrew Abela from a post on Extreme Presentation

What is D3?

  • JavaScript Library
  • Makes hard stuff easy(er)
  • Uses SVG / HTML / CSS
  • Not a charting engine

What can you do with D3

Let"s get started!

First, we need a local web server.

Mac terminal: sudo python -m SimpleHTTPServer 80

PC: Ask Kate

index.html

Final product sneak peek!

Step 1 - The Basics

Let's starting in the console.

Step1.html

var body = d3.select("body");
var p = body.append("html:p");
p.text("Don't be shy...");

Chaining

d3.select("body")
	.append("html:p")
	.text("...develop it!")
	.style("color", "pink")
;

To your text editors!

Step1.js

What on earth is "dv"?

var dv = {
  axis: {},
  data: {
    sub: [],
    max: {}
  },
  draw: {},
  format: {},
  get: {},
  html: {},
  opt: {
    height: 500,
    width: 700,
    pad: 30,
    radius: {
      min: 5,
      max: 50
    },
    fill: ['#0033CC', '#00CC33'],
    countries: ['Afghanistan','Argentina','Bangladesh','Canada','China','Egypt','Ethiopia','Greece','India','Iran','Nigeria','Russia','Saudi Arabia','Singapore','South Africa','United Kingdom','United States','Vietnam'],
    year: {
      start: 1950,
      end: 2012
    },
    speed: 750
  },
  setup: {},
  scale: {},
  state: {
    year: 1950
  },
  svg: {},
  update: {}
};

Let's get coding!

/* Step 1 Basic SVG
  // We need an SVG element in the DOM so we can append other SVG shapes and have them render properly (circles, lines, etc.)
  // Use the append function to add an SVG element to the main body
  // Use dv.opt.w and dv.opt.h for the height and width of the element

// This is the main svg object
dv.draw.main = function() {
  dv.svg.main = d3.select('CSS SELECTOR').append('svg:svg')
    .attr('ATTRIBUTE NAME', 'VALUE')
    .attr('ATTRIBUTE NAME', 'VALUE')
  ;
};

2. Getting Data

d3.csv('folder/data.csv', function(error, data) {
  console.log(data);
};

What just happened?

Let's talk about asynchronous functions.

3. Getting Lots of Data

Chaining calls together

4. Adding SVG with Data

d3.select('svg').append('svg:circle')
  .selectAll('circle')
  .data(data)
  .enter().append('svg:circle')
  	.attr('cx', function(d, i { return d * i; })
  	.attr('cy', 10)
  	.attr('r', 10)
 ;

5. Scaling the Data

var xScale = d3.scale.linear()
  .domain([0, 50000])
  .range([0, 100])
;

xScale(25000); // Returns 50

6. Updating

dv.svg.bubbles
  .transition().duration(500)
    .attr('cx', function(d) { return d; })
    .attr('cy', function(d, i) { return i; })
;

7. Hovers!

No new d3 functions here.

Except formatters, and they're dumb.

That's it!

You developed it!

D3 ♥ Girl Develop It Boulder