Lab7

Size: px

Start display at page:

Download "Lab7"

재호 목
8 years ago
Views:

1 Lab 7: Pie Chart & Line Graph 2015 Fall human-computer interaction + design lab. Joonhwan Lee

2 Pie Chart

3 d3.js d3.js bundle chord pack cluster force histogram 3

4 d3.js Layout Bundle - apply Holten's hierarchical bundling algorithm to edges. Chord - produce a chord diagram from a matrix of relationships. Cluster - cluster entities into a dendrogram. Force - position linked nodes using physical simulation. Hierarchy - derive a custom hierarchical layout implementation. Histogram - compute the distribution of data using quantized bins. 4

5 d3.js Layout Pack - produce a hierarchical layout using recursive circle-packing. Partition - recursively partition a node tree into a sunburst or icicle. Pie - compute the start and end angles for arcs in a pie or donut chart. Stack - compute the baseline for each series in a stacked bar or area chart. Tree - position a tree of nodes tidily. Treemap - use recursive spatial subdivision to display a tree of nodes. 5

6 Lab 1: Simple Pie Graph Step1: Pie var pie = d3.layout.pie() Step2: var arc = d3.svg.arc().innerradius(0).outerradius(100) 6

7 Lab 1: Simple Pie Graph Step3: Pie chart var pieelements = d3.select("#mygraph").selectall("path").data(pie(dataset)).enter() Step4: pieelements.append("path").attr("class", "pie").attr("d", arc) // arc.attr("transform", "translate(" + svgwidth/2 + ", " + svgheight/2 + ")") 7

8 Lab 2: Color Step1:, Option1: array style.style("fill", function(d, i) { return ["red", "orange", "yellow", "cyan", "#3f3"][i] }) Option2: d3 var color = d3.scale.category10()....style("fill", function(d, i) { return color(i) }) 8

9 Lab 2: Color Step2: CSS pie.pie { stroke: white ; stroke-width: 1px; } 9

10 Lab 2: Color Categorical Colors Scales#categorical-colors ColorBrewer Scales#colorbrewer 10

11 Lab 2: Color Adobe Kuler 11

12 Lab 3: Animation animation bar transition(), duration() delay(), bar width height pie chart.attrtween() 12

13 Lab 3: Animation Step 1: //.attr("d", arc) Step 2:.transition().duration(1000).delay(function(d, i) { return i * 1000 }) 13

14 Lab 3: Animation Step 3:.attrTween arc.attrtween("d", function(d, i) { var interpolate = d3.interpolate( { startangle: d.startangle, endangle: d.startangle }, { startangle: d.startangle, endangle: d.endangle } ) return function(t) { }) return arc(interpolate(t) )} 14

15 Lab 3: Animation Step 4: var pie = d3.layout.pie().sort(null) 15

16 Lab 3-1: Ease function in Animation animation arc. 5. easing-in & easing-out d3 default easing function: cubic-in-out cubic-in-out 16

17 Lab 3-1: Ease function in Animation d3.js ease easing-in & easing-out linear bounce 17

18 Lab 3-1: Ease function in Animation.ease("linear") ( ).ease("bounce"). 18

19 Lab 4: 1 Pie chart pie chart, Step 1: Pie chart var arc = d3.svg.arc().innerradius(50).outerradius(100) 19

20 Lab 4: 1 Step2: text text enter() data(). d3.sum(). var textelements = d3.select("#mygraph").append("text").attr("class", "total").attr("transform", "translate(" + svgwidth/2 + ", " + svgheight/2 + ")").text("total: " + d3.sum(dataset)) 20

