31:T43e,{ var svgDims = [600,300] var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style","background:white;border:1px solid black") //scales var yScale = d3.scaleBand().domain(["3","4","5","6","8"]).range([270,30]) var xScale = d3.scaleLinear().domain([0,210]).range([30,570]) //axes var yAxis = svg.append("g").attr("transform",`translate(30,0)`) d3.axisLeft(yScale)(yAxis) var xAxis = svg.append("g").attr("transform",`translate(0,270)`) d3.axisBottom(xScale)(xAxis) //bars for(var i = 0; i < totals.length; i++){ svg.append("rect") .attr("x",xScale(0)) .attr("y",yScale(totals[i].key)) .attr("width",xScale(totals[i].value)-xScale(0)) .attr("height",yScale.bandwidth()) .attr("fill","cornflowerblue") .attr("stroke","black") } //totals for(var i = 0; i < totals.length; i++){ var w = yScale.bandwidth() svg.append("text") .text(totals[i].value) .attr("x",xScale(totals[i].value) + 5) .attr("y",yScale(totals[i].key) + w/2 +5) } return svg.node() }32:[] 2f:{"title":"March 31 (Grad Data Viz)","cells":[{"id":0,"value":"html`

March 31 (Grad Data Viz)

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

More With Bar Plots

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

Example 1

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"html`For this notebook, we'll bring in the cars data again:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"cars = d3.json(\"https://vega.github.io/vega-datasets/data/cars.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"html`

A car's engine has a certain number of cylinders in it. In general, the more cylinders an engine has, the more powerful it is. It is common for a car to have 4, 6, or 8 cylinders. I'd like to make a bar plot with the number of cylinders along the x-axis. Therefore we should first determine what the possibilites are. For instance, there are no cars with just one cylinder.

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

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

Example 2

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

Let's digress a bit and talk about javascript's map function. Here's a data set:

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"data = [2,5,3,7,9,10]","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"html`

Suppose you wanted to go through this data set and square each value. You can use the map function:

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"data.map(d => d*d)","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"html`

Here's a data set with javascript objects:

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"heroes = [{name:\"Batman\",identity:\"Bruce Wayne\"},{name:\"Superman\",identity:\"Clark Kent\"},{name:\"Wonder Woman\",identity:\"Diana Prince\"},{name:\"Iron Man\",identity:\"Tony Stark\"}]","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"html`

You can use the map function to collect just the indentities:

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"heroes.map(d => d.identity)","pinned":true,"hidden":false,"mode":"ojs"},{"id":65,"value":"html`

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

Example 3

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

Return to the cars data set and collect all of the cylinder values in an array.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"cars.map(d => d.Cylinders)","pinned":true,"hidden":false,"mode":"ojs"},{"id":169,"value":"html`

It would probably be a good idea to sort this before we move on:

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":171,"value":"cylinders = cars.map(d => d.Cylinders).sort((a,b) => a - b)","pinned":true,"hidden":false,"mode":"ojs"},{"id":79,"value":"html`

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

Example 4

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

You can now find the unique values in the cylinders array by using Set:

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"new Set(cylinders)","pinned":true,"hidden":false,"mode":"ojs"},{"id":99,"value":"html`

Manually type out an array that holds these values. Put them in order.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"[\"3\",\"4\",\"5\",\"6\",\"8\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"html`

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

Example 5

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

Put these categories along a y-axis.

`","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 yScale = d3.scaleBand().domain([\"3\",\"4\",\"5\",\"6\",\"8\"]).range([270,30])\n \n //axes \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":125,"value":"html`

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

Example 6

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

Now we have a challenge. We need to find out how many threes there are, how many fours there are, etc. One easy way to do this is to apply d3.histogram to the cylinders array:

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"d3.histogram().value(d => d)(cylinders)","pinned":true,"hidden":false,"mode":"ojs"},{"id":138,"value":"html`

It's easy now just to inspect the result and see how many of each we have.

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

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

Example 7

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

I prefer using d3.rollup. Here it is, but I'll explain it more in the video.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"d3.nest().key(d => d).entries(cylinders)","pinned":true,"hidden":false,"mode":"ojs"},{"id":176,"value":"totals = d3.nest().key(d => d).rollup(d => d.length).entries(cylinders)","pinned":true,"hidden":false,"mode":"ojs"},{"id":183,"value":"html`

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

Example 8

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

Add the x-axis to the plot.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":189,"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 yScale = d3.scaleBand().domain([\"3\",\"4\",\"5\",\"6\",\"8\"]).range([270,30])\n var xScale = d3.scaleLinear().domain([0,210]).range([30,570])\n \n //axes \n var yAxis = svg.append(\"g\").attr(\"transform\",`translate(30,0)`)\n d3.axisLeft(yScale)(yAxis)\n \n var xAxis = svg.append(\"g\").attr(\"transform\",`translate(0,270)`)\n d3.axisBottom(xScale)(xAxis)\n \n\n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"html`

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

Example 9

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

Add the bars to the plot.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"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 yScale = d3.scaleBand().domain([\"3\",\"4\",\"5\",\"6\",\"8\"]).range([270,30])\n var xScale = d3.scaleLinear().domain([0,210]).range([30,570])\n \n //axes \n var yAxis = svg.append(\"g\").attr(\"transform\",`translate(30,0)`)\n d3.axisLeft(yScale)(yAxis)\n \n var xAxis = svg.append(\"g\").attr(\"transform\",`translate(0,270)`)\n d3.axisBottom(xScale)(xAxis)\n \n //bars\n for(var i = 0; i < totals.length; i++){\n svg.append(\"rect\")\n .attr(\"x\",xScale(0))\n .attr(\"y\",yScale(totals[i].key))\n .attr(\"width\",xScale(totals[i].value)-xScale(0))\n .attr(\"height\",yScale.bandwidth())\n .attr(\"fill\",\"cornflowerblue\")\n .attr(\"stroke\",\"black\")\n }\n\n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"html`

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

Example 10

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

Add the totals to the right of the bars.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":234,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"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":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":19,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}