Lab7

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

Pie Chart

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

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

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

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

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

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

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

Lab 2: Color Categorical Colors https://github.com/mbostock/d3/wiki/ordinal- Scales#categorical-colors ColorBrewer https://github.com/mbostock/d3/wiki/ordinal- Scales#colorbrewer 10

Lab 2: Color Adobe Kuler https://color.adobe.com/ 11

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Line Graph

Line Graph Pie chart layout SVG path line graph 32

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

Line Graph Interpolation line = d3.svg.line().x( ).y( ).interpolate("linear") linear http://bl.ocks.org/mbostock/4342190 basis 34

Lab 7: Line Graph http://bl.ocks.org/mbostock/3883245 Step1: margin, offset var margin = { top: 20, right: 20, bottom: 30, left: 50 } var width = 960 - margin.left - margin.right var height = 500 - 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

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

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

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

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

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

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

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

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

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

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

Assignment 4: Pie Chart + Line Graph : http://115.84.165.91/jsp/wws7/wwsds7100.jsp? re_stc_cd=10754&re_lang=kor 43

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

Assignment 4: Pie Chart + Line Graph Pie and Line Chart: http://codepen.io/stefanjudis/pen/ gkhwj Life Expectancy: http://projects.flowingdata.com/lifeexpectancy/ 60 Years of French First Names: http://dataaddict.fr/ prenoms/ Dashboard: http://bl.ocks.org/npashap/ 96447623ef4d342ee09b Pie charts labels: http://bl.ocks.org/dbuezas/9306799 Multi-Series Line Chart: http://bl.ocks.org/mbostock/ 3884955 X-Value Mouseover: http://bl.ocks.org/mbostock/ 3902569 45

Questions...?