3e:null 3f:["$","title",null,{"children":"Changes in our mobility – Workplace | James Yoo | Observable"}] 45:T40c,// { // transitDataMap.set("ab", mapEntry(d3_transit_data_ab, d3.schemeTableau10[0])); // transitDataMap.set("bc", mapEntry(d3_transit_data_bc, d3.schemeTableau10[1])); // transitDataMap.set("sk", mapEntry(d3_transit_data_sk, d3.schemeTableau10[2])); // transitDataMap.set("mb", mapEntry(d3_transit_data_mb, d3.schemeTableau10[3])); // transitDataMap.set("on", mapEntry(d3_transit_data_on, d3.schemeTableau10[4])); // transitDataMap.set("qc", mapEntry(d3_transit_data_qc, d3.schemeTableau10[5])); // transitDataMap.set("nl", mapEntry(d3_transit_data_nl, d3.schemeTableau10[6])); // transitDataMap.set("nb", mapEntry(d3_transit_data_nb, d3.schemeTableau10[7])); // transitDataMap.set("pe", mapEntry(d3_transit_data_pe, d3.schemeTableau10[8])); // transitDataMap.set("yk", mapEntry(d3_transit_data_yk, d3.schemeTableau10[9])); // // We only have up to 10 colors for Tableau // transitDataMap.set("nt", mapEntry(d3_transit_data_nt, "red")); // transitDataMap.set("nv", mapEntry(d3_transit_data_nv, "black")); // }46:T423,// Dec 11, 2020: annotating the parts I wrote populateMap = () => { transitDataMap.set("ab", mapEntry(d3_transit_data_ab, d3.schemeTableau10[0])); transitDataMap.set("bc", mapEntry(d3_transit_data_bc, d3.schemeTableau10[1])); transitDataMap.set("sk", mapEntry(d3_transit_data_sk, d3.schemeTableau10[2])); transitDataMap.set("mb", mapEntry(d3_transit_data_mb, d3.schemeTableau10[3])); transitDataMap.set("on", mapEntry(d3_transit_data_on, d3.schemeTableau10[4])); transitDataMap.set("qc", mapEntry(d3_transit_data_qc, d3.schemeTableau10[5])); transitDataMap.set("nl", mapEntry(d3_transit_data_nl, d3.schemeTableau10[6])); transitDataMap.set("nb", mapEntry(d3_transit_data_nb, d3.schemeTableau10[7])); transitDataMap.set("pe", mapEntry(d3_transit_data_pe, d3.schemeTableau10[8])); transitDataMap.set("yk", mapEntry(d3_transit_data_yk, d3.schemeTableau10[9])); // We only have up to 10 colors for Tableau transitDataMap.set("nt", mapEntry(d3_transit_data_nt, "red")); transitDataMap.set("nv", mapEntry(d3_transit_data_nv, "black")); }47:T663,function swatches({ color, columns = null, format = x => x, swatchSize = 15, swatchWidth = swatchSize, swatchHeight = swatchSize, marginLeft = 0 }) { const id = DOM.uid().id; if (columns !== null) return html`

${color.domain().map(value => { const label = format(value); return html`

${document.createTextNode(label)}

`; })}

`; return html`

${color.domain().map(value => html`${document.createTextNode(format(value))}`)}

`; }48:T5e9,function input(config) { let {form, type = "text", attributes = {}, action, getValue, title, description, submit, options} = config; if (!form) form = html``; const input = form.input; Object.keys(attributes).forEach(key => { const val = attributes[key]; if (val != null) input.setAttribute(key, val); }); if (submit) form.append(html``); form.append(html``); if (title) form.prepend(html`

${title}

`); if (description) form.append(html`

${description}

