31:T463,{ var svgDims = [600,300] var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style","background:white;border:1px solid black") //group var outer = svg.append("g").attr("transform",`translate(300,150)`) //arc generator var arcGenerator = d3.arc().innerRadius(30).cornerRadius(5).outerRadius(100).padRadius(100).padAngle(.05) //colors var svgDims = [600,300] var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style","background:white;border:1px solid black") //group var outer = svg.append("g").attr("transform",`translate(300,150)`) //arc generator var arcGenerator = d3.arc().innerRadius(30).cornerRadius(5).outerRadius(100).padRadius(100).padAngle(.05) //colors var colors = ["#1f77b4","#ff7f0e","#2ca02c","#d62728","#9467bd","#8c564b","#e377c2","#7f7f7f","#bcbd22","#17becf"] //arcs for(var i = 0;i < arcs.length;i++){ var pathData = arcGenerator({startAngle:arcs[i].startAngle,endAngle:arcs[i].endAngle}) outer.append("path").attr("stroke","black").attr("fill",colors[i]).attr("d",pathData) } return svg.node() } 32:T44f,{ var svgDims = [600,300] var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style","background:white;border:1px solid black") //group var outer = svg.append("g").attr("transform",`translate(300,150)`) //arc generator var arcGenerator = d3.arc().innerRadius(30).cornerRadius(5).outerRadius(100).padRadius(100).padAngle(.05) //colors var svgDims = [600,300] var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style","background:white;border:1px solid black") //group var outer = svg.append("g").attr("transform",`translate(300,150)`) //arc generator var arcGenerator = d3.arc().innerRadius(30).cornerRadius(5).outerRadius(100).padRadius(100).padAngle(.05) //colors var colors = ["#b3e2cd","#fdcdac","#cbd5e8","#f4cae4","#e6f5c9","#fff2ae","#f1e2cc","#cccccc"] //arcs for(var i = 0;i < arcs.length;i++){ var pathData = arcGenerator({startAngle:arcs[i].startAngle,endAngle:arcs[i].endAngle}) outer.append("path").attr("stroke","black").attr("fill",colors[i]).attr("d",pathData) } return svg.node() } 33:T5ee,{ var svgDims = [600,300] var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style","background:white;border:1px solid black") //group var outer = svg.append("g").attr("transform",`translate(300,150)`) //arc generator var arcGenerator = d3.arc().innerRadius(30).cornerRadius(5).outerRadius(100).padRadius(100).padAngle(.05) //colors var svgDims = [600,300] var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style","background:white;border:1px solid black") //group var outer = svg.append("g").attr("transform",`translate(300,150)`) //arc generator var arcGenerator = d3.arc().innerRadius(30).cornerRadius(1).outerRadius(100).padRadius(100).padAngle(.04) //centroid //colors var colors = ["#b3e2cd","#fdcdac","#cbd5e8","#f4cae4","#e6f5c9","#fff2ae","#f1e2cc","#cccccc"] //arcs var arcs = d3.pie().value(d => d.total)(grades) for(var i = 0;i < arcs.length;i++){ var pathData = arcGenerator({startAngle:arcs[i].startAngle,endAngle:arcs[i].endAngle}) outer.append("path").attr("stroke","black").attr("fill",colors[i]).attr("d",pathData) } //labels for(var i = 0;i < arcs.length;i++){ var centroid = arcGenerator.innerRadius(s).outerRadius(s).centroid({startAngle:arcs[i].startAngle,endAngle:arcs[i].endAngle}) outer.append("text") .attr("x",centroid[0]) .attr("y",centroid[1]) .text(arcs[i].data.letter) .attr("text-anchor","middle") } return svg.node() }34:T602,{ var svgDims = [600,300] var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style","background:white;border:1px solid black") //group var outer = svg.append("g").attr("transform",`translate(300,150)`) //arc generator var arcGenerator = d3.arc().innerRadius(30).cornerRadius(5).outerRadius(100).padRadius(100).padAngle(.05) //colors var svgDims = [600,300] var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style","background:white;border:1px solid black") //group var outer = svg.append("g").attr("transform",`translate(300,150)`) //arc generator var arcGenerator = d3.arc().innerRadius(30).cornerRadius(1).outerRadius(100).padRadius(100).padAngle(.04) //centroid //colors var colors = ["#b3e2cd","#fdcdac","#cbd5e8","#f4cae4","#e6f5c9","#fff2ae","#f1e2cc","#cccccc"] //arcs var arcs = d3.pie().value(d => d.total).sort(d => d.letter)(grades) for(var i = 0;i < arcs.length;i++){ var pathData = arcGenerator({startAngle:arcs[i].startAngle,endAngle:arcs[i].endAngle}) outer.append("path").attr("stroke","black").attr("fill",colors[i]).attr("d",pathData) } //labels for(var i = 0;i < arcs.length;i++){ var centroid = arcGenerator.innerRadius(s).outerRadius(s).centroid({startAngle:arcs[i].startAngle,endAngle:arcs[i].endAngle}) outer.append("text") .attr("x",centroid[0]) .attr("y",centroid[1]) .text(arcs[i].data.letter) .attr("text-anchor","middle") } return svg.node() }35:[] 2f:{"title":"April 7 (Grad Data Viz)","cells":[{"id":0,"value":"html`

April 7 (Grad Data Viz)

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"html`

Pie Charts

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"html`

