Pro Yearly is on sale from $80 to $50! »

The joy of d3.js

1eecfce54b4f902784d046328935efd4?s=47 Makoto Inoue
January 30, 2013
3.4k

The joy of d3.js

1eecfce54b4f902784d046328935efd4?s=128

Makoto Inoue

January 30, 2013
Tweet

Transcript

  1. THE JOY OF D3.JS @makoto_inoue London d3.js Meetup Jan 2013

    Wednesday, 30 January 13
  2. THE JOY OF STATS http://blog.new-bamboo.co.uk/2013/01/07/the-joy-of-d3-js Wednesday, 30 January 13

  3. THE GAP MINDER http://youtu.be/jbkSRLYSojo Wednesday, 30 January 13

  4. BY @MBOSTOCK http://bost.ocks.org/mike/nations/ Wednesday, 30 January 13

  5. BY @MAKOTO_INOUE http://makoto.github.com/the_joy_of_d3js/ Wednesday, 30 January 13

  6. GOAL “Understand enough basic so that you can tweak examples

    by yourself” Wednesday, 30 January 13
  7. ON BENKYO PLAYER http://benkyoplayer.com/courses/3 Wednesday, 30 January 13

  8. TOPICS 1.Introduction 2.Drawing Circles 3.Debugging 4.Basic Transition 5.Scaling 6.Array, Group

    And Event 7.Loading Multiple Data files 8.Geo https://github.com/makoto/the_joy_of_d3js/wiki Wednesday, 30 January 13
  9. DRAWING CIRCLES http://makoto.github.com/the_joy_of_d3js/circles.html Wednesday, 30 January 13

  10. DRAWING CIRCLES var width = 500,height = 400, data =

    [ {id:1,x:163,y:10}, {id:2,x:326,y:140}, {id:3,x:490,y:270} ] var svg = d3.select("body").append("svg") .attr({ class:"svg", width:width, height:height }) var circle = svg.selectAll("circle") .data(data); circle.enter().append("circle") .attr("cx", function(d){return d.x}) .attr("cy", function(d){return d.y}) .attr("r", 5) Wednesday, 30 January 13
  11. DRAWING CIRCLES var width = 500,height = 400, data =

    [ {id:1,x:163,y:10}, {id:2,x:326,y:140}, {id:3,x:490,y:270} ] var svg = d3.select("body").append("svg") .attr({ class:"svg", width:width, height:height }) var circle = svg.selectAll("circle") .data(data); circle.enter().append("circle") .attr("cx", function(d){return d.x}) .attr("cy", function(d){return d.y}) .attr("r", 5) Wednesday, 30 January 13
  12. DRAWING CIRCLES var width = 500,height = 400, data =

    [ {id:1,x:163,y:10}, {id:2,x:326,y:140}, {id:3,x:490,y:270} ] var svg = d3.select("body").append("svg") .attr({ class:"svg", width:width, height:height }) var circle = svg.selectAll("circle") .data(data); circle.enter().append("circle") .attr("cx", function(d){return d.x}) .attr("cy", function(d){return d.y}) .attr("r", 5) Wednesday, 30 January 13
  13. DRAWING CIRCLES var width = 500,height = 400, data =

    [ {id:1,x:163,y:10}, {id:2,x:326,y:140}, {id:3,x:490,y:270} ] var svg = d3.select("body").append("svg") .attr({ class:"svg", width:width, height:height }) var circle = svg.selectAll("circle") .data(data); circle.enter().append("circle") .attr("cx", function(d){return d.x}) .attr("cy", function(d){return d.y}) .attr("r", 5) Wednesday, 30 January 13
  14. DRAWING CIRCLES var width = 500,height = 400, data =

    [ {id:1,x:163,y:10}, {id:2,x:326,y:140}, {id:3,x:490,y:270} ] var svg = d3.select("body").append("svg") .attr({ class:"svg", width:width, height:height }) var circle = svg.selectAll("circle") .data(data); circle.enter().append("circle") .attr("cx", function(d){return d.x}) .attr("cy", function(d){return d.y}) .attr("r", 5) Wednesday, 30 January 13
  15. DRAWING CIRCLES http://bost.ocks.org/mike/join/ Wednesday, 30 January 13

  16. DRAWING CIRCLES var width = 500,height = 400, data =

    [ {id:1,x:163,y:10}, {id:2,x:326,y:140}, {id:3,x:490,y:270} ] var svg = d3.select("body").append("svg") .attr({ class:"svg", width:width, height:height }) var circle = svg.selectAll("circle") .data(data); circle.enter().append("circle") .attr("cx", function(d){return d.x}) .attr("cy", function(d){return d.y}) .attr("r", 5) Wednesday, 30 January 13
  17. BASIC TRANSITION http://makoto.github.com/the_joy_of_d3js/transitions.html Wednesday, 30 January 13

  18. BASIC TRANSITION var width = 500, height = 400, data1

    = [ {id:1,x:163,y:10}, {id:2,x:326,y:140}, ], data2 = [ {id:2,x:400,y:340}, {id:3,x:290,y:280} ]; var svg = d3.select("body").append("svg") .attr({ class:"svg", width:width, height:height }) Wednesday, 30 January 13
  19. BASIC TRANSITION var chart = function(data){ var circle = svg.selectAll("circle")

    .data(data, function(d){ return d.id }) circle.enter().append("circle") .attr("cx", function(d){return d.x}) .attr("cy", function(d){return d.y}) .attr("r", 0) circle.transition().duration(2000) .attr("cx", function(d){return d.x}) .attr("cy", function(d){return d.y}) .attr("r", 5) circle.exit() .remove() } chart(data1) Wednesday, 30 January 13
  20. BASIC TRANSITION var chart = function(data){ var circle = svg.selectAll("circle")

    .data(data, function(d){ return d.id }) circle.enter().append("circle") .attr("cx", function(d){return d.x}) .attr("cy", function(d){return d.y}) .attr("r", 0) circle.transition().duration(2000) .attr("cx", function(d){return d.x}) .attr("cy", function(d){return d.y}) .attr("r", 5) circle.exit() .remove() } chart(data1) Wednesday, 30 January 13
  21. BASIC TRANSITION var chart = function(data){ var circle = svg.selectAll("circle")

    .data(data, function(d){ return d.id }) circle.enter().append("circle") .attr("cx", function(d){return d.x}) .attr("cy", function(d){return d.y}) .attr("r", 0) circle.transition().duration(2000) .attr("cx", function(d){return d.x}) .attr("cy", function(d){return d.y}) .attr("r", 5) circle.exit() .remove() } chart(data1) Wednesday, 30 January 13
  22. BASIC TRANSITION var chart = function(data){ var circle = svg.selectAll("circle")

    .data(data, function(d){ return d.id }) circle.enter().append("circle") .attr("cx", function(d){return d.x}) .attr("cy", function(d){return d.y}) .attr("r", 0) circle.transition().duration(2000) .attr("cx", function(d){return d.x}) .attr("cy", function(d){return d.y}) .attr("r", 5) circle.exit() .remove() } chart(data1) Wednesday, 30 January 13
  23. BASIC TRANSITION var chart = function(data){ var circle = svg.selectAll("circle")

    .data(data, function(d){ return d.id }) circle.enter().append("circle") .attr("cx", function(d){return d.x}) .attr("cy", function(d){return d.y}) .attr("r", 0) circle.transition().duration(2000) .attr("cx", function(d){return d.x}) .attr("cy", function(d){return d.y}) .attr("r", 5) circle.exit() .remove() } chart(data1) Wednesday, 30 January 13
  24. BASIC TRANSITION var chart = function(data){ var circle = svg.selectAll("circle")

    .data(data, function(d){ return d.id }) circle.enter().append("circle") .attr("cx", function(d){return d.x}) .attr("cy", function(d){return d.y}) .attr("r", 0) circle.transition().duration(2000) .attr("cx", function(d){return d.x}) .attr("cy", function(d){return d.y}) .attr("r", 5) circle.exit() .remove() } chart(data1) Wednesday, 30 January 13
  25. BASIC TRANSITION var chart = function(data){ var circle = svg.selectAll("circle")

    .data(data, function(d){ return d.id }) circle.enter().append("circle") .attr("cx", function(d){return d.x}) .attr("cy", function(d){return d.y}) .attr("r", 0) circle.transition().duration(2000) .attr("cx", function(d){return d.x}) .attr("cy", function(d){return d.y}) .attr("r", 5) circle.exit() .remove() } chart(data1) Wednesday, 30 January 13
  26. SCALING http://makoto.github.com/the_joy_of_d3js/scaling.html Wednesday, 30 January 13

  27. SCALING year1 = [ { id:1, region:'africa', population: 10000,lifeExpectancy:163,income:10}, {

    id:2, region:'asia', population: 20000,lifeExpectancy:326,income:140 }, ] year2 = [......] Wednesday, 30 January 13
  28. SCALING var x = d3.scale.linear() .domain([0, 400]) .range([0, width -

    100]); var y = d3.scale.linear() .domain([0,200]) .range([0, width - 100]) circle.enter().append("circle") .attr("cx", function(d){ return x(d.lifeExpectancy) }) .attr("cy", function(d){ return y(d.income) }) Wednesday, 30 January 13
  29. SCALING var x = d3.scale.linear() .domain([0, 400]) .range([0, width -

    100]); var y = d3.scale.linear() .domain([0,200]) .range([0, width - 100]) circle.enter().append("circle") .attr("cx", function(d){ return x(d.lifeExpectancy) }) .attr("cy", function(d){ return y(d.income) }) Wednesday, 30 January 13
  30. SCALING http://www.jeromecukier.net/blog/2011/08/11/d3-scales-and-color/ Wednesday, 30 January 13

  31. SCALING var x = d3.scale.linear() .domain([0, 400]) .range([0, width -

    100]); var y = d3.scale.linear() .domain([0,200]) .range([0, width - 100]) circle.enter().append("circle") .attr("cx", function(d){ return x(d.lifeExpectancy) }) .attr("cy", function(d){ return y(d.income) }) Wednesday, 30 January 13
  32. SCALING var yAxis = d3.svg.axis() .scale(y) .orient("left") .tickSize(1) svg.append("g") .attr("class",

    "y axis"); d3.select(".y.axis") .call(yAxis); svg.append("text") .attr("class", "y label") .attr("text-anchor", "end") .attr("y", -45) .attr("x", -120) .attr("dy", ".75em") .attr("transform", "rotate(-90)") .text("life expectancy (years)"); Wednesday, 30 January 13
  33. SCALING var yAxis = d3.svg.axis() .scale(y) .orient("left") .tickSize(1) svg.append("g") .attr("class",

    "y axis"); d3.select(".y.axis") .call(yAxis); svg.append("text") .attr("class", "y label") .attr("text-anchor", "end") .attr("y", -45) .attr("x", -120) .attr("dy", ".75em") .attr("transform", "rotate(-90)") .text("life expectancy (years)"); Wednesday, 30 January 13
  34. ARRAY, GROUP, EVENT http://makoto.github.com/the_joy_of_d3js/events.html Wednesday, 30 January 13

  35. ARRAY, GROUP, EVENT var group = svg.selectAll(".group") .data(data, function(d){return d.country});

    var groupEnter = group.enter().append('g') .attr('class', 'group') var groupUpdate = group.transition().duration(2000) var groupExit = d3.transition(group.exit()) .remove() groupEnter.append("circle") .attr("cx", function(d){return x(d.income)}) .attr("cy", function(d){return y(d.lifeExpectancy)}) .attr("r", 2) .style("fill", function(d){return color(d.country)}) .on('mouseover', function(d){ d3.select(this.parentElement).select('text') .style('opacity', 1) }) Wednesday, 30 January 13
  36. ARRAY, GROUP, EVENT Wednesday, 30 January 13

  37. ARRAY, GROUP, EVENT var group = svg.selectAll(".group") .data(data, function(d){return d.country});

    var groupEnter = group.enter().append('g') .attr('class', 'group') var groupUpdate = group.transition().duration(2000) var groupExit = d3.transition(group.exit()) .remove() groupEnter.append("circle") .attr("cx", function(d){return x(d.income)}) .attr("cy", function(d){return y(d.lifeExpectancy)}) .attr("r", 2) .style("fill", function(d){return color(d.country)}) .on('mouseover', function(d){ d3.select(this.parentElement).select('text') .style('opacity', 1) }) Wednesday, 30 January 13
  38. ARRAY, GROUP, EVENT var group = svg.selectAll(".group") .data(data, function(d){return d.country});

    var groupEnter = group.enter().append('g') .attr('class', 'group') var groupUpdate = group.transition().duration(2000) var groupExit = d3.transition(group.exit()) .remove() groupEnter.append("circle") .attr("cx", function(d){return x(d.income)}) .attr("cy", function(d){return y(d.lifeExpectancy)}) .attr("r", 2) .style("fill", function(d){return color(d.country)}) .on('mouseover', function(d){ d3.select(this.parentElement).select('text') .style('opacity', 1) }) Wednesday, 30 January 13
  39. GEO Wednesday, 30 January 13

  40. GEO @olivernn will explain Wednesday, 30 January 13

  41. THANKS @makoto_inoue Wednesday, 30 January 13