30:[] 2e:{"title":"March 30","cells":[{"id":0,"value":"html`

March 30

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

Density Plots

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

Example 1

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

Let's bring in the cars data again. Our goal is to get some idea of the distribution of the Miles_per_Gallon variable: how many cars have low mpg, how many have high mpg, etc.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"cars = d3.json(\"https://vega.github.io/vega-datasets/data/cars.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"html`

We will now apply the d3.histogram function to the cars data set:

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"bins = d3.histogram().value(d => d.Miles_per_Gallon)(cars)","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"html`

The d3.histogram function has organized the cars into 9 different groups. We'll take a closer look at these groups in the video.

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

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

Example 2

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

Let's answer some questions about these groups. First, how many groups of cars are there?

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"bins.length","pinned":true,"hidden":false,"mode":"ojs"},{"id":59,"value":"html`

How many cars are in group 2?

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"bins[2].length","pinned":true,"hidden":false,"mode":"ojs"},{"id":65,"value":"html`

The cars in group 2 get between ______________ and ______________ Miles_per_Gallon.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"bins[2].x0","pinned":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"bins[2].x1","pinned":true,"hidden":false,"mode":"ojs"},{"id":75,"value":"html`

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

Example 3

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

Overall, no car in the data set gets more than 50 Miles_per_Gallon. Set up an x-axis that goes from 0 to 50.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"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\n \n //axes\n var xAxis = svg.append(\"g\").attr(\"transform\",\"translate(0,270)\")\n d3.axisBottom(xScale)(xAxis)\n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"html`

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

Example 4

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

If you look at the groups of cars again (the bins), you'll see that group 2 contains most cars at 98. Let's round it to 100. Make a y-axis that goes from 0 to 100.

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

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

Example 5

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

Go through the bins and draw a circle on the x-axis at each x0.

`","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 //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 //circles\n for(var i = 0;i < bins.length; i++){\n svg.append(\"circle\")\n .attr(\"r\",5)\n .attr(\"cx\",xScale(bins[i].x0))\n .attr(\"cy\",yScale(0)) \n }\n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"html`

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

Example 6

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

Raise each circle so that its y-value is the number of cars in the bin it represents.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"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 //circles\n for(var i = 0;i < bins.length; i++){\n svg.append(\"circle\")\n .attr(\"r\",5)\n .attr(\"cx\",xScale(bins[i].x0))\n .attr(\"cy\",yScale(bins[i].length)) \n }\n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"html`

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

Example 7

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

Draw a path through these points.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"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 //circles\n for(var i = 0;i < bins.length; i++){\n svg.append(\"circle\")\n .attr(\"r\",5)\n .attr(\"cx\",xScale(bins[i].x0))\n .attr(\"cy\",yScale(bins[i].length)) \n }\n \n //path\n var pathData = d3.line().x(d => xScale(d.x0)).y(d => yScale(d.length))(bins)\n svg.append(\"path\").attr(\"stroke\",\"black\").attr(\"fill\",\"none\").attr(\"d\",pathData)\n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"html`

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

Example 8

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

Let's smooth the curve out a bit.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"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 //circles\n for(var i = 0;i < bins.length; i++){\n svg.append(\"circle\")\n .attr(\"r\",5)\n .attr(\"cx\",xScale(bins[i].x0))\n .attr(\"cy\",yScale(bins[i].length)) \n }\n \n //path\n var pathData = d3.line().x(d => xScale(d.x0)).y(d => yScale(d.length)).curve(d3.curveMonotoneX)(bins)\n svg.append(\"path\").attr(\"stroke\",\"black\").attr(\"fill\",\"none\").attr(\"d\",pathData)\n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"html`

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

Example 9

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

Fill in the area beneath the curve and remove the points.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"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 \n //area\n var area = d3.area().x(d => xScale(d.x0)).y0(d => yScale(0)).y1(d => yScale(d.length)).curve(d3.curveMonotoneX)(bins)\n svg.append(\"path\").attr(\"stroke\",\"black\").attr(\"fill\",\"cornflowerblue\").attr(\"d\",area)\n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"html`

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

Example 10

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

Make a density plot for the Horsepower variable.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":182,"value":"bins2 = d3.histogram().value(d => d.Horsepower)(cars)","pinned":false,"hidden":false,"mode":"ojs"},{"id":187,"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,250]).range([30,570])\n var yScale = d3.scaleLinear().domain([120,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 \n //area\n var area = d3.area().x(d => xScale(d.x0)).y0(d => yScale(0)).y1(d => yScale(d.length)).curve(d3.curveMonotoneX)(bins2)\n svg.append(\"path\").attr(\"stroke\",\"black\").attr(\"fill\",\"cornflowerblue\").attr(\"d\",area)\n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"md`\n---\n## Libraries\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"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":18,"value":"stdlib = require( \"https://unpkg.com/@stdlib/stdlib@0.0.32/dist/stdlib-flat.min.js\" )","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}