30:T438,{ 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,50]).range([30,570]) var yScale = d3.scaleLinear().domain([100,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 < bins.length; i++){ svg.append("rect") .attr("x",xScale(bins[i].x0)) .attr("y",yScale(bins[i].length)) .attr("width",xScale(bins[i].x1)-xScale(bins[i].x0)) .attr("height",yScale(0) - yScale(bins[i].length)) .attr("fill","cornflowerblue") .attr("stroke","black") } //totals for(var i = 0; i < bins.length; i++){ svg.append("text") .text(bins[i].length) .attr("x",xScale(bins[i].x0)) .attr("y",yScale(bins[i].length) - 5) .attr("text-anchor","middle") } return svg.node() }31:T461,{ 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,50]).range([30,570]) var yScale = d3.scaleLinear().domain([100,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 < bins.length; i++){ svg.append("rect") .attr("x",xScale(bins[i].x0)) .attr("y",yScale(bins[i].length)) .attr("width",xScale(bins[i].x1)-xScale(bins[i].x0)) .attr("height",yScale(0) - yScale(bins[i].length)) .attr("fill","cornflowerblue") .attr("stroke","black") } //totals for(var i = 0; i < bins.length; i++){ var middle = (bins[i].x1 + bins[i].x0)/2 svg.append("text") .text(bins[i].length) .attr("x",xScale(middle)) .attr("y",yScale(bins[i].length) - 5) .attr("text-anchor","middle") } return svg.node() }32:[] 2e:{"title":"April 1","cells":[{"id":0,"value":"html`

April 1

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

Histograms

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

Example 1

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

In this last notebook before the midterm, I just want to go over how to make a traditional histogram. In many ways, it is similar to making a density plot. First, though, let's start with an exercise that will give us some insight. Draw a set of axes where each goes from 0 to 10.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"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.scaleLinear().domain([0,10]).range([30,570])\n var yScale = d3.scaleLinear().domain([10,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 \n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"html`

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

Example 2

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

Draw a line that goes from (2,8) to (2,1), according to this new coordinate system.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"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.scaleLinear().domain([0,10]).range([30,570])\n var yScale = d3.scaleLinear().domain([10,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 //line\n svg.append(\"line\")\n .attr(\"x1\",xScale(2))\n .attr(\"y1\",yScale(8))\n .attr(\"x2\",xScale(2))\n .attr(\"y2\",yScale(1))\n .attr(\"stroke\",\"black\")\n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"html`

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

Example 3

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

The endpoints of this line, in terms of the overlying coordinate system, are (2,8) and (2,1). What are the endpoints in terms of the svg canvas? (Put the scales in cells, as I did below, so you can work with them.)

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"xScale = d3.scaleLinear().domain([0,10]).range([30,570])","pinned":true,"hidden":false,"mode":"ojs"},{"id":129,"value":"yScale = d3.scaleLinear().domain([10,0]).range([30,270])","pinned":true,"hidden":false,"mode":"ojs"},{"id":133,"value":"xScale(2) ","pinned":true,"hidden":false,"mode":"ojs"},{"id":137,"value":"yScale(8)","pinned":true,"hidden":false,"mode":"ojs"},{"id":139,"value":"yScale(1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":141,"value":"html`

So, what is the length of the line in terms of the svg canvas?

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"246 - 77.99999999999999","pinned":true,"hidden":false,"mode":"ojs"},{"id":147,"value":"html`

Note that this is

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"yScale(1) - yScale(8)","pinned":true,"hidden":false,"mode":"ojs"},{"id":152,"value":"html`

and NOT

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":155,"value":"yScale(1-8)","pinned":true,"hidden":false,"mode":"ojs"},{"id":159,"value":"html`

Remember that!

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

Example 4

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

From the last notebook, bring in the cars data again, make the bins using Miles_per_Gallon, and set up a canvas with the appropriate axes. We're going to make a histogram for Miles_per_Gallon.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":171,"value":"cars = d3.json(\"https://vega.github.io/vega-datasets/data/cars.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":174,"value":"bins = d3.histogram().value(d => d.Miles_per_Gallon)(cars)","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"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.scaleLinear().domain([0,50]).range([30,570])\n var yScale = d3.scaleLinear().domain([100,0]).range([30,270])\n\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 return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"html`

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

Example 5

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

Recall that each bin has an x0. Draw a tiny squares on the x-axis, say 20 by 20, where the x-coordinate of the square is x0 and the y-coordinate is of course zero.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"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.scaleLinear().domain([0,50]).range([30,570])\n var yScale = d3.scaleLinear().domain([100,0]).range([30,270])\n\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 < bins.length; i++){\n svg.append(\"rect\")\n .attr(\"x\",xScale(bins[i].x0))\n .attr(\"y\",yScale(0))\n .attr(\"width\",20)\n .attr(\"height\",20)\n .attr(\"fill\",\"cornflowerblue\")\n .attr(\"stroke\",\"black\")\n }\n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":192,"value":"html`

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

Example 6

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

Change the y-coordinate from zero to the length of the bin.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"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.scaleLinear().domain([0,50]).range([30,570])\n var yScale = d3.scaleLinear().domain([100,0]).range([30,270])\n\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 < bins.length; i++){\n svg.append(\"rect\")\n .attr(\"x\",xScale(bins[i].x0))\n .attr(\"y\",yScale(bins[i].length))\n .attr(\"width\",20)\n .attr(\"height\",20)\n .attr(\"fill\",\"cornflowerblue\")\n .attr(\"stroke\",\"black\")\n }\n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"html`

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

Example 7

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

The width of each rectangle should be x1 - x0. But that is in terms of the overlying coordinate system. We need to work in terms of the svg canvas coordinates. Give each rectangle the proper width.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"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.scaleLinear().domain([0,50]).range([30,570])\n var yScale = d3.scaleLinear().domain([100,0]).range([30,270])\n\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 < bins.length; i++){\n svg.append(\"rect\")\n .attr(\"x\",xScale(bins[i].x0))\n .attr(\"y\",yScale(bins[i].length))\n .attr(\"width\",xScale(bins[i].x1)-xScale(bins[i].x0))\n .attr(\"height\",20)\n .attr(\"fill\",\"cornflowerblue\")\n .attr(\"stroke\",\"black\")\n }\n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":220,"value":"html`

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

Example 8

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

The height of each rectangle should be the length of the bin - zero. But that is in terms of the overlying coordinate system. We need to work in terms of the svg canvas coordinates. Give each rectangle the proper height.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":229,"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.scaleLinear().domain([0,50]).range([30,570])\n var yScale = d3.scaleLinear().domain([100,0]).range([30,270])\n\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 < bins.length; i++){\n svg.append(\"rect\")\n .attr(\"x\",xScale(bins[i].x0))\n .attr(\"y\",yScale(bins[i].length))\n .attr(\"width\",xScale(bins[i].x1)-xScale(bins[i].x0))\n .attr(\"height\",yScale(0) - yScale(bins[i].length))\n .attr(\"fill\",\"cornflowerblue\")\n .attr(\"stroke\",\"black\")\n }\n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"html`

Excellent!

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

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

Example 9

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

Put the totals (the bin length) on top of each bar. Try to get it to looke like what I have below.

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

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

Example 10

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

Finally, place the totals in the middle of each bar.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":264,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"md`\n---\n## Libraries\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"import {slider,button,select,text,radio,checkbox,number} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"stdlib = require( \"https://unpkg.com/@stdlib/stdlib@0.0.32/dist/stdlib-flat.min.js\" )","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}