`); if (action) { action(form); } else { const verb = submit ? "onsubmit" : type == "button" ? "onclick" : type == "checkbox" || type == "radio" ? "onchange" : "oninput"; form[verb] = (e) => { e && e.preventDefault(); const value = getValue ? getValue(input) : input.value; if (form.output)form.output.value = ``; form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input")); }; if (verb !== "oninput") input.oninput = e => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = (e) => e && e.preventDefault(); form[verb](); } return form; }49:[{"id":"d93bc43f0973a22c86470d10fcd82a9fc4b4258f4b92bf498501768d23b0a31bdb716ab85da83b33d3817404c03be0388f908797652b7e5f1d0a2793c70347d0","href":"https://static.observableusercontent.com/files/d93bc43f0973a22c86470d10fcd82a9fc4b4258f4b92bf498501768d23b0a31bdb716ab85da83b33d3817404c03be0388f908797652b7e5f1d0a2793c70347d0","name":"provincial_data_clean.csv","type":"text/csv","lastModified":1606871322428.477,"size":120795},{"id":"5dc2e849984b6a01d26767f40b885f9a068aac7efc1b7078ecb7cd82d2652eebdd2cbc8e6b5530d4a737bf900b9a7762ccd813625c5838df2393bdaff2d51d0f","href":"https://static.observableusercontent.com/files/5dc2e849984b6a01d26767f40b885f9a068aac7efc1b7078ecb7cd82d2652eebdd2cbc8e6b5530d4a737bf900b9a7762ccd813625c5838df2393bdaff2d51d0f","name":"provincial_data_clean_final.csv","type":"text/csv","lastModified":1607498877266.517,"size":142860}] 43:{"id":"f4de8c7284a382ee","slug":"changes-in-our-mobility-workplace","title":"Changes in our mobility – Workplace","thumbnail":"9cf54c3882f9f3b2ee7e748bb606a5499ca8752bc6e51bb70dcdd6da1684277c","access_level":"public","create_time":"$D2020-12-02T01:08:42.428Z","update_time":"$D2020-12-11T19:36:49.107Z","view_time":null,"first_public_time":"$D2020-12-02T01:39:31.346Z","has_unpublished_edits":null,"fork":{"id":"24e843c8000ec0c7","slug":"untitled","title":"Changes in our mobility – Transit","owner":{"id":"d1bb670dd8ae7067","login":"jyoo980","name":"James Yoo "}},"stars":0,"starred":false,"owner":{"type":"team","id":"d1bb670dd8ae7067","login":"jyoo980","name":"James Yoo ","avatar_url":"https://avatars-next.observableusercontent.com/a940dd9b5613e0f51a3888c73f3a8e57b4c2abc4e79e2cadde3163b3d5d12be6","tier":"starter_2024","bio":"Interested in software design and evolution, tools for software engineering, and SE education"},"version":981,"publish_version":981,"role":null,"authored":false,"authors":[{"type":"individual","id":"394514bc503fedf1","login":"jyoo980","name":"James Yoo ","avatar_url":"https://avatars-next.observableusercontent.com/a940dd9b5613e0f51a3888c73f3a8e57b4c2abc4e79e2cadde3163b3d5d12be6","tier":null,"bio":"Interested in software design and evolution, tools for software engineering, and SE education"}],"members":[{"type":"individual","id":"394514bc503fedf1","login":"jyoo980","name":"James Yoo ","avatar_url":"https://avatars-next.observableusercontent.com/a940dd9b5613e0f51a3888c73f3a8e57b4c2abc4e79e2cadde3163b3d5d12be6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Changes in our mobility – Workplace","cells":[{"id":884,"value":"title = md`# Changes in our mobility – Workplace\n\nThe workplace has undergone a number of transformative changes over recent years. From cubicles to open-office concepts, the modern workplace is, for better or for worse, the place where people spend the majority of their waking hours. With the introduction of public health measures to curb the spread of COVID-19, many workplaces have “gone virtual.” This means that many people who would otherwise be commuting to the office for work are instead telecommuting where applicable. In the visualization below, one can clearly see the sharp dropoff around mid-March when COVID restrictions around Canada were introduced\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"chart = {\n const svg = d3.select(DOM.svg(width, height))\n .style(\"-webkit-tap-highlight-color\", \"transparent\")\n .style(\"overflow\", \"visible\");\n \n svg.append(\"g\")\n .call(xAxis);\n\n svg.append(\"g\")\n .call(yAxis);\n\n clampRange();\n populateMap();\n drawLinesFor(ch1, svg);\n \n const tooltip = svg.append(\"g\");\n\n svg.on(\"touchmove mousemove\", (event) => {\n if (ch1.length === 1) {\n const {date, value} = bisect(d3.pointer(event, this)[0]);\n tooltip\n .attr(\"transform\", `translate(${x(date)},${y(value)})`)\n .call(callout, `${formatPercent(value)} ${formatDate(date)}`);\n }\n });\n \n svg.on(\"touchend mouseleave\", () => tooltip.call(callout, null));\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":742,"value":"legend = swatches({\n color: d3.scaleOrdinal([\"AB\", \"BC\", \"SK\", \"MB\", \"ON\", \"QC\", \"NL\", \"NB\", \"PE\", \"YK\", \"NT\", \"NV\"], colors),\n columns: \"200px\"\n})\n\n// legend = swatches({\n// color: createLegendWithSelectedProvinces(),\n// columns: \"200px\"\n// })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":941,"value":"viewof slider = customSlider({\n min: 1, \n max: numDays, \n step: 1, \n title: \"\",\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":927,"value":"viewof range = rangeSlider({\n min: 0,\n max: numDays,\n value: [0, 200],\n precision: 0, // how many decimal places\n title: '',\n display: (v) => \"\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":687,"value":"sliderHeader = md`Showing data in range ${d3.timeFormat(\"%B %d, %Y\")(startDateOnSlider)} - ${d3.timeFormat(\"%B %d, %Y\")(endDateOnSlider)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"viewof ch1 = checkbox({\n title: \"Provinces & Territories\",\n description: \"Please select locations of interest\",\n options: [\n // Dec 11, 2020: annotating the parts I wrote\n { value: \"ab\", label: \"Alberta\" },\n { value: \"bc\", label: \"British Columbia\" },\n { value: \"sk\", label: \"Saskatchewan\" },\n { value: \"mb\", label: \"Manitoba\" },\n { value: \"on\", label: \"Ontario\" },\n { value: \"qc\", label: \"Quebec\" },\n { value: \"nl\", label: \"Newfoundland And Labrador\" },\n { value: \"nb\", label: \"New Brunswick\" },\n { value: \"pe\", label: \"Prince Edward Island\" },\n { value: \"yk\", label: \"Yukon\" },\n { value: \"nt\", label: \"Northwest Territory\" }, \n { value: \"nv\", label: \"Nunavut\" },\n ],\n value: [\"bc\"],\n });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":905,"value":"postamble = md`\nStatistics Canada reported earlier this year that [nearly one-third (32.6%) of businesses had 10% or more of their workforce were working remotely on May 29, 2020](https://www150.statcan.gc.ca/n1/daily-quotidien/200714/dq200714a-eng.htm?CMP=mstatcan). The troughs in the visualization can be explained by workplace mobility understandably dropping toward the weekend. Major drops are explained by regional/nation-wide holidays such as Family Day or Canada Day.\nLooking beyond the impact of COVID-19, it is interesting to consider the future implications that this pandemic has had on the future of work. Statistics Canada also reported that close to [one-quarter (22.5%) of businesses expect that 10% or more of their workforce will continue to telework or work remotely](https://www150.statcan.gc.ca/n1/daily-quotidien/200714/dq200714a-eng.htm?CMP=mstatcan).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"ch1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"md`# Processing Data (I wrote this - James Yoo)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"import {checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"d3_transit_data_ab = await transitDataFor(\"Alberta\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"d3_transit_data_bc = await transitDataFor(\"British Columbia\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":475,"value":"d3_transit_data_sk = transitDataFor(\"Saskatchewan\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"d3_transit_data_mb = await transitDataFor(\"Manitoba\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"d3_transit_data_on = await transitDataFor(\"Ontario\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":491,"value":"d3_transit_data_qc = await transitDataFor(\"Quebec\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":494,"value":"d3_transit_data_nl = await transitDataFor(\"Newfoundland and Labrador\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":500,"value":"d3_transit_data_nb = await transitDataFor(\"New Brunswick\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":504,"value":"d3_transit_data_pe = await transitDataFor(\"Prince Edward Island\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":526,"value":"d3_transit_data_yk = await transitDataFor(\"Yukon\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":529,"value":"d3_transit_data_nt = await transitDataFor(\"Northwest Territories\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":532,"value":"d3_transit_data_nv = await transitDataFor(\"Nunavut\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":536,"value":"transitDataMap = new Map();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":544,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"md`# Helpers + Setup`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":922,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":748,"value":"provColorMap = new Map()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":586,"value":"drawLinesFor = (provinces, canvas) => {\n provinces.forEach((name) => {\n // Dec 11, 2020: annotating the parts I wrote\n const { data, color } = transitDataMap.get(name);\n canvas.append(\"path\")\n .datum(data)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", color)\n .attr(\"stroke-width\", 1.5)\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-linecap\", \"round\")\n .attr(\"d\", line);\n }); \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":506,"value":"// Dec 11, 2020: annotating the parts I wrote\ntransitDataFor = async (prov) => {\n return Object.assign((d3.csvParse(await FileAttachment(\"provincial_data_clean_final.csv\").text(), d3.autoType))\n .filter(row => row[\"PROVINCE\"] === prov)\n // .filter(row => Date.parse(row[\"date\"]) < Date.parse(\"2020-05-01\"))\n .map(({date, TRANSIT, WORKPLACE, RESIDENTIAL}) => ({date, value: WORKPLACE})), {y: \"% Change from baseline (Workplace)\"})\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":593,"value":"// Dec 11, 2020: annotating the parts I wrote\nmapEntry = (data, color) => ({\n \"data\": data,\n \"color\": color,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"margin = ({top: 20, right: 30, bottom: 30, left: 40})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"x = d3.scaleUtc()\n .domain([dataDateStart, dateOnSlider])\n // .domain(d3.extent(d3_transit_data_bc, d => d.date))\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"y = d3.scaleLinear()\n .domain([d3.min(d3_transit_data_bc, d => d.value) - 10, d3.max(d3_transit_data_bc, d => d.value) + 10]).nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))\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 .attr(\"font-size\", 20)\n .text(\"Workplace – Percent change from Baseline\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"line = d3.line()\n .defined(d => !isNaN(d.value))\n .x(d => x(d.date))\n .y(d => y(d.value))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"formatPercent = (value) => `${value}%` // Dec 11, 2020: annotating the parts I wrote","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"// Dec 11, 2020: annotating the parts I wrote\nformatDate = (dateStr) =>\n dateStr.toLocaleString(\"en\", {\n month: \"short\",\n day: \"numeric\",\n year: \"numeric\",\n timeZone: \"UTC\"\n });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"bisect = {\n const bisect = d3.bisector(d => d.date).left;\n return mx => {\n const date = x.invert(mx);\n const index = bisect(d3_transit_data_bc, date, 1);\n const a = d3_transit_data_bc[index - 1];\n const b = d3_transit_data_bc[index];\n return b && (date - a.date > b.date - date) ? b : a;\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"callout = (g, value) => {\n if (!value) return g.style(\"display\", \"none\");\n\n g.style(\"display\", null)\n .style(\"pointer-events\", \"none\")\n .style(\"font\", \"10px sans-serif\");\n\n const path = g.selectAll(\"path\")\n .data([null])\n .join(\"path\")\n .attr(\"fill\", \"white\")\n .attr(\"stroke\", \"black\");\n\n const text = g.selectAll(\"text\")\n .data([null])\n .join(\"text\")\n .call(text => text\n .selectAll(\"tspan\")\n .data((value + \"\").split(/\\n/))\n .join(\"tspan\")\n .attr(\"x\", 0)\n .attr(\"y\", (d, i) => `${i * 1.1}em`)\n .style(\"font-weight\", (_, i) => i ? null : \"bold\")\n .text(d => d));\n\n const {x, y, width: w, height: h} = text.node().getBBox();\n\n text.attr(\"transform\", `translate(${-w / 2},${15 - y})`);\n path.attr(\"d\", `M${-w / 2 - 10},5H-5l5,-5l5,5H${w / 2 + 10}v${h + 20}h-${w + 20}z`);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":662,"value":"md`# Date Calculations`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":929,"value":"import {rangeSlider} from '@mootari/range-slider'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":674,"value":" import {slider as slide} from \"@lorenries/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":630,"value":"// Dec 11, 2020: annotating the parts I wrote\n// Starting date of data\ndatesAsMs = d3_transit_data_ab.map(datum => Date.parse(datum.date))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":654,"value":"// Dec 11, 2020: annotating the parts I wrote\ndataDateStart = new Date(Math.min(...datesAsMs));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":659,"value":"// Dec 11, 2020: annotating the parts I wrote\ndataDateEnd = new Date(1606867200000);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":666,"value":"numDays = d3.timeDay.count(dataDateStart, dataDateEnd)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":669,"value":"timeScale = d3.scaleTime()\n .domain([dataDateStart, dataDateEnd])\n\t.range([0, numDays])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":682,"value":"dateOnSlider = timeScale.invert(slider)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":932,"value":"startDateOnSlider = timeScale.invert(range[0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":935,"value":"endDateOnSlider = timeScale.invert(range[1])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":695,"value":"// Dec 11, 2020: annotating the parts I wrote\nclampRange = () => {\n x.domain([startDateOnSlider, endDateOnSlider])\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":823,"value":"dateLabel = () => {\n const dateRangeStart = d3.timeFormat(\"%B %d, %Y\")(dataDateStart);\n const dateRangeEnd = d3.timeFormat(\"%B %d, %Y\")(dateOnSlider);\n return `${dateRangeStart} - ${dateRangeEnd}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":733,"value":"md`# Legend`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":780,"value":"colors = [...d3.schemeTableau10, ...[\"red\", \"black\"]];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":736,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":738,"value":"function entity(character) {\n return `&#${character.charCodeAt(0).toString()};`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":845,"value":"currentColors = () => {\n const selected = [];\n ch1.forEach((selectedProv) => {\n const entry = transitDataMap.get(selectedProv);\n if (entry !== undefined) {\n selected.push(entry.color);\n } \n })\n return selected;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":850,"value":"currentColors()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":860,"value":"// Dec 11, 2020: annotating the parts I wrote\ncreateLegendWithSelectedProvinces = () => {\n const selectedProvinces = ch1.map(prov => prov.toUpperCase());\n const colorsForProvs = currentColors();\n return d3.scaleOrdinal(selectedProvinces, colorsForProvs);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":805,"value":"md`# Custom Slider Experiment`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":808,"value":"function customSlider(config = {}) {\n // Dec 11, 2020: annotating the parts I wrote\n let {value, min = 0, max = 1, step = \"any\", precision = 2, title, description, submit} = config;\n if (typeof config == \"number\") value = config;\n if (value == null) value = (max + min) / 2;\n precision = Math.pow(10, precision);\n return input({\n type: \"range\", title, description, submit,\n attributes: {min, max, step, value},\n getValue: input => Math.round(input.valueAsNumber * precision) / precision\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":810,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":962,"value":"md`### Inspiration/Sources\n* https://www.d3-graph-gallery.com/graph/line_basic.html\n* https://observablehq.com/@d3/line-chart\n* https://www.d3-graph-gallery.com/graph/interactivity_tooltip.html\n* https://github.com/d3/d3-time-format\n* https://observablehq.com/@mootari/range-slider\n* https://www.d3-graph-gallery.com/graph/interactivity_button.html\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 44:"$43:body"