31:[{"id":"2ba57577d6fec1112415f81f310c3c244a01183449fd0cda95706540803e23ef0874883a1c4245e727fa76c4b2349f377bc3a1736d64824a7fdfd0e49743563f","href":"https://static.observableusercontent.com/files/2ba57577d6fec1112415f81f310c3c244a01183449fd0cda95706540803e23ef0874883a1c4245e727fa76c4b2349f377bc3a1736d64824a7fdfd0e49743563f","name":"data2.4_2019.csv","type":"text/csv","lastModified":1580491255484.722,"size":211}] 2f:{"title":"storytelling with data: Let’s Practice! Solution 2.4a","cells":[{"id":0,"value":"md`# storytelling with data: Let’s Practice! Solution 2.4a`","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"{\n yield html`\n

Demand vs. Capacity over time in 2019

# of Project Hours

`;\n drawBars();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"async function drawBars() {\n \n const svg = d3.select(\"#chart\")\n .append(\"svg\")\n .attr(\"width\", dimensions.width)\n .attr(\"height\", dimensions.height)\n \n svg.append(\"g\")\n .selectAll(\"g\")\n .data(data)\n .join(\"g\")\n .attr(\"transform\", d => `translate(${x0(d[groupKey])},0)`)\n .selectAll(\"rect\")\n .data(d => keys.map(key => ({key, value: d[key]})))\n .join(\"rect\")\n .attr(\"x\", d => x1(d.key))\n .attr(\"y\", d => y(d.value))\n .attr(\"width\", x1.bandwidth())\n .attr(\"height\", d => y(0) - y(d.value))\n .attr(\"fill\", d => color(d.key));\n\n svg.append(\"g\")\n .call(xAxis);\n\n svg.append(\"g\")\n .call(yAxis); \n \n /*svg.append(\"text\")\n .attr(\"text-anchor\", \"end\")\n .attr(\"transform\", \"rotate(-90)\")\n .attr(\"y\", 20)\n .attr(\"x\", -100)\n .text(\"Number of Project Hours\")*/ \n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"x0 = d3.scaleBand()\n .domain(data.map(d => d[groupKey]))\n .rangeRound([dimensions.margin.left, dimensions.width - dimensions.margin.right])\n .paddingInner(0.1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"x1 = d3.scaleBand()\n .domain(keys)\n .rangeRound([0, x0.bandwidth()])\n .padding(0.05)","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(data, d => d3.max(keys, key => d[key]))]).nice()\n .rangeRound([dimensions.height - dimensions.margin.bottom, dimensions.margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"color = d3.scaleOrdinal()\n .range([\"#E72388\", \"#8a89a6\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"formatMonth = d3.timeFormat(\"%B\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${dimensions.height - dimensions.margin.bottom})`)\n .call(d3.axisBottom(x0).tickFormat(d3.timeFormat(\"%B\")).tickSizeOuter(0))\n .call(g => g.select(\".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${dimensions.margin.left},0)`)\n .call(d3.axisLeft(y).ticks(null, \"s\"))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 3)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(formatMonth(data.y)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"data = Object.assign(d3.csvParse(await FileAttachment(\"data2.4_2019.csv\").text(), d3.autoType))","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"groupKey = data.columns[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"keys = data.columns.slice(1).reverse()","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"dimensions = ({ \n height:500,\n width:900, \n margin: {\n top: 10,\n right: 10,\n bottom: 40,\n left: 30,\n } \n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}