Introduction D3 tutorial Part I

Size: px

Start display at page:

Download "Introduction D3 tutorial Part I"

Cuthbert McKinney
5 years ago
Views:

1 Information Visualization Daniel Gonçalves, Sandra Gama Introduction D3 tutorial Part I 01

2 01 VI LABS

3 Sandra Gama ra.gama/

4 Planning Lab 3: October 5 Proposal & Dataset Theme choice Lab 5: October 19 Data Gathered data Lab 7: November 2 Vis Proposal:2-Nov Paper sketch Lab 10: November 23 First version: 23-Nov Functional Vis Lab 13: December 14 Final Version: 14-Dec Final Vis

5 Evaluation Proposal & Dataset (5%) Data (10%) 70% Labs (min grade >=9.5) Vis Proposal (15%) First version (10%) Final Version (30%)

6 Attendance Mandatory in evaluation labs Checkpoints determine your grade But Up to 2 grade points reserved for improvements (show following lab)

7 QUESTIONS?

8 02 D3 TUTORIAL PART 1

9 Labs Technology D3Data Driven Documents In-lab tutorials: This lab and next week s

10 d3 -

11 Web Tech! SVG

12 A document where to place the vis <html> <head> <title>oscar Winners</title> <link rel="stylesheet" href="oscars.css"> <script src="d3.v3.min.js" charset="utf-8"></script> <script src="oscars.js"></script> </head> <body> <h1>oscar Best Picture Winners as rated in IMDB!</h1> <div id="the_chart"></div> <div id="second_chart"></div> </body> </html>

13 A document where to place the vis <html> <head> <title>oscar Winners</title> <link rel="stylesheet" href="oscars.css"> <script src="d3.v3.min.js" charset="utf-8"></script> <script src="oscars.js"></script> </head> <body> <h1>oscar Best Picture Winners as rated in IMDB!</h1> <div id="the_chart"></div> <div id="second_chart"></div> </body> </html>

14 A document where to place the vis <html> <head> <title>oscar Winners</title> <link rel="stylesheet" href="oscars.css"> <script src="d3.v3.min.js" charset="utf-8"></script> <script src="oscars.js"></script> </head> <body> <h1>oscar Best Picture Winners as rated in IMDB!</h1> <div id="the_chart"></div> <div id="second_chart"></div> </body> </html>

15 A document where to place the vis <html> <head> <title>oscar Winners</title> <link rel="stylesheet" href="oscars.css"> <script src="d3.v3.min.js" charset="utf-8"></script> <script src="oscars.js"></script> </head> <body> <h1>oscar Best Picture Winners as rated in IMDB!</h1> <div id="the_chart"></div> <div id="second_chart"></div> </body> </html>

16 A document where to place the vis <html> <head> <title>oscar Winners</title> <link rel="stylesheet" href="oscars.css"> <script src="d3.v3.min.js" charset="utf-8"></script> <script src="oscars.js"></script> </head> <body> <h1>oscar Best Picture Winners as rated in IMDB!</h1> <div id="the_chart"></div> <div id="second_chart"></div> </body> </html>

