32:T4ed,chart = { const xAxis = g => g .attr("transform", `translate(0,${height - marginBar.bottom})`) .attr("style", "font-size: 12px") .call(d3.axisBottom(xBar)); const yAxis = g => g .attr("transform", `translate(${marginBar.left},0)`) .call(d3.axisLeft(yBar)) .attr("style", "font-size: 12px"); const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); svg .append("g") .selectAll("rect") .data(getDataForCityYear("Windsor, Ontario", "2018")) .join("rect") .attr("fill", d => seriesColors[d.name]) .attr("y", d => yBar(d.name)) .attr("x", d => marginBar.left) .attr("width", d => xBar(d.VALUE) - marginBar.left) .attr("height", yBar.bandwidth()); svg .append("g") .append("text") .text("2018") .attr("x", width - marginBar.right - 200) .attr("y", marginBar.top + 75) .attr("id", "yeartext") .attr("style", "font: bold 80px serif; fill: black; opacity: 0.1"); svg .append("text") .attr("text-anchor", "end") .attr("x", width - 10) .attr("y", height - 5) .attr("style", "font-size: 12px") .text("Number Employed (Thousands)"); svg.append("g").call(xAxis); svg.append("g").call(yAxis); return svg; }33:T5d4,lineChart = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height + 7]); const xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .attr("style", "font-size: 12px") .call(d3.axisBottom(x)); const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y)) .attr("style", "font-size: 12px"); let series = svg .append("g") .selectAll("g") .data(seriesData) .join("g"); series .append("path") .datum(d => d) .attr("fill", "none") .attr("stroke", d => seriesColors[d[0].name]) .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); svg .append("line") .attr("id", "timeindicator") .attr("x1", x(Number("2018"))) .attr("x2", x(Number("2018"))) .attr("y1", y(0)) .attr("y2", y(yMax)) .attr("stroke", "#FFAA00") .attr("style", "stroke-width:5; opacity: 0.4"); svg .append("text") .attr("text-anchor", "end") .attr("transform", "rotate(-90)") .attr("style", "font-size: 12px") .attr("y", 10) .attr("x", margin.top - 28) .text("Number Employed (Thousands)"); svg .append("text") .attr("text-anchor", "end") .attr("x", width - 15) .attr("y", height + 5) .attr("style", "font-size: 12px") .text("Year"); svg.append("g").call(xAxis); svg.append("g").call(yAxis); return svg; }34:T9e1,getDataForCityYear /*(city, year) => [ { VALUE: "50", REF_DATE: "2001", name: "industry 1" }, { VALUE: "100", REF_DATE: "2001", name: "industry 2" }, { VALUE: "100", REF_DATE: "2002", name: "industry 1" }, { VALUE: "50", REF_DATE: "2002", name: "industry 2" }, { VALUE: "50", REF_DATE: "2003", name: "industry 1" }, { VALUE: "100", REF_DATE: "2003", name: "industry 2" }, { VALUE: "100", REF_DATE: "2004", name: "industry 1" }, { VALUE: "50", REF_DATE: "2004", name: "industry 2" }, { VALUE: "50", REF_DATE: "2005", name: "industry 1" }, { VALUE: "100", REF_DATE: "2005", name: "industry 2" }, { VALUE: "75", REF_DATE: "2006", name: "industry 1" }, { VALUE: "100", REF_DATE: "2006", name: "industry 2" }, { VALUE: "50", REF_DATE: "2007", name: "industry 1" }, { VALUE: "100", REF_DATE: "2007", name: "industry 2" }, { VALUE: "50", REF_DATE: "2008", name: "industry 1" }, { VALUE: "100", REF_DATE: "2008", name: "industry 2" }, { VALUE: "50", REF_DATE: "2009", name: "industry 1" }, { VALUE: "100", REF_DATE: "2009", name: "industry 2" }, { VALUE: "50", REF_DATE: "2010", name: "industry 1" }, { VALUE: "100", REF_DATE: "2010", name: "industry 2" }, { VALUE: "50", REF_DATE: "2011", name: "industry 1" }, { VALUE: "100", REF_DATE: "2011", name: "industry 2" }, { VALUE: "50", REF_DATE: "2012", name: "industry 1" }, { VALUE: "100", REF_DATE: "2012", name: "industry 2" }, { VALUE: "50", REF_DATE: "2013", name: "industry 1" }, { VALUE: "100", REF_DATE: "2013", name: "industry 2" }, { VALUE: "50", REF_DATE: "2014", name: "industry 1" }, { VALUE: "100", REF_DATE: "2014", name: "industry 2" }, { VALUE: "50", REF_DATE: "2015", name: "industry 1" }, { VALUE: "100", REF_DATE: "2015", name: "industry 2" }, { VALUE: "50", REF_DATE: "2016", name: "industry 1" }, { VALUE: "100", REF_DATE: "2016", name: "industry 2" }, { VALUE: "50", REF_DATE: "2017", name: "industry 1" }, { VALUE: "100", REF_DATE: "2017", name: "industry 2" }, { VALUE: "50", REF_DATE: "2018", name: "industry 1" }, { VALUE: "100", REF_DATE: "2018", name: "industry 2" } ].filter(d => { return year === d.REF_DATE; })*/ = ( city, year ) => { return getDataForCity(city) .filter(d => { return d.REF_DATE === year; }) .sort((a, b) => { if (a.name < b.name) { return 1; } else if (a.name > b.name) { return -1; } else { return 0; } }); }35:[{"id":"2755b0958d88b8fdb119bb7e0374a51a725e28501263343971a83530a50b47f4439836cceb0777e2893fa826bc892258d60a769258d0d9a218c76007451f93b3","href":"https://static.observableusercontent.com/files/2755b0958d88b8fdb119bb7e0374a51a725e28501263343971a83530a50b47f4439836cceb0777e2893fa826bc892258d60a769258d0d9a218c76007451f93b3","name":"14100098.csv","type":"application/octet-stream","lastModified":1572468569721.331,"size":1897897}] 30:{"title":"Employment in Industry for Statistics Canada Census Metropolitan Areas (CMAs)","cells":[{"id":741,"value":"md`# Employment in Industry for Statistics Canada Census Metropolitan Areas (CMAs)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":747,"value":"md`This is a visualization of the numbers of employed per industry over time for a selected Statistics Canada census metropolitan area (CMA). You can change the CMA using the drop down below:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":925,"value":"viewof currentCity = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":953,"value":"md`Use the slider below the line graph to change the year. If you'd like to cycle through the years automatically, there is a check box at the bottom of both graphs that you can turn on to do that.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"md`## ${currentCity} Number Employed Per Industry (NAICS)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"chart.node()","pinned":false,"hidden":false,"mode":"ojs"},{"id":595,"value":"lineChart.node()","pinned":false,"hidden":false,"mode":"ojs"},{"id":761,"value":"viewof yearInput = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":798,"value":"viewof run = form(\n html`

Check This to Run Through Years Automatically`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":886,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":889,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":960,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":961,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":963,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":266,"value":"currentYear = {\n let newYear = (timer % 18) + 2001;\n viewof yearInput.value = newYear;\n viewof yearInput.dispatchEvent(new CustomEvent(\"input\"));\n return (timer % 18) + 2001 + \"\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":225,"value":"{\n var t = d3\n .transition()\n .duration(500)\n .ease(d3.easeLinear);\n\n chart\n .selectAll(\"rect\")\n .data(getDataForCityYear(currentCity, yearInput + \"\"))\n .transition(t)\n .attr(\"width\", d => {\n return xBar(d.VALUE) - marginBar.left;\n })\n .attr(\"height\", yBar.bandwidth());\n\n chart.selectAll(\"#yeartext\").text(yearInput + \"\");\n\n lineChart\n .selectAll(\"#timeindicator\")\n .transition(t)\n .attr(\"x1\", x(Number(yearInput)))\n .attr(\"x2\", x(Number(yearInput)));\n\n return \"Update on Tick\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":253,"value":"timer = {\n let i = this || 0;\n if (!run.running) {\n return yield 0;\n }\n while (true && run) {\n yield Promises.delay(1500, ++i % 19);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":492,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"currentData = getDataForCityYear(\"Windsor, Ontario\", \"2018\").map(d => {\n if (d.VALUE === \"\") {\n d.VALUE = 0;\n return d;\n } else {\n d.VALUE = Number(d.VALUE);\n return d;\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"xBar = d3\n .scaleLinear()\n .domain([0, d3.max(getDataForCity(currentCity), d => Number(d.VALUE))])\n .nice()\n .range([marginBar.left, width - marginBar.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"yBar = d3\n .scaleBand()\n .domain(currentData.map(d => d.name))\n .range([height - marginBar.bottom, marginBar.top])\n .padding(0.1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"width = 900","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"height = 350","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"marginBar = ({ top: 20, right: 20, bottom: 40, left: 275 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":606,"value":"colorScale = d3\n .scaleSequential()\n .domain([0, 100])\n .interpolator(d3.interpolateTurbo)","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"getDataForCity = city => {\n return data.filter(d => {\n if (d.GEO === city) {\n return true;\n } else {\n return false;\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"getDataForYear = year => {\n return data.filter(d => {\n if (d.REF_DATE === year) {\n return true;\n } else {\n return false;\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":927,"value":"cities = {\n let retObject = {};\n for (let elem of getDataForYear(\"2018\")) {\n retObject[elem.GEO] = 1;\n }\n return Object.keys(retObject).sort();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"data = d3\n .csvParse(await FileAttachment(\"14100098.csv\").text())\n .map(d => {\n d.name = d['North American Industry Classification System (NAICS)'].replace(\n /\\[.*\\]/,\n \"\"\n );\n return d;\n })\n .filter(d => {\n if (\n d[\"North American Industry Classification System (NAICS)\"] ===\n \"Total employed, all industries\" ||\n d[\"North American Industry Classification System (NAICS)\"] ===\n \"Goods-producing sector\" ||\n d[\"North American Industry Classification System (NAICS)\"] ===\n \"Services-producing sector\"\n ) {\n return false;\n } else {\n return true;\n }\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":575,"value":"yMax = d3.max(getDataForCity(currentCity), d => Number(d.VALUE))","pinned":false,"hidden":false,"mode":"ojs"},{"id":476,"value":"y = d3\n .scaleLinear()\n .domain([0, yMax])\n .nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":478,"value":"x = d3\n .scalePoint()\n .domain(years)\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":500,"value":"seriesData = {\n let dataSeriesObject = {};\n for (let elem of getDataForCity(currentCity)) {\n if (dataSeriesObject[elem.name] === undefined) {\n dataSeriesObject[elem.name] = [];\n }\n\n if (elem.VALUE === \"\") {\n elem.numValue = 0;\n } else {\n elem.numValue = Number(elem.VALUE);\n }\n dataSeriesObject[elem.name].push(elem);\n }\n\n let retArray = [];\n for (let key in dataSeriesObject) {\n retArray.push(dataSeriesObject[key]);\n }\n\n return retArray;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":609,"value":"seriesColors = {\n let retObject = {};\n let currentOffset = 0;\n\n for (let elem of getDataForCity(currentCity)) {\n retObject[elem.name] = 1;\n }\n\n let jump = 100 / Object.keys(retObject).length;\n\n let items = Object.keys(retObject).sort();\n\n for (let item of items) {\n retObject[item] = colorScale(currentOffset);\n currentOffset += jump;\n }\n\n return retObject;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":473,"value":"line = d3\n .line()\n .defined(d => !isNaN(d.numValue))\n .x(d => x(d.REF_DATE))\n .y(d => {\n return y(d.numValue);\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":486,"value":"years = {\n let map = {};\n for (let elem of getDataForCity(currentCity)) {\n map[elem.REF_DATE] = 1;\n }\n return Object.keys(map);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":480,"value":"margin = ({ top: 20, right: 30, bottom: 30, left: 40 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":911,"value":"import { form } from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}