3e:null 3f:["$","title",null,{"children":"Changes in our mobility – Transit | James Yoo | Observable"}] 45:T4b5,title = md`# Changes in our mobility – Transit Public transit is an invaluable part of the lives of many people across Canada. In British Columbia alone, there was a total of 453 million public transit boardings in 2019. This is an increase from 363 million boardings in 2015. The designation of the busiest bus line in North America belongs to the [99-B Line](https://web.archive.org/web/20200113053911/https://www.translink.ca/Plans-and-Projects/Rapid-Transit-Projects/SkyTrain-to-UBC.aspx) The COVID-19 Pandemic introduced restrictions on workplaces and social gatherings. Naturally, people are no longer travelling at the same levels they were before the pandemic. For example: > "Close to half of bus riders have not returned to transit as TransLink resumed full services this past summer after limiting them in the early days of COVID-19." and this is corroborated by the visualization we present below. This pattern is also not something that is local to British Columbia or one Canadian province or territory. Based on available data from February 14, 2020 to October 17, 2020, it is clear that most regions of Canada have not returned to the levels of travel observed before the pandemic. `46: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")); // }47: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")); }48: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))}`)}

`; }49: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; }4a:[{"id":"d93bc43f0973a22c86470d10fcd82a9fc4b4258f4b92bf498501768d23b0a31bdb716ab85da83b33d3817404c03be0388f908797652b7e5f1d0a2793c70347d0","href":"https://static.observableusercontent.com/files/d93bc43f0973a22c86470d10fcd82a9fc4b4258f4b92bf498501768d23b0a31bdb716ab85da83b33d3817404c03be0388f908797652b7e5f1d0a2793c70347d0","name":"provincial_data_clean.csv","type":"text/csv","lastModified":1604284509272.841,"size":120795},{"id":"5dc2e849984b6a01d26767f40b885f9a068aac7efc1b7078ecb7cd82d2652eebdd2cbc8e6b5530d4a737bf900b9a7762ccd813625c5838df2393bdaff2d51d0f","href":"https://static.observableusercontent.com/files/5dc2e849984b6a01d26767f40b885f9a068aac7efc1b7078ecb7cd82d2652eebdd2cbc8e6b5530d4a737bf900b9a7762ccd813625c5838df2393bdaff2d51d0f","name":"provincial_data_clean_final.csv","type":"text/csv","lastModified":1607498820949.206,"size":142860}] 43:{"id":"24e843c8000ec0c7","slug":"untitled","title":"Changes in our mobility – Transit","thumbnail":"6be5913459d547efd5f5d91d87b9fb17edf758f704f98daa272cb565a6d643ed","access_level":"public","create_time":"$D2020-11-02T02:35:09.272Z","update_time":"$D2020-12-11T19:52:10.167Z","view_time":null,"first_public_time":"$D2020-11-02T03:08:40.466Z","has_unpublished_edits":null,"fork":true,"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":968,"publish_version":968,"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":4,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Changes in our mobility – Transit","cells":[{"id":884,"value":"$45","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 const hasDeadData = ch1.includes(\"yt\") || ch1.includes(\"nv\") || ch1.includes(\"pe\");\n if (ch1.length === 1 && !hasDeadData) {\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 // Dec 11, 2020: annotating the parts I wrote\n options: [\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`One may surmise from this that people are definitely not travelling as much as they used to. An interesting observation is that although regions had different times in which they were under heavier travel restrictions, the general pattern of decreased transit mobility appears to be common among them.\n\nIt is also interesting to observe the almost immediate drop-off in transit mobility in mid-March. This is explained by the imposition of harsher travel restrictions after the [WHO declared COVID-19 outbreak a pandemic](https://www.statnews.com/2020/03/11/who-declares-the-coronavirus-outbreak-a-pandemic/).\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":"$46","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":"$47","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: TRANSIT})), {y: \"% Change from baseline (Transit)\"})\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":593,"value":"mapEntry = (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(\"Transit – 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}%`","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":"// Starting date of data\n datesAsMs = 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":"// Dec 11, 2020: annotating the parts I wrote\ncolors = [...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":"$48","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":"// Dec 11, 2020: annotating the parts I wrote\nfunction customSlider(config = {}) {\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":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":955,"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":"$W4a","stdlib":"1"}} 44:"$43:body"