31:T41a,{ 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 var arcGenerator = d3.arc().innerRadius(innerRadius).outerRadius(outerRadius) var pathData = arcGenerator({startAngle:start,endAngle:end}) outer.append("path").attr("stroke","black").attr("fill","cornflowerblue").attr("d",pathData) //centroid var centroid = arcGenerator.centroid({startAngle:start,endAngle:end}) //radians to degrees var startDegrees = (360/(2*Math.PI))*start var endDegrees = (360/(2*Math.PI))*end var avgDegrees = (startDegrees+endDegrees)/2 //text var textOuter = outer.append("g").attr("transform",`translate(${centroid[0]},${centroid[1]})`) var textInner = textOuter.append("g").attr("transform",`rotate(${-90 +avgDegrees})`) textInner.append("text") .text("Hello") .attr("fill","white") .attr("text-anchor","middle") return svg.node() }32:T416,{ 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 var arcGenerator = d3.arc().innerRadius(innerRadius).outerRadius(outerRadius) var pathData = arcGenerator({startAngle:start,endAngle:end}) outer.append("path").attr("stroke","black").attr("fill","cornflowerblue").attr("d",pathData) //centroid var centroid = arcGenerator.innerRadius(outerRadius).centroid({startAngle:start,endAngle:end}) //radians to degrees var startDegrees = (360/(2*Math.PI))*start var endDegrees = (360/(2*Math.PI))*end var avgDegrees = (startDegrees+endDegrees)/2 //text var textOuter = outer.append("g").attr("transform",`translate(${centroid[0]+5},${centroid[1]+3})`) var textInner = textOuter.append("g").attr("transform",`rotate(${-90 + avgDegrees})`) textInner.append("text") .text("Hello") .attr("fill","black") return svg.node() }33:[] 2f:{"title":"April 2 (Grad Data Viz)","cells":[{"id":0,"value":"html`

April 2 (Grad Data Viz)

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

Arcs

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

Since we have just covered bar plots with categorical data, it might be a good time to go over pie charts, which you can also use to visualize categorical data. First, however, we have to master arcs.

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

Example 1

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

We will be using d3.arc(). When using d3.arc(), you can define the inner radius and outer radius of your arc. For the inner radius, we'll start with zero. It is common to use the variable name \"arcGenerator\".

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"arcGenerator = d3.arc().innerRadius(0).outerRadius(100)","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"html`

You can now pass a javascript object to this function that defines the start and end angles of the arc. Let's go with 0 degrees and 90 degrees. We have to use radians, though. So, we go with 0 and Math.Pi/2.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"arcGenerator({startAngle:0,endAngle:Math.PI/2})","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"html`

Notice that it gives you the directions for drawing a path. So we should be able to draw it!

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

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

Example 2

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

See if you can draw the arc in Example 1.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"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 //arc\n var arcGenerator = d3.arc().innerRadius(0).outerRadius(100)\n var pathData = arcGenerator({startAngle:0,endAngle:Math.PI/2})\n svg.append(\"path\").attr(\"stroke\",\"black\").attr(\"d\",pathData)\n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"html`

Hmmmmm..., I only see a little line appearing. Let's investigate this is Example 3.

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

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

Example 3

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

Put the path inside a group and translate the group to the center of the svg.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"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:0,endAngle:Math.PI/2})\n outer.append(\"path\").attr(\"stroke\",\"black\").attr(\"d\",pathData)\n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"html`

Aha! The reason we did not see anything is because the angle 0 is straight up, and then we move clockwise from there.

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

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

Example 4

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

Add sliders to experiment with the start and end angles. Change the fill as well.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"viewof start = slider({max:2*Math.PI,value:0})","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"viewof end = slider({max:2*Math.PI,value:Math.PI/2})","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"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:start,endAngle:end})\n outer.append(\"path\").attr(\"stroke\",\"black\").attr(\"fill\",\"cornflowerblue\").attr(\"d\",pathData)\n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"html`

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

Example 5

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

Add sliders to experiment with the inner and outer radii.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"viewof innerRadius = slider({max:50})","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"viewof outerRadius = slider({max:150})","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"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(innerRadius).outerRadius(outerRadius)\n var pathData = arcGenerator({startAngle:start,endAngle:end})\n outer.append(\"path\").attr(\"stroke\",\"black\").attr(\"fill\",\"cornflowerblue\").attr(\"d\",pathData)\n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":155,"value":"html`

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

Example 6

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

For labeling purposes, it is very helpful to calculate what's called the centroid of the arc. Here is how you do it.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"arcGenerator.centroid({startAngle:0,endAngle:Math.PI/2})","pinned":true,"hidden":false,"mode":"ojs"},{"id":166,"value":"html`

It gives you the x and y coordinates of the centroid. The javascript object you input should be the same as the one you use for the arcGenerator itself.

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

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

Example 7

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

Place the word \"Hello\" at the centroid of the arc.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"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(innerRadius).outerRadius(outerRadius)\n var pathData = arcGenerator({startAngle:start,endAngle:end})\n outer.append(\"path\").attr(\"stroke\",\"black\").attr(\"fill\",\"cornflowerblue\").attr(\"d\",pathData)\n \n //centroid\n var centroid = arcGenerator.centroid({startAngle:start,endAngle:end})\n \n //text\n outer.append(\"text\")\n .text(\"Hello\")\n .attr(\"x\",centroid[0])\n .attr(\"y\",centroid[1])\n .attr(\"fill\",\"white\")\n .attr(\"text-anchor\",\"middle\")\n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":189,"value":"html`

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

Example 8

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":197,"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(innerRadius).outerRadius(outerRadius)\n var pathData = arcGenerator({startAngle:start,endAngle:end})\n outer.append(\"path\").attr(\"stroke\",\"black\").attr(\"fill\",\"cornflowerblue\").attr(\"d\",pathData)\n \n //centroid\n var centroid = arcGenerator.innerRadius(outerRadius).centroid({startAngle:start,endAngle:end})\n \n //text\n outer.append(\"text\")\n .text(\"Hello\")\n .attr(\"x\",centroid[0]+5)\n .attr(\"y\",centroid[1]+3)\n .attr(\"fill\",\"black\")\n //.attr(\"text-anchor\",\"middle\")\n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"html`

Maybe you want to label the arc on the outside. You can do this by changing the inner radius for the centroid.

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

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

Example 9

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":274,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":230,"value":"html`

Can you do this?

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"html`

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

Example 10

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

Can you do this?

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

Libraries

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"import {slider,button,select,text,radio,checkbox,number} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"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":21,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}