3e:null 3f:["$","title",null,{"children":"Changes in our mobility – Residential | 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":1606873528106.617,"size":120795},{"id":"5dc2e849984b6a01d26767f40b885f9a068aac7efc1b7078ecb7cd82d2652eebdd2cbc8e6b5530d4a737bf900b9a7762ccd813625c5838df2393bdaff2d51d0f","href":"https://static.observableusercontent.com/files/5dc2e849984b6a01d26767f40b885f9a068aac7efc1b7078ecb7cd82d2652eebdd2cbc8e6b5530d4a737bf900b9a7762ccd813625c5838df2393bdaff2d51d0f","name":"provincial_data_clean_final.csv","type":"text/csv","lastModified":1607498783802.316,"size":142860}] 43:{"id":"b8d5e542ee38dc17","slug":"changes-in-our-mobility-residential","title":"Changes in our mobility – Residential","thumbnail":"ff3881e127fa39542643b8ff4f29cd404af475d4416ee581a51e195d42e0d86e","access_level":"public","create_time":"$D2020-12-02T01:45:28.106Z","update_time":"$D2020-12-11T19:52:38.228Z","view_time":null,"first_public_time":"$D2020-12-02T01:58:05.655Z","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":1024,"publish_version":1024,"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 – Residential","cells":[{"id":884,"value":"title = md`# Changes in our mobility – Residential\n\nWith a drastic change in mobility trends related to workplaces comes a question: where do people spend their waking hours if not at the workplace? Unfortunately, a global pandemic of a deadly virus is not conducive to travel. As a consequence, many people are now spending more time than ever at home. The visualization below illustrates how mobility trends in residential areas have changed across the course of the pandemic\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 const hasDeadData = ch1.includes(\"yt\") || ch1.includes(\"nt\") || ch1.includes(\"nv\");\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`An interesting observation to note is that this mobility category is one that demonstrates a trend in the positive direction. Since less people are commuting to work, attending social gatherings, and in general, leaving their homes less, we see that there is an increase in mobility for the residential category. \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: RESIDENTIAL})), {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(\"Residential – 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":false,"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 if (selectedProvinces.length > 0 && selectedProvinces.length < 12) {\n while (selectedProvinces.length !== 12) {\n selectedProvinces.push(\"BC\");\n colorsForProvs.push(\"#000000\");\n }\n }\n // return colorsForProvs;\n const foo = [\"#000000\", \"#ffffff\",\"#000000\", \"#000000\", \"#000000\", \"#000000\", \"#000000\", \"#000000\", \"#000000\", \"#000000\", \"#000000\", \"#000000\" ]\n return d3.scaleOrdinal([\"AB\", \" \", \" \", \" \", \" \", \" \", \" \", \" \", \" \", \" \", \" \", \" \"], foo);\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":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1012,"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"