31:T461,{ var svgDims = [600,300] var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style","background:white;border:1px solid black") var xScale = d3.scaleLinear().domain([0,50]).range([30,570]) var yScale = d3.scaleLinear().domain([0,100]).range([270,30]) var xAxis = svg.append("g").attr("transform",`translate(0,${yScale(0)})`) d3.axisBottom(xScale)(xAxis) var yAxis = svg.append("g").attr("transform",`translate(${xScale(0)},0)`) d3.axisLeft(yScale)(yAxis) //circles /*for(var i = 0;i xScale(d.x0)).y0(d => yScale(0)).y1(d => yScale(0)).curve(d3.curveMonotoneX)(bins) var area2 = d3.area().x(d => xScale(d.x0)).y0(d => yScale(0)).y1(d => yScale(d.length)).curve(d3.curveMonotoneX)(bins) var densityPlot = svg.append("path").attr("stroke","black").attr("fill","cornflowerblue").attr("d",area1) densityPlot.transition().duration(2000).attr("d",area2) yield svg.node() }32:T464,{ var svgDims = [600,300] var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style","background:white;border:1px solid black") var xScale = d3.scaleLinear().domain([0,240]).range([30,570]) var yScale = d3.scaleLinear().domain([0,120]).range([270,30]) var xAxis = svg.append("g").attr("transform",`translate(0,${yScale(0)})`) d3.axisBottom(xScale)(xAxis) var yAxis = svg.append("g").attr("transform",`translate(${xScale(0)},0)`) d3.axisLeft(yScale)(yAxis) //circles /*for(var i = 0;i xScale(d.x0)).y0(d => yScale(0)).y1(d => yScale(0)).curve(d3.curveMonotoneX)(bins2) var area2 = d3.area().x(d => xScale(d.x0)).y0(d => yScale(0)).y1(d => yScale(d.length)).curve(d3.curveMonotoneX)(bins2) var densityPlot = svg.append("path").attr("stroke","black").attr("fill","cornflowerblue").attr("d",area1) densityPlot.transition().duration(2000).attr("d",area2) yield svg.node() }33:T43a,{ var svgDims = [600,300] var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style","background:white;border:1px solid black") var xScale = d3.scaleLinear().domain([0,50]).range([30,570]) var yScale = d3.scaleLinear().domain([0,100]).range([270,30]) var xAxis = svg.append("g").attr("transform",`translate(0,${yScale(0)})`) d3.axisBottom(xScale)(xAxis) var yAxis = svg.append("g").attr("transform",`translate(${xScale(0)},0)`) d3.axisLeft(yScale)(yAxis) //squares for(var i = 0;iMarch 17 (Grad Data Viz)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":995,"value":"html`

Histograms

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

I thought that I would start again from the beginning with histograms. Some review is always helpful.

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

Example 1

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

Let's bring in the cars data again. I'll just name it \"cars\".\n

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

This is a data set consisting of 406 cars, and there are a few statistics included for each car. We will make a histogram for \"Miles_per_Gallon\", so that we can get an idea of how this particular statistic is distributed. (How many cars have low mpg, high mpg, etc.). We first use d3.histogram to group the cars.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1496,"value":"bins = d3.histogram().value(d => d.Miles_per_Gallon)(cars)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1501,"value":"html`\n

I've named this collection \"bins\". As you can see, d3 has grouped the 406 cars into 9 groups according to their mpg. If you pop open each bin, you can see x0 and x1, which tell you the boundaries for the mpg (Miles_per_Gallon) for that group. To get started. let's set up some axes. Let's see what the maximum mpg is in the data set.

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1504,"value":"d3.max(cars,d => d.Miles_per_Gallon)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1506,"value":"html`

So, let's go with limits of 0 to 50 for mpg. As far as the limits for the y-axis, we'll go with 0 to 100, and that is because the largest bin has 98 cars in it.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1508,"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.scaleLinear().domain([0,50]).range([30,570])\n var yScale = d3.scaleLinear().domain([0,100]).range([270,30])\n \n var xAxis = svg.append(\"g\").attr(\"transform\",`translate(0,${yScale(0)})`)\n d3.axisBottom(xScale)(xAxis)\n \n var yAxis = svg.append(\"g\").attr(\"transform\",`translate(${xScale(0)},0)`)\n d3.axisLeft(yScale)(yAxis)\n \n yield svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1684,"value":"html`\n

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

