2e:null 2f:["$","title",null,{"children":"D3 Tutorial Part 4 - Let's make a Bar Chart (Solution) | Marius Hogräfer | Observable"}] 34:[] 32:{"id":"cfc2bfbd3c99b018","slug":"d3-tutorial-part-4-lets-make-a-bar-chart-solution","title":"D3 Tutorial Part 4 - Let's make a Bar Chart (Solution)","thumbnail":"532402989ce31e3a170184baf116f763cac41d5f277686b84a354af65c9efc3a","access_level":"public","create_time":"$D2019-09-24T06:53:29.697Z","update_time":"$D2019-09-27T10:53:38.927Z","view_time":null,"first_public_time":"$D2019-09-29T10:51:00.582Z","has_unpublished_edits":null,"fork":{"id":"249e9e1b2d45db3b","slug":"d3-tutorial-part-4-lets-make-a-bar-chart","title":"D3 Tutorial Part 4 - Let's make a Bar Chart","owner":{"id":"3adf8da5f114b89d","login":"mahog","name":"Marius Hogräfer"}},"stars":0,"starred":false,"owner":{"type":"team","id":"3adf8da5f114b89d","login":"mahog","name":"Marius Hogräfer","avatar_url":"https://avatars-next.observableusercontent.com/89ae96d8530754fb6ed75fdeb4226d4278c2bfc782de259df99b2ac34bd420aa","tier":"starter_2024"},"version":240,"publish_version":240,"role":null,"authored":false,"authors":[{"type":"individual","id":"f14bf17e190cd922","login":"mahog","name":"Marius Hogräfer","avatar_url":"https://avatars-next.observableusercontent.com/89ae96d8530754fb6ed75fdeb4226d4278c2bfc782de259df99b2ac34bd420aa","tier":null}],"members":[{"type":"individual","id":"f14bf17e190cd922","login":"mahog","name":"Marius Hogräfer","avatar_url":"https://avatars-next.observableusercontent.com/89ae96d8530754fb6ed75fdeb4226d4278c2bfc782de259df99b2ac34bd420aa","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"D3 Tutorial Part 4 - Let's make a Bar Chart (Solution)","cells":[{"id":0,"value":"md`\n# D3 Tutorial Part 4 - Let's make a Bar Chart (Solution)\n\nThis notebook is part of the tutorial series on D3 for the Data Visualization lecture at Aarhus University. In this notebook, you can apply the features you have learned from the previous lessons to create a simple bar chart on your own.\n\nYou find a description of the task below. As always, let's start out by importing d3 into the notebook.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3@5\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"md`\nIn this exercise, we will again use the cars dataset from the previous tutorials.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"carData = fetch(\"https://vega.github.io/editor/data/cars.json\")\n .then(result => result.json());","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"md`\nYour task is to create a bar chart showing the mean horsepower of all cars from a specific year.\nBelow you will find some presets for the steps necessary to create that chart to guide you along the process.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"aggregatedDimension = \"Horsepower\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"md `\n## Data Wrangling\nFirst up, we have to compute the mean average for the aggregatedDimension per year.\nFor this, we can use d3's predefined array functions, which are however not yet part of d3's stable release, so we download them as a separate library.\n` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"d3ArrayFunctions = require(\"d3-array@^2.2\") // read more at https://github.com/d3/d3-array","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"groupedByYears = d3ArrayFunctions.group(carData, d => d.Year);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"meanDimensionGroupedByYears = {\n const meanDimensionGroupedByYears = {};\n \n for (let [year, cars] of groupedByYears) {\n const meanForThatYear = d3ArrayFunctions.mean(cars, d => d[aggregatedDimension]);\n meanDimensionGroupedByYears[year] = meanForThatYear;\n }\n \n yield meanDimensionGroupedByYears;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"md`\n## Setting up the drawing space\nThen, we need to set up the svg canvas into which we want to draw the visualization. \nThis part is essentially the same as in the last exercise, so we will save you from copy-pasting.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"svg`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"width = 1000","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"margin = 25","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"canvas = d3.select(\"#canvas\")\n .attr(\"width\", width)\n .attr(\"height\", height)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"vis = canvas.select(\".vis\")\n .attr(\"transform\", `translate(${margin}, ${margin})`);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"md`\n## Scales\nYou will need one ordinal scale (for bars, check out [d3.scaleBand](https://github.com/d3/d3-scale#band-scales)) that positions bars along the x axis and a linear scale that can map the mean ${aggregatedDimension} to the height of the bars.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"years = {\n const yearIterator = groupedByYears.keys();\n const years = [];\n let hasNext = true;\n \n while (hasNext) {\n let nextYear = yearIterator.next();\n hasNext = !nextYear.done;\n if (hasNext) years.push(nextYear.value);\n }\n \n yield years;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"// scaleX = ...\nscaleX = d3.scaleBand()\n .padding(0.1)\n .domain(years)\n .range([0, width - 2*margin]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"listOfMeanValues = Object.values(meanDimensionGroupedByYears);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"// scaleY = ...\nscaleY = d3.scaleLinear().domain([0, d3.max(listOfMeanValues)*1.1]).range([height - margin * 2, 0]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"md `\n## Axes\nFor both scales, create axis generators and draw them into the elements that were reserved for axes in the SVG above.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"// axisX = ...\naxisX = d3.axisBottom(scaleX);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"// axisY = ...\naxisY = d3.axisLeft(scaleY);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"// canvas.select(\".axis.x\").call(...)\n// canvas.select...\ncanvas.select(\".axis.x\")\n .attr(\"transform\", `translate(0,${height - 2*margin})`)\n .call(axisX);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"canvas.select(\".axis.y\")\n .call(axisY);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"md`\n## Visual Marks\nNow, let's draw the bars onto the canvas, each representing one entry in the \\`meanDimensionGroupedByYears\\` object.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"marks = canvas.select(\".marks\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"barMark = marks.selectAll(\"rect.bar\").data(years)\n .join(\"rect\")\n .attr(\"class\", \"bar\")\n .attr(\"x\", d => scaleX(d))\n .attr(\"y\", d => scaleY(meanDimensionGroupedByYears[d]))\n .attr(\"fill\", \"steelblue\")\n .attr(\"width\", scaleX.bandwidth())\n .attr(\"height\", d => scaleY(0) - scaleY(meanDimensionGroupedByYears[d]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"md`\n## Further Reading\n* [Observable's bar chart module](https://observablehq.com/@d3/bar-chart)\n* [Let's make a bar chart](https://bost.ocks.org/mike/bar/) (explains the above in detail, but outdated d3 version, so some function calls might not work)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"