30:T486,{ var svgDims = [600,300] var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style","background:white;border:1px solid black") //scales var xScale = d3.scaleBand().domain(["A","B","C","D","F"]).range([30,570]) var yScale = d3.scaleLinear().domain([55,0]).range([30,270]) //axes var xAxis = svg.append("g").attr("transform",`translate(0,270)`) d3.axisBottom(xScale)(xAxis) var yAxis = svg.append("g").attr("transform",`translate(30,0)`) d3.axisLeft(yScale)(yAxis) //bars for(var i = 0; i < grades.length; i++){ svg.append("rect") .attr("stroke","black") .attr("fill","cornflowerblue") .attr("x",xScale(grades[i].letter)) .attr("y",yScale(grades[i].total)) .attr("width",xScale.bandwidth()) .attr("height",yScale(0)-yScale(grades[i].total)) } //totals for(var i = 0; i < grades.length; i++){ var w = xScale.bandwidth() svg.append("text") .text(grades[i].total) .attr("x",xScale(grades[i].letter)+w/2) .attr("y",yScale(grades[i].total)-5) .attr("text-anchor","middle") } yield svg.node() }31:T497,{ var svgDims = [600,300] var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style","background:white;border:1px solid black") //scales var xScale = d3.scaleBand().paddingInner(.1).domain(["A","B","C","D","F"]).range([30,570]) var yScale = d3.scaleLinear().domain([55,0]).range([30,270]) //axes var xAxis = svg.append("g").attr("transform",`translate(0,270)`) d3.axisBottom(xScale)(xAxis) var yAxis = svg.append("g").attr("transform",`translate(30,0)`) d3.axisLeft(yScale)(yAxis) //bars for(var i = 0; i < grades.length; i++){ svg.append("rect") .attr("stroke","black") .attr("fill","cornflowerblue") .attr("x",xScale(grades[i].letter)) .attr("y",yScale(grades[i].total)) .attr("width",xScale.bandwidth()) .attr("height",yScale(0)-yScale(grades[i].total)) } //totals for(var i = 0; i < grades.length; i++){ var w = xScale.bandwidth() svg.append("text") .text(grades[i].total) .attr("x",xScale(grades[i].letter)+w/2) .attr("y",yScale(grades[i].total)-5) .attr("text-anchor","middle") } yield svg.node() }32:T4a8,{ var svgDims = [600,300] var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style","background:white;border:1px solid black") //scales var xScale = d3.scaleBand().paddingInner(.1).paddingOuter(.1).domain(["A","B","C","D","F"]).range([30,570]) var yScale = d3.scaleLinear().domain([55,0]).range([30,270]) //axes var xAxis = svg.append("g").attr("transform",`translate(0,270)`) d3.axisBottom(xScale)(xAxis) var yAxis = svg.append("g").attr("transform",`translate(30,0)`) d3.axisLeft(yScale)(yAxis) //bars for(var i = 0; i < grades.length; i++){ svg.append("rect") .attr("stroke","black") .attr("fill","cornflowerblue") .attr("x",xScale(grades[i].letter)) .attr("y",yScale(grades[i].total)) .attr("width",xScale.bandwidth()) .attr("height",yScale(0)-yScale(grades[i].total)) } //totals for(var i = 0; i < grades.length; i++){ var w = xScale.bandwidth() svg.append("text") .text(grades[i].total) .attr("x",xScale(grades[i].letter)+w/2) .attr("y",yScale(grades[i].total)-5) .attr("text-anchor","middle") } yield svg.node() }33:T495,{ var svgDims = [600,300] var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style","background:white;border:1px solid black") //scales var xScale = d3.scaleLinear().domain([0,55]).range([30,570]) var yScale = d3.scaleBand().paddingInner(.1).paddingOuter(.1).domain(["A","B","C","D","F"]).range([30,270]) //axes var xAxis = svg.append("g").attr("transform",`translate(0,270)`) d3.axisBottom(xScale)(xAxis) var yAxis = svg.append("g").attr("transform",`translate(30,0)`) d3.axisLeft(yScale)(yAxis) //bars for(var i = 0; i < grades.length; i++){ var w = yScale.bandwidth() svg.append("rect") .attr("stroke","black") .attr("fill","cornflowerblue") .attr("x",xScale(0)) .attr("y",yScale(grades[i].letter)) .attr("width",xScale(grades[i].total)-xScale(0)) .attr("height",w) } //totals for(var i = 0; i < grades.length; i++){ var w = yScale.bandwidth() svg.append("text") .text(grades[i].total) .attr("x",xScale(grades[i].total)+5) .attr("y",yScale(grades[i].letter)+w/2+3) } yield svg.node() }34:[] 2e:{"title":"April 15","cells":[{"id":0,"value":"html`