21 Lab 4: 1 Step3:.total { font: 10pt "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; } text-anchor: middle; 21

22 Lab 5: 2 g, g Step1: g, path g var pieelements = d3.select("#mygraph").selectall("g").data(pie(dataset)).enter().append("g").attr("transform", "translate(" + svgwidth/2 + ", " + svgheight/2 + ")") 22

23 Lab 5: 2 Step2: arc pieelements.append("text")// text.attr("class", "pienum").attr("transform", function(d, i){ return "translate(" + arc.centroid(d) + ")" }).text(function(d, i){ return d.value; // }) 23

24 Lab 5: 2 centroid() ( ) arc.centroid() rect.centroid() 24

25 Lab 5: 2 Step3:.pieNum { font: bold 9pt "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; text-anchor: middle; } Step3-1:? pleelements....text(function(d, i){ return datalabel[i] }) 25

26 Lab 6: 2008~2014 pull-down menu Step1: d3.csv("data/mydata2008.csv", function(error, data) Step2: for(var i = 0; i < data.length; i++) { dataset.push(data[i].share) datalabel.push(data[i].carrier) } 26

27 Lab 6-1: Step1: d3 function drawpie(filename) { }. drawpie("data/mydata2008.csv"). drawpie(). 27

28 Lab 6-1: Step1 (cont.): drawpie("data/mydata2009.csv") function drawpie(filename) { d3.csv(filename, function(error, data){... 28

29 Lab 6-1: Step2: HTML <form> <select id="year"> <option value="2008">2008 </option> <option value="2009">2009 </option> <option value="2010">2010 </option> <option value="2011">2011 </option> <option value="2012">2012 </option> <option value="2013">2013 </option> <option value="2014">2014 </option> </select> </form> 29

30 Lab 6-1: Step2: HTML <form> <select id="year"> <option value="2008">2008 </option> <option value="2009">2009 </option> <option value="2010">2010 </option> <option value="2011">2011 </option> <option value="2012">2012 </option> <option value="2013">2013 </option> <option value="2014">2014 </option> </select> </form> 29

31 Lab 6-1: Step3: d3.select("#year").on("change", function() { d3.select("#mygraph").selectall("*").remove() drawpie("data/mydata" + this.value + ".csv", this.value) }) 30

32 Line Graph

33 Line Graph Pie chart layout SVG path line graph 32

34 Line Graph d3.svg.line() x() y() line = d3.svg.line().x( ).y( ) line path.append("path").attr("d", line(data)) 33

35 Line Graph Interpolation line = d3.svg.line().x( ).y( ).interpolate("linear") linear basis 34

36 Lab 7: Line Graph Step1: margin, offset var margin = { top: 20, right: 20, bottom: 30, left: 50 } var width = margin.left - margin.right var height = margin.top - margin.bottom var svg = d3.select("body").append("svg").attr("width", width + margin.left + margin.right).attr("height", height + margin.top + margin.bottom).append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")") 35

37 Lab 7: Line Graph Step2: Data Loading var parsedate = d3.time.format("%d-%b- %y").parse... d3.tsv("data/mydata.tsv", function(error, data) { data.foreach(function(d) { d.date = parsedate(d.date) d.close = +d.close console.log(d.date) })... }) 36

38 Lab 7: Line Graph Step2: Data Loading var parsedate = d3.time.format("%d-%b- %y").parse... d3.tsv("data/mydata.tsv", function(error, data) { date data.foreach(function(d) { d.date = parsedate(d.date) d.close = +d.close console.log(d.date) })... }) int => parseint() 36

39 Lab 7: Line Graph Step3: d3.svg.line() var line = d3.svg.line().x(function(d) { return x(d.date) }).y(function(d) { return y(d.close) })... d3.tsv(...) { svg.append("path").datum(data).attr("class", "line").attr("d", line) 37

40 Lab 7: Line Graph Step3: d3.svg.line() var line = d3.svg.line().x(function(d) { return x(d.date) }).y(function(d) { return y(d.close) })... d3.tsv(...) { line svg.append("path").datum(data).attr("class", "line").attr("d", line) 37

41 Lab 7: Line Graph Step4: x, y var x = d3.time.scale().range([0, width]) var y = d3.scale.linear().range([height, 0]) var xaxis = d3.svg.axis().scale(x).orient("bottom") var yaxis = d3.svg.axis().scale(y).orient("left") d3.tsv(...) { x.domain(d3.extent(data, function(d) { return d.date })) y.domain(d3.extent(data, function(d) { return d.close })) 38

42 Lab 7: Line Graph Step4: x, y domain range var x = d3.time.scale().range([0, width]) var y = d3.scale.linear().range([height, 0]) var domain xaxis = range d3.svg.axis().scale(x).orient("bottom") linear var yaxis = d3.svg.axis().scale(y).orient("left") d3.tsv(...) { x.domain(d3.extent(data, function(d) { return d.date })) y.domain(d3.extent(data, function(d) { return d.close })) date range / 38

43 Lab 7: Line Graph Step5: svg.append("g").attr("class", "x axis").attr("transform", "translate(0," + height + ")").call(xaxis) svg.append("g").attr("class", "y axis").call(yaxis) 39

44 Lab 7: Line Graph Step5 (cont.): svg.append("g").attr("class", "y axis").call(yaxis).append("text").attr("transform", "rotate(-90)").attr("y", 6).attr("dy", ".71em").style("text-anchor", "end").text("price ($)") 40

45 Lab 7: Line Graph Step6: CSS Styling.axis path,.axis line { fill: none; stroke: #000; shape-rendering: crispedges; }.x.axis path { stroke: #000; }.line { fill: none; stroke: steelblue; stroke-width: 1px; } 41

46 Assignment 4: Pie Chart + Line Graph : 11/1 ( )

47 Assignment 4: Pie Chart + Line Graph : re_stc_cd=10754&re_lang=kor 43

48 Assignment 4: Pie Chart + Line Graph : (11/1) firstname html index.html, ( : x) zip 44

49 Assignment 4: Pie Chart + Line Graph Pie and Line Chart: gkhwj Life Expectancy: 60 Years of French First Names: prenoms/ Dashboard: ef4d342ee09b Pie charts labels: Multi-Series Line Chart: X-Value Mouseover:

50 Questions...?

Lab10

Lab10 Lab 10: Map Visualization 2015 Fall human-computer interaction + design lab. Joonhwan Lee Map Visualization Shape Shape (.shp): ESRI shp http://sgis.kostat.go.kr/html/index.html 3 d3.js SVG, GeoJSON, TopoJSON