The joy of d3.js

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