April 15

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

Bar Plots

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

Example 1

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

Let's start with an easy, made-up example: a fictional grade distribution.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"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":34,"value":"html`

Along the x-axis I'd like to have the letter grades. On top of each bar I'd like to have a bar extending to the number of such grades. To do so, we need to investigate a different kind of scale.

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

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

Example 2

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

Instead of the linear scale, we need to use the band scale.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"s = d3.scaleBand().domain([\"A\",\"B\",\"C\",\"D\",\"F\"]).range([0,600])","pinned":true,"hidden":false,"mode":"ojs"},{"id":46,"value":"s(\"A\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"s(\"B\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":51,"value":"s(\"C\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":53,"value":"s(\"D\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":55,"value":"s(\"F\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":89,"value":"html`

There is also something called the bandwidth. You can get the bandwidth like this:

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"s.bandwidth()","pinned":true,"hidden":false,"mode":"ojs"},{"id":94,"value":"html`Essentially, you are dividing the x-axis up into bands, and the bandwidth is how long each band is.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":189,"value":"html`

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

Example 3

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

See if you can draw the x-axis without looking at the code.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"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 var xScale = d3.scaleBand().domain([\"A\",\"B\",\"C\",\"D\",\"F\"]).range([30,570])\n var xAxis = svg.append(\"g\").attr(\"transform\",`translate(0,270)`)\n d3.axisBottom(xScale)(xAxis)\n \n yield svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"html`

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

Example 4

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

Can you add the y-axis?

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"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 //scales\n var xScale = d3.scaleBand().domain([\"A\",\"B\",\"C\",\"D\",\"F\"]).range([30,570])\n var yScale = d3.scaleLinear().domain([55,0]).range([30,270])\n \n //axes\n var xAxis = svg.append(\"g\").attr(\"transform\",`translate(0,270)`)\n d3.axisBottom(xScale)(xAxis)\n \n var yAxis = svg.append(\"g\").attr(\"transform\",`translate(30,0)`)\n d3.axisLeft(yScale)(yAxis)\n \n yield svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":192,"value":"html`

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

Example 5

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

Can you put a bar on top of A?

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"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 //scales\n var xScale = d3.scaleBand().domain([\"A\",\"B\",\"C\",\"D\",\"F\"]).range([30,570])\n var yScale = d3.scaleLinear().domain([55,0]).range([30,270])\n \n //axes\n var xAxis = svg.append(\"g\").attr(\"transform\",`translate(0,270)`)\n d3.axisBottom(xScale)(xAxis)\n \n var yAxis = svg.append(\"g\").attr(\"transform\",`translate(30,0)`)\n d3.axisLeft(yScale)(yAxis)\n \n //bars\n svg.append(\"rect\")\n .attr(\"stroke\",\"black\")\n .attr(\"fill\",\"cornflowerblue\")\n .attr(\"x\",xScale(\"A\"))\n .attr(\"y\",yScale(10))\n .attr(\"width\",xScale.bandwidth())\n .attr(\"height\",yScale(0)-yScale(10))\n \n yield svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"html`

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

Example 6

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

Can you put all of the bars in?

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"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 //scales\n var xScale = d3.scaleBand().domain([\"A\",\"B\",\"C\",\"D\",\"F\"]).range([30,570])\n var yScale = d3.scaleLinear().domain([55,0]).range([30,270])\n \n //axes\n var xAxis = svg.append(\"g\").attr(\"transform\",`translate(0,270)`)\n d3.axisBottom(xScale)(xAxis)\n \n var yAxis = svg.append(\"g\").attr(\"transform\",`translate(30,0)`)\n d3.axisLeft(yScale)(yAxis)\n \n //bars\n for(var i = 0; i < grades.length; i++){ \n svg.append(\"rect\")\n .attr(\"stroke\",\"black\")\n .attr(\"fill\",\"cornflowerblue\")\n .attr(\"x\",xScale(grades[i].letter))\n .attr(\"y\",yScale(grades[i].total))\n .attr(\"width\",xScale.bandwidth())\n .attr(\"height\",yScale(0)-yScale(grades[i].total))\n }\n \n \n yield svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"html`

Excellent!

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

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

Example 7

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

Can you display the totals on top of the bars?

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":198,"value":"html`

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

Example 8

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

You can also put padding between the bars.

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

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

Example 9

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

You can pull the bars away from the edges of the axes with some outer padding.

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

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

Example 10

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":234,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"html`

Can you interchange the roles of the axes?

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"html`

Libraries

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