17 Some data [ { "oscar_year":2014, "title":"12 Years a Slave", "year":2013, "rating":"8,2", "budget": , "budget_adj": }, { "oscar_year":2013, "title":"argo", "year":2012, "rating":"7,8", "budget": , "budget_adj": },

18 Loading the data var dataset; d3.json("oscar_winners_recent.json", function (data) { dataset = data; })

19 Loading the data var dataset; d3.json("oscar_winners_recent.json", function (data) { dataset = data; })

20 Loading the data var dataset; d3.json("oscar_winners_recent.json", function (data) { dataset = data; })

21 Security! Start a local server! > python -m SimpleHTTPServer 8888

22 It works!

23 Let s make something var dataset; d3.json("oscar_winners_recent.json", function (data) { dataset = data; }) gen_vis(); function gen_vis() { }

24 Selectors! #foo // <any id="foo"> foo // <foo>.foo // <any class="foo"> [foo=bar] // <any foo="bar"> foo bar // <foo><bar></foo> foo.bar // <foo class="bar"> foo#bar // <foo id="bar"> A W3C standard. Find them in CSS, JQuery,, D3!

25 d3 Selections d3.select(<selector>) d3.selectall(<selector>)

26 d3 Selections d3.select(<selector>) d3.selectall(<selector>)

27 Let s add somewhere to draw function gen_vis() { var w = 800; var h = 400; var svg = d3.select("#the_chart"); } svg = svg.append("svg"); svg = svg.attr("width",w); svg = svg.attr("height",h);

28 Let s add somewhere to draw function gen_vis() { var w = 800; var h = 400; var svg = d3.select("#the_chart"); } svg = svg.append("svg"); svg = svg.attr("width",w); svg = svg.attr("height",h);

29 Let s add somewhere to draw function gen_vis() { var w = 800; var h = 400; var svg = d3.select("#the_chart"); } svg = svg.append("svg"); svg = svg.attr("width",w); svg = svg.attr("height",h);

30 Let s add somewhere to draw function gen_vis() { var w = 800; var h = 400; var svg = d3.select("#the_chart"); } svg = svg.append("svg"); svg = svg.attr("width",w); svg = svg.attr("height",h);

31 Let s add somewhere to draw function gen_vis() { var w = 800; var h = 400; var svg = d3.select("#the_chart"); } svg = svg.append("svg"); svg = svg.attr("width",w); svg = svg.attr("height",h); <svg width= 800 height= 400 ></svg>

32 Chaining! function gen_vis() { var w = 800; var h = 400; } var svg = d3.select("#the_chart").append("svg").attr("width",w).attr("height",h);

33 An SVG!

34 Let s draw a rectangle svg.append("rect").attr("width",20).attr("height",150).attr("fill","purple");

35 Hmm out of place?

36 SVG Coordinate system

37 Small change svg.append("rect").attr("width",20).attr("height",150).attr("fill","purple").attr("y",h-150);

38 Small change

39 Draw Many From DATA! data()

40 Let s bind data to graphical elements! svg.selectall("rect").data(dataset).enter().append("rect").attr("width",20).attr("height",150).attr("fill","purple").attr("y",h-150);

41 Whoa select what??! svg.selectall("rect").data(dataset).enter().append("rect").attr("width",20).attr("height",150).attr("fill","purple").attr("y",h-150);

42 Nothing to begin with dataset = [1, 2, 3, 4]; svg.selectall("rect") = []

43 When we bind the data dataset = [1, 2, 3, 4]; svg.selectall("rect").data(dataset) d3 knows there should be new elements in the selection

44 New elements: enter() dataset = [1, 2, 3, 4]; svg.selectall("rect").data(dataset).enter() What comes after is called for each new element

45 For each datapoint, append a rect! svg.selectall("rect").data(dataset).enter().append("rect").attr("width",20).attr("height",150).attr("fill","purple").attr("y",h-150);

46 Let s make them different svg.selectall("rect").data(dataset).enter().append("rect").attr("width",20).attr("height",function(d) { return d.rating*30; }).attr("fill","purple").attr("x",function(d, i) { return i*21; }).attr("y",function(d) { return h-(d.rating*30); });

47 Let s make them different svg.selectall("rect").data(dataset).enter().append("rect").attr("width",20).attr("height",function(d) { return d.rating*30; }).attr("fill","purple").attr("x",function(d, i) { return i*21; }).attr("y",function(d) { return h-(d.rating*30); });

48 Let s make them different svg.selectall("rect").data(dataset).enter().append("rect").attr("width",20).attr("height",function(d) { return d.rating*30; }).attr("fill","purple").attr("x",function(d, i) { return i*21; }).attr("y",function(d) { return h-(d.rating*30); }); The datum Index in the data array

49 Our vis so far

50 Scales! var hscale = d3.scale.linear().domain([0,10]).range([0,h]); hscale(5) = 200

51 It scales! var hscale = d3.scale.linear().domain([10,0]).range([h,0]); var xscale = d3.scale.linear().domain([0,dataset.length]).range([0,w]); svg.selectall("rect").data(dataset).enter().append("rect").attr("width",math.floor(w/dataset.length)-1).attr("height",function(d) { return hscale(d.rating); }).attr("fill","purple").attr("x",function(d, i) { return xscale(i); }).attr("y",function(d) { return h-hscale(d.rating); });

52 Our data

MORE data http://localhost:8888/oscar6a.html d3.

53 MORE data d3.json("oscar_winners_recent.json d3.json("oscar_winners.json )

54 Axes var yaxis = d3.svg.axis().scale(hscale).orient("left");

55 Axis They actually draw something! var yaxis = d3.svg.axis().scale(hscale).orient("left"); svg.append("g").attr("transform","translate(30,0)").call(yaxis);

56 Axis In the right place! var yaxis = d3.svg.axis().scale(hscale).orient("left"); svg.append("g").attr("transform","translate(30,0)").call(yaxis);

57 Hmmm

58 Add some padding! var padding=30; var hscale = d3.scale.linear().domain([0,10]).range([padding,h-padding]); var xscale = d3.scale.linear().domain([0,dataset.length]).range([padding,w-padding]); svg.selectall("rect").attr("width",math.floor((w-padding*2)/dataset.length)-1).attr("y",function(d) { return h-padding-hscale(d.rating); });

59 Add some padding! var padding=30; var hscale = d3.scale.linear().domain([0,10]).range([padding,h-padding]); var xscale = d3.scale.linear().domain([0,dataset.length]).range([padding,w-padding]); svg.selectall("rect").attr("width",math.floor((w-padding*2)/dataset.length)-1).attr("y",function(d) { return h-padding-hscale(d.rating); });

60 Better!

61 Some CSS svg.append("g").attr("transform","translate(30,0)").attr("class", y axis").call(yaxis);

Some More Info http://localhost:8888/oscar8.html var xaxis = d3.svg.axis().scale(d3.scale.linear().domain([dataset[0].

62 Some More Info var xaxis = d3.svg.axis().scale(d3.scale.linear().domain([dataset[0].oscar_year,dataset[dataset.length-1].oscar_year]).range([padding+bar_w/2,w-padding-bar_w/2])).tickformat(d3.format("f")).ticks(dataset.length/2).orient("bottom");

63 Some more Info { return d.title;});

64 Hmmm

65 Invert the scale! var hscale = d3.scale.linear().domain([10,0]).range([padding,h-padding]); svg.selectall("rect").attr( height",function(d) { return h-padding-hscale(d.rating); }).attr("y",function(d) { return hscale(d.rating); });

66 Better!

67 QUESTIONS?

68 03 NEXT LAB

69 D3 Tutorial Part II

70 D3 Tutorial Part II Interactivity Events

Default Parameters and Shapes. Lecture 18

Default Parameters and Shapes. Lecture 18 Default Parameters and Shapes Lecture 18 Announcements PS04 - Deadline extended to October 31st at 6pm MT1 Date is now Tuesday 11/14 Warm-up Question #0: If there are 15 people and you need to form teams