Tweet
Tweet

Slide 1

Slide 1 text

THE JOY OF D3.JS @makoto_inoue London d3.js Meetup Jan 2013 Wednesday, 30 January 13

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

GOAL “Understand enough basic so that you can tweak examples by yourself” Wednesday, 30 January 13

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

DRAWING CIRCLES http://makoto.github.com/the_joy_of_d3js/circles.html Wednesday, 30 January 13

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

DRAWING CIRCLES http://bost.ocks.org/mike/join/ Wednesday, 30 January 13

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

BASIC TRANSITION http://makoto.github.com/the_joy_of_d3js/transitions.html Wednesday, 30 January 13

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

SCALING http://makoto.github.com/the_joy_of_d3js/scaling.html Wednesday, 30 January 13

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

SCALING http://www.jeromecukier.net/blog/2011/08/11/d3-scales-and-color/ Wednesday, 30 January 13

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

ARRAY, GROUP, EVENT http://makoto.github.com/the_joy_of_d3js/events.html Wednesday, 30 January 13

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

ARRAY, GROUP, EVENT Wednesday, 30 January 13

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

GEO Wednesday, 30 January 13

Slide 40

Slide 40 text

GEO @olivernn will explain Wednesday, 30 January 13

Slide 41

Slide 41 text

THANKS @makoto_inoue Wednesday, 30 January 13