To begin, draw circles at each x0 along the y-axis.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1523,"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.scaleLinear().domain([0,50]).range([30,570])\n var yScale = d3.scaleLinear().domain([0,100]).range([270,30])\n \n var xAxis = svg.append(\"g\").attr(\"transform\",`translate(0,${yScale(0)})`)\n d3.axisBottom(xScale)(xAxis)\n \n var yAxis = svg.append(\"g\").attr(\"transform\",`translate(${xScale(0)},0)`)\n d3.axisLeft(yScale)(yAxis)\n \n //circles\n for(var i = 0;iNow, raise each point so that it goes up to how many cars are in each bin.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1530,"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.scaleLinear().domain([0,50]).range([30,570])\n var yScale = d3.scaleLinear().domain([0,100]).range([270,30])\n \n var xAxis = svg.append(\"g\").attr(\"transform\",`translate(0,${yScale(0)})`)\n d3.axisBottom(xScale)(xAxis)\n \n var yAxis = svg.append(\"g\").attr(\"transform\",`translate(${xScale(0)},0)`)\n d3.axisLeft(yScale)(yAxis)\n \n //circles\n for(var i = 0;i\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1536,"value":"html`

Next, draw a path through these points.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1540,"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.scaleLinear().domain([0,50]).range([30,570])\n var yScale = d3.scaleLinear().domain([0,100]).range([270,30])\n \n var xAxis = svg.append(\"g\").attr(\"transform\",`translate(0,${yScale(0)})`)\n d3.axisBottom(xScale)(xAxis)\n \n var yAxis = svg.append(\"g\").attr(\"transform\",`translate(${xScale(0)},0)`)\n d3.axisLeft(yScale)(yAxis)\n \n //circles\n for(var i = 0;i 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 yield svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1742,"value":"html`\n

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

We are now seeing how mpg is distributed. There are many more cars with poor gas mileage than there are cars with excellent gas mileage. Let's make the an area plot instead.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1551,"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.scaleLinear().domain([0,50]).range([30,570])\n var yScale = d3.scaleLinear().domain([0,100]).range([270,30])\n \n var xAxis = svg.append(\"g\").attr(\"transform\",`translate(0,${yScale(0)})`)\n d3.axisBottom(xScale)(xAxis)\n \n var yAxis = svg.append(\"g\").attr(\"transform\",`translate(${xScale(0)},0)`)\n d3.axisLeft(yScale)(yAxis)\n \n //circles\n for(var i = 0;i xScale(d.x0)).y0(d => yScale(0)).y1(d => yScale(d.length)).curve(d3.curveMonotoneX)(bins)\n \n svg.append(\"path\").attr(\"stroke\",\"black\").attr(\"fill\",\"cornflowerblue\").attr(\"d\",area)\n \n yield svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1555,"value":"html`

At this point, we could comment out the points. I really just put them there to help us understand better what we are doing when we construct a histogram. Also, I guess that this is not technically called a histogram. I would call it a density plot. But it is just as useful in visualizing the distribution of a statistic, like mpg.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1558,"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.scaleLinear().domain([0,50]).range([30,570])\n var yScale = d3.scaleLinear().domain([0,100]).range([270,30])\n \n var xAxis = svg.append(\"g\").attr(\"transform\",`translate(0,${yScale(0)})`)\n d3.axisBottom(xScale)(xAxis)\n \n var yAxis = svg.append(\"g\").attr(\"transform\",`translate(${xScale(0)},0)`)\n d3.axisLeft(yScale)(yAxis)\n \n //circles\n /*for(var i = 0;i xScale(d.x0)).y0(d => yScale(0)).y1(d => yScale(d.length)).curve(d3.curveMonotoneX)(bins)\n \n svg.append(\"path\").attr(\"stroke\",\"black\").attr(\"fill\",\"cornflowerblue\").attr(\"d\",area)\n \n yield svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1687,"value":"html`\n

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

As a fun addition to the problem, can we get the density plot to \"rise from the x-axis\", when the page is loaded? The trick there is to put in an \"area1\" and \"area2\". The top curve in \"area1\" will also be flat. In \"area2\", the top curve wil be what it is supposed to be. Then, transition between the two. You can see this effect if you pop open the code and run it a few times.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1568,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1689,"value":"html`\n

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

Another thing we can do is to give the user an option between statistics. Let's let them choose between Miles_per_Gallon and Horsepower. We'll make a \"bins2\" so that the other plots above are not effected. Note that we also have to adjust the axes a bit so that we can fit in Horsepower.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1583,"value":"bins2 = d3.histogram().value(d => d[s])(cars)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1576,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1579,"value":"viewof s = select({options:[\"Miles_per_Gallon\",\"Horsepower\"]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1766,"value":"html`

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

Example 2

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

\n For this example, we will do what we did above, except that we will draw a traditional histogram. We'll start with just Miles_per_Gallon. We can still use \"cars\" and \"bins\" from above. Start by drawing a square, 20 by 20, that is plotted where we plotted the points (x0,length of bin).\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1600,"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.scaleLinear().domain([0,50]).range([30,570])\n var yScale = d3.scaleLinear().domain([0,100]).range([270,30])\n \n var xAxis = svg.append(\"g\").attr(\"transform\",`translate(0,${yScale(0)})`)\n d3.axisBottom(xScale)(xAxis)\n \n var yAxis = svg.append(\"g\").attr(\"transform\",`translate(${xScale(0)},0)`)\n d3.axisLeft(yScale)(yAxis)\n \n //squares\n for(var i = 0;i\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1603,"value":"html`

Let's now get the correct width. The width of these should be x1 - x0. But you have to scale. Just be sure to scale each separately: xScale(x1) - xScale(x0).

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1607,"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.scaleLinear().domain([0,50]).range([30,570])\n var yScale = d3.scaleLinear().domain([0,100]).range([270,30])\n \n var xAxis = svg.append(\"g\").attr(\"transform\",`translate(0,${yScale(0)})`)\n d3.axisBottom(xScale)(xAxis)\n \n var yAxis = svg.append(\"g\").attr(\"transform\",`translate(${xScale(0)},0)`)\n d3.axisLeft(yScale)(yAxis)\n \n //squares\n for(var i = 0;i\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1610,"value":"html`

Now we will get the correct height. It should be bin.length - 0, but you have to scale. There is a \"gotcha\" here, though. Because the y-axis for the svg goes in the opposite direction from what we're used to, you have to subtract in the opposite order to avoid negative numbers: yScale(0) - yScale(bin.length)

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1613,"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.scaleLinear().domain([0,50]).range([30,570])\n var yScale = d3.scaleLinear().domain([0,100]).range([270,30])\n \n var xAxis = svg.append(\"g\").attr(\"transform\",`translate(0,${yScale(0)})`)\n d3.axisBottom(xScale)(xAxis)\n \n var yAxis = svg.append(\"g\").attr(\"transform\",`translate(${xScale(0)},0)`)\n d3.axisLeft(yScale)(yAxis)\n \n //squares\n for(var i = 0;i\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1616,"value":"html`

Let's give it a different fill and also put the car counts on top of each bar. Note that we have to position the numbers at the average, or mean, of x1 and x0. Here's a quick example to show you how to take the average of two numbers (4 and 6) with d3.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1628,"value":"d3.mean([4,6])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1631,"value":"html`

And here is the finished example.

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

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

Exercise

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

As an exercise, try to make the histogram rise from the x-axis. Have the numbers rise with the bars. My suggestion would be to put each bar, along with its number, in a group, and move them together. Try not to look at the code until you are stumped.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1644,"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.scaleLinear().domain([0,50]).range([30,570])\n var yScale = d3.scaleLinear().domain([0,100]).range([270,30])\n \n var xAxis = svg.append(\"g\").attr(\"transform\",`translate(0,${yScale(0)})`)\n d3.axisBottom(xScale)(xAxis)\n \n var yAxis = svg.append(\"g\").attr(\"transform\",`translate(${xScale(0)},0)`)\n d3.axisLeft(yScale)(yAxis)\n \n //squares\n for(var i = 0;i\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1647,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1638,"value":"html`

Libraries

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