Example 1

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":282,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"html`

Let's start with a very simple data set:

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"data = [1,2,3]","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"html`If we add the numbers in the data set, we get 6. That represents the whole pie. The number three, then, is half the pie. The number 2 is a third of the pie. And the number 1 is one-sixth of the pie.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"html`Let's see what d3.pie() does when applied to this data set.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"arcs = d3.pie()(data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"html`

Example 2

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":284,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"html`Can you draw the arc for the data value 2?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"{\n var svgDims = [600,300]\n var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr(\"style\",\"background:white;border:1px solid black\")\n \n //group\n var outer = svg.append(\"g\").attr(\"transform\",`translate(300,150)`)\n \n //arc\n var arcGenerator = d3.arc().innerRadius(0).outerRadius(100)\n var pathData = arcGenerator({startAngle:arcs[1].startAngle,endAngle:arcs[1].endAngle})\n outer.append(\"path\").attr(\"stroke\",\"black\").attr(\"fill\",\"cornflowerblue\").attr(\"d\",pathData)\n \n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"html`

Example 3

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":285,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"html`Can you draw the arcs for all of the data values, using a for loop?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"{\n var svgDims = [600,300]\n var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr(\"style\",\"background:white;border:1px solid black\")\n \n //group\n var outer = svg.append(\"g\").attr(\"transform\",`translate(300,150)`)\n \n //arc generator\n var arcGenerator = d3.arc().innerRadius(0).outerRadius(100)\n //arcs\n for(var i = 0;i < arcs.length;i++){ \n var pathData = arcGenerator({startAngle:arcs[i].startAngle,endAngle:arcs[i].endAngle})\n outer.append(\"path\").attr(\"stroke\",\"black\").attr(\"fill\",\"cornflowerblue\").attr(\"d\",pathData)\n }\n \n \n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"html`

Example 4

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":288,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"html`Can you give a different color to each slice?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"{\n var svgDims = [600,300]\n var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr(\"style\",\"background:white;border:1px solid black\")\n \n //group\n var outer = svg.append(\"g\").attr(\"transform\",`translate(300,150)`)\n \n //arc generator\n var arcGenerator = d3.arc().innerRadius(0).outerRadius(100)\n \n //colors\n var colors = [\"red\",\"blue\",\"green\"]\n \n //arcs\n for(var i = 0;i < arcs.length;i++){ \n var pathData = arcGenerator({startAngle:arcs[i].startAngle,endAngle:arcs[i].endAngle})\n outer.append(\"path\").attr(\"stroke\",\"black\").attr(\"fill\",colors[i]).attr(\"d\",pathData)\n }\n \n \n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"html`

Example 5

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":290,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"html`Of course, you can change the inner radius if you want to. You can also specify pad angle and corner radius.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"{\n var svgDims = [600,300]\n var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr(\"style\",\"background:white;border:1px solid black\")\n \n //group\n var outer = svg.append(\"g\").attr(\"transform\",`translate(300,150)`)\n \n //arc generator\n var arcGenerator = d3.arc().innerRadius(30).cornerRadius(5).outerRadius(100).padRadius(100).padAngle(.05)\n \n //colors\n var colors = [\"red\",\"blue\",\"green\"]\n \n //arcs\n for(var i = 0;i < arcs.length;i++){ \n var pathData = arcGenerator({startAngle:arcs[i].startAngle,endAngle:arcs[i].endAngle})\n outer.append(\"path\").attr(\"stroke\",\"black\").attr(\"fill\",colors[i]).attr(\"d\",pathData)\n }\n \n \n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"html`

Example 6

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":292,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"html`If you go to d3 color schemes, you can get some nice combinations of colors. Choose from the categorical options.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"html`

Example 7

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":294,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"html`Let's bring in our grade distribution example from the bar plots:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"grades = [{letter:\"A\",total:10},{letter:\"B\",total:25},{letter:\"C\",total:51},{letter:\"D\",total:8},{letter:\"F\",total:3}]","pinned":false,"hidden":false,"mode":"ojs"},{"id":197,"value":"html`Since this is a more complicated data set, we need to indicate which field should be used to calculate the start and end angles.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"{\n var svgDims = [600,300]\n var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr(\"style\",\"background:white;border:1px solid black\")\n \n //group\n var outer = svg.append(\"g\").attr(\"transform\",`translate(300,150)`)\n \n //arc generator\n var arcGenerator = d3.arc().innerRadius(30).cornerRadius(1).outerRadius(100).padRadius(100).padAngle(.04)\n \n //colors\n var colors = [\"#b3e2cd\",\"#fdcdac\",\"#cbd5e8\",\"#f4cae4\",\"#e6f5c9\",\"#fff2ae\",\"#f1e2cc\",\"#cccccc\"]\n \n //arcs\n var arcs = d3.pie().value(d => d.total)(grades)\n for(var i = 0;i < arcs.length;i++){ \n var pathData = arcGenerator({startAngle:arcs[i].startAngle,endAngle:arcs[i].endAngle})\n outer.append(\"path\").attr(\"stroke\",\"black\").attr(\"fill\",colors[i]).attr(\"d\",pathData)\n }\n \n \n \n return svg.node() \n}\n \n\n \n \n","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"html`

Example 8

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":296,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":225,"value":"html`Before we proceed, let's take a look at what happens when d3.pie() is applied to grades:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":228,"value":"d3.pie().value(d => d.total)(grades)","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"html`

Example 9

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":298,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"html`Some of the slices are to small for us to put labels on the inside. Put the labels on the outside.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":267,"value":"viewof s = slider({min: 100,max:140})","pinned":false,"hidden":false,"mode":"ojs"},{"id":246,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"html`

Example 10

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":252,"value":"html`This is still not great. The slices are ordered by their sizes. We need to order them by letter.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":263,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"html`

Libraries

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"import {slider,button,select,text,radio,checkbox,number} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"stdlib = require( \"https://unpkg.com/@stdlib/stdlib@0.0.32/dist/stdlib-flat.min.js\" )","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}