3e:null 3f:["$","title",null,{"children":"Calendar Heatmap | Lily Bryant | Observable"}] 45:Taf1,buildChart = (dataset) => { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("font-family", "sans-serif") .attr("font-size", 10); // data group const year = svg.selectAll("g") .data([dataset]) .join("g") .attr("transform", d => `translate(20,${cellSize * 1.5 + 20})`); // (left, right) offsets // days of the week labels year.append("g") .attr("text-anchor", "end") .selectAll("text") .data(d3.range(7*10)) // dow * m .join("text") .attr("y", -5) .attr("x", i => (i + 0.5) * cellSize) .attr("dx", "0.31em") .text(d => "SMTWTFS"[d%7]); // day rectangles year.append("g") .selectAll("rect") .data(d => d) .join("rect") .attr("width", cellSize - 1.25) // buffer around cells .attr("height", cellSize - 1.25) .attr("x", d => (dayF(d.date)%7 + (monthF(d.date)-2)*7) * cellSize + 0.5) .attr("y", d => (weekF(d.date) - weekF(new Date (2020, monthF(d.date)-1, 1))) * cellSize + 0.5) .attr("fill", d => colour(d.val)) .on("mouseover", function(d,i){ d3.select(this) .attr("fill","#AAA") }) .on("mouseout", function(d,i){ d3.select(this) .attr("fill", d => colour(d.val)) }) .append("svg:title").text(function(d){ const dToString = d3.timeFormat("%Y-%m-%d"); var str = "Date: " + d3.timeFormat("%a %b %e")(d.date) + "\nValue: " + d.val + "%"; edata.forEach(x => { if (dToString(x.date) == (dToString(d.date))) { str += "\nEvent: " + x.event; d3.select(this.parentNode) .attr("stroke-width",1) .attr("stroke", "#333"); }}) hdata.forEach(x => { if (dToString(x.date) == (dToString(d.date))) { str += "\nHoliday: " + x.holiday; d3.select(this.parentNode) .attr("stroke-width",1) .attr("stroke", "#333"); }}) return str; }); // month data const month = year.append("g") .selectAll("g") .data(_ => d3.timeMonths(d3.timeMonth(minMonth), maxMonth)) // one per month (10) .join("g"); // month vertical divider month.filter((d, i) => i).append("path") .attr("fill", "none") .attr("stroke", "#AAA") .attr("stroke-width", 0.5) .attr("d", sepMonth); // month labels month.append("text") .attr("x", d => (((monthF(d)-1) * 7) - 3.85) * cellSize) .attr("y", -20) .text(d => d3.utcFormat("%b")(d)) .attr("font-size", 14); // horizontal divider const dayDiv = year.append("g") .join("g").append("path") .attr("fill", "none") .attr("stroke", "#AAA") .attr("stroke-width", 1) .attr("d", sepValues); return svg.node(); }46:Tbb0,"" /*chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("font-family", "sans-serif") .attr("font-size", 10); // data group const year = svg.selectAll("g") .data([dataValues]) .join("g") .attr("transform", d => `translate(20,${cellSize * 1.5 + 20})`); // (left, right) offsets // days of the week labels year.append("g") .attr("text-anchor", "end") .selectAll("text") .data(d3.range(7*9)) // dow * m .join("text") .attr("y", -5) .attr("x", i => (i + 0.5) * cellSize) .attr("dx", "0.31em") .text(d => "SMTWTFS"[d%7]); const ttip = svg.append("g").attr("class", "tooltip").append("text"); // day rectangles year.append("g") .selectAll("rect") .data(d => d) .join("rect") .attr("width", cellSize - 1.25) // buffer around cells .attr("height", cellSize - 1.25) .attr("x", d => (dayF(d.date)%7 + (monthF(d.date)-2)*7) * cellSize + 0.5) .attr("y", d => (weekF(d.date) - weekF(new Date (2020, monthF(d.date)-1, 1))) * cellSize + 0.5) .attr("fill", d => colour(d.val)) .on("mouseover", function(d,i){ d3.select(this) .attr("fill","#CCC") //.attr("stroke-width","1.5") //.attr("stroke", "grey"); }) .on("mouseout", function(d,i){ d3.select(this) .attr("fill", d => colour(d.val)) //.attr("stroke-width",null) //.attr("stroke",null); }) .append("svg:title").text(function(d){ const dToString = d3.timeFormat("%Y-%m-%d"); var str = "Date: " + d3.timeFormat("%a %b %e")(d.date) + "\nValue: " + d.val; qdata.forEach(x => { if (dToString(x.date) == (dToString(d.date))) { str += "\nEvent: " + x.event; d3.select(this.parentNode) .attr("stroke-width",1) .attr("stroke", "#999"); }}) hdata.forEach(x => { if (dToString(x.date) == (dToString(d.date))) { str += "\nHoliday: " + x.holiday; d3.select(this.parentNode) .attr("stroke-width",1) .attr("stroke", "#999"); }}) return str; }); const month = year.append("g") .selectAll("g") .data(_ => d3.timeMonths(d3.timeMonth(minMonth), maxMonth)) // one per month (9) .join("g"); // month divider month.filter((d, i) => i).append("path") .attr("fill", "none") .attr("stroke", "#AAA") .attr("stroke-width", 0.5) .attr("d", sepMonth); // month labels month.append("text") .attr("x", d => (((monthF(d)-1) * 7) - 3.85) * cellSize) .attr("y", -20) .text(d => d3.utcFormat("%b")(d)) .attr("font-size", 14); // horizontal divider const dayDiv = year.append("g") .join("g").append("path") .attr("fill", "none") .attr("stroke", "#AAA") .attr("stroke-width", 1) .attr("d", sepValues); return svg.node(); }*/47:Tb61,"" /* chart2 = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("font-family", "sans-serif") .attr("font-size", 10); // data group const year = svg.selectAll("g") .data([dataValues2]) .join("g") .attr("transform", d => `translate(20,${cellSize * 1.5 + 20})`); // (left, right) offsets // days of the week labels year.append("g") .attr("text-anchor", "end") .selectAll("text") .data(d3.range(7*9)) // dow * m .join("text") .attr("y", -5) .attr("x", i => (i + 0.5) * cellSize) .attr("dx", "0.31em") .text(d => "SMTWTFS"[d%7]); // day rectangles year.append("g") .selectAll("rect") .data(d => d) .join("rect") .attr("width", cellSize - 1.25) // buffer around cells .attr("height", cellSize - 1.25) .attr("x", d => (dayF(d.date)%7 + (monthF(d.date)-2)*7) * cellSize + 0.5) .attr("y", d => (weekF(d.date) - weekF(new Date (2020, monthF(d.date)-1, 1))) * cellSize + 0.5) .attr("fill", d => colour(d.val)) .on("mouseover", function(d,i){ d3.select(this) .attr("fill","#CCC") //.attr("stroke-width","1.5") //.attr("stroke", "grey"); }) .on("mouseout", function(d,i){ d3.select(this) .attr("fill", d => colour(d.val)) //.attr("stroke-width",null) //.attr("stroke",null); }) .append("svg:title").text(function(d){ const dToString = d3.timeFormat("%Y-%m-%d"); var str = "Date: " + d3.timeFormat("%a %b %e")(d.date) + "\nValue: " + d.val; qdata.forEach(x => { if (dToString(x.date) == (dToString(d.date))) { str += "\nEvent: " + x.event; d3.select(this.parentNode) .attr("stroke-width",1) .attr("stroke", "#999"); }}) hdata.forEach(x => { if (dToString(x.date) == (dToString(d.date))) { str += "\nHoliday: " + x.holiday; d3.select(this.parentNode) .attr("stroke-width",1) .attr("stroke", "#999"); }}) return str; }); const month = year.append("g") .selectAll("g") .data(_ => d3.timeMonths(d3.timeMonth(minMonth), maxMonth)) // one per month (9) .join("g"); // month divider month.filter((d, i) => i).append("path") .attr("fill", "none") .attr("stroke", "#AAA") .attr("stroke-width", 0.5) .attr("d", sepMonth); // month labels month.append("text") .attr("x", d => (((monthF(d)-1) * 7) - 3.85) * cellSize) .attr("y", -20) .text(d => d3.utcFormat("%b")(d)) .attr("font-size", 14); // horizontal divider const dayDiv = year.append("g") .join("g").append("path") .attr("fill", "none") .attr("stroke", "#AAA") .attr("stroke-width", 1) .attr("d", sepValues); return svg.node(); }*/48:T878,function legend({ color, title, tickSize = 6, width = 320, height = 44 + tickSize, marginTop = 18, marginRight = 0, marginBottom = 16 + tickSize, marginLeft = 0, ticks = width / 64, tickFormat, tickValues } = {}) { const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .style("overflow", "visible") .style("display", "block"); let tickAdjust = g => g.selectAll(".tick line").attr("y1", marginTop + marginBottom - height); let x = Object.assign(color.copy() .interpolator(d3.interpolateRound(marginLeft, width - marginRight)), {range() { return [marginLeft, width - marginRight]; }}); svg.append("image") .attr("x", marginLeft) .attr("y", marginTop) .attr("width", width - marginLeft - marginRight) .attr("height", height - marginTop - marginBottom) .attr("preserveAspectRatio", "none") .attr("xlink:href", ramp(color.interpolator()).toDataURL()); // scaleSequentialQuantile doesn’t implement ticks or tickFormat. if (!x.ticks) { if (tickValues === undefined) { const n = (Math.round(ticks + 1)); tickValues = d3.range(n).map(i => d3.quantile(color.domain(), i / (n - 1))); } if (typeof tickFormat !== "function") { tickFormat = d3.format(tickFormat === undefined ? ",f" : tickFormat); } } svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x) .ticks(ticks, typeof tickFormat === "string" ? tickFormat : undefined) .tickFormat(typeof tickFormat === "function" ? tickFormat : undefined) .tickSize(tickSize) .tickValues(tickValues)) .call(tickAdjust) .call(g => g.select(".domain").remove()) .call(g => g.append("text") .attr("x", marginLeft) .attr("y", marginTop + marginBottom - height - 6) .attr("fill", "currentColor") .attr("text-anchor", "start") .attr("font-family", "sans-serif") .attr("font-size", 11) .text(title)); return svg.node(); }49:Tbe4,e_input = `date,event,link\r 2020-03-11,"COVID-19 outbreak declared a pandemic by WHO",https://www.ncbi.nlm.nih.gov/pmc/articles/PMC7569573/\r 2020-03-12,"Gatherings over 250 people suspended; non-essential travel discouraged with 14 day isolation recommended",https://vancouverisland.ctvnews.ca/b-c-health-officials-discourage-travel-outside-canada-ban-events-larger-than-250-people-1.4850903\r 2020-03-16,"Gatherings over 50 people suspended including restaurants and religious events",https://www.cbc.ca/news/canada/british-columbia/coronavirus-update-bc-what-you-need-to-know-march-16-1.5498752\r 2020-03-17,"BC declares public health and provincial state of emergency; in-school classes are cancelled indefinitely",https://news.gov.bc.ca/releases/2020PSSG0017-000511\r 2020-03-18,"Canada-U.S. border shut down to non-essential travelers",https://pm.gc.ca/en/news/news-releases/2020/03/20/prime-minister-announces-temporary-border-agreement-united-states\r 2020-03-21,"Personal service businesses ordered to shut down",https://news.gov.bc.ca/releases/2020HLTH0101-000538\r 2020-03-26,"Mandatory quarantine for international travellers returning to Canada",https://www2.gov.bc.ca/gov/content/safety/emergency-preparedness-response-recovery/covid-19-provincial-support/self-isolation-on-return\r 2020-04-08,"Full closure of provinical parks",https://bcparks.ca/covid-19/?v=202012052128\r 2020-05-14,"Provincial parks reopen",https://bcparks.ca/covid-19/?v=20201205152\r 2020-05-18,"Phase 1 ends",https://www2.gov.bc.ca/gov/content/safety/emergency-preparedness-response-recovery/covid-19-provincial-support/phase-1\r 2020-05-19,"Phase 2 begins; non-essential businesses re-open with precautions",https://www2.gov.bc.ca/gov/content/safety/emergency-preparedness-response-recovery/covid-19-provincial-support/phase-2\r 2020-06-01,"BC schools are allowed to re-open with split virtual model",https://globalnews.ca/news/6946925/b-c-school-plan-may-15/\r 2020-06-23,"Phase 2 ends",https://www2.gov.bc.ca/gov/content/safety/emergency-preparedness-response-recovery/covid-19-provincial-support/phase-2\r 2020-06-24,"Phase 3 begins; more businesses allowed to re-open including hotels",https://www2.gov.bc.ca/gov/content/safety/emergency-preparedness-response-recovery/covid-19-provincial-support/phase-3\r 2020-10-26,"'Second wave' begins, 6 person bubble",https://www.cbc.ca/news/canada/british-columbia/bc-covid-19-gathering-limit-1.5779589\r 2020-11-07,"Lockdown for Fraser and Vancouver Costal Health regions begins, household bubble only",https://www.cbc.ca/news/canada/british-columbia/b-c-announces-new-covid-19-restrictions-for-metro-vancouver-health-regions-for-2-weeks-as-cases-surge-1.5793969\r 2020-11-19,"Lockdown extends to all BC regions",https://www2.gov.bc.ca/gov/content/safety/emergency-preparedness-response-recovery/covid-19-provincial-support/restrictions\r 2020-12-07,"Lockdown for all regions ends",https://www2.gov.bc.ca/gov/content/safety/emergency-preparedness-response-recovery/covid-19-provincial-support/restrictions\r`4a:[{"id":"76a46b2271c750807038d2c4cbd0d09860ad033392d50dd5f5a72c547fc1a50b99aa644f4a1b944630633836dbd87265dd17f6b90ab2bff911df83fa10598bdf","href":"https://static.observableusercontent.com/files/76a46b2271c750807038d2c4cbd0d09860ad033392d50dd5f5a72c547fc1a50b99aa644f4a1b944630633836dbd87265dd17f6b90ab2bff911df83fa10598bdf","name":"bc_province_data.csv","type":"text/csv","lastModified":1607244562386.116,"size":21820},{"id":"d1c56bfe5a64df4d0996e8adf9ce5e5c8fab44c27b5214a85a945260eaa2b6881fecb99f593255f2ada1acaeddb048f910c608065774aee8cd0c27c81fb3b2dd","href":"https://static.observableusercontent.com/files/d1c56bfe5a64df4d0996e8adf9ce5e5c8fab44c27b5214a85a945260eaa2b6881fecb99f593255f2ada1acaeddb048f910c608065774aee8cd0c27c81fb3b2dd","name":"canada_data@3.csv","type":"text/csv","lastModified":1607244562386.116,"size":13733},{"id":"5e6319844ea531a8d1aca2c9dd35d999e09b12860263288021a6b827c5e6f6dd0fc5b9e699b2e6e2e105bb5d210d989fdcf3848aa758f93af8884eac7eb8f5f7","href":"https://static.observableusercontent.com/files/5e6319844ea531a8d1aca2c9dd35d999e09b12860263288021a6b827c5e6f6dd0fc5b9e699b2e6e2e105bb5d210d989fdcf3848aa758f93af8884eac7eb8f5f7","name":"bc_province_data_updated.csv","type":"text/csv","lastModified":1607467569950.711,"size":25561},{"id":"6dc581fb91d61bd510c40d031c6921a5c17fb70223c59ff7270069d8d8aaf02dd975b168a064366304bb14e8464d159ee1e4c2689ae41f4b30436f8fadeadee1","href":"https://static.observableusercontent.com/files/6dc581fb91d61bd510c40d031c6921a5c17fb70223c59ff7270069d8d8aaf02dd975b168a064366304bb14e8464d159ee1e4c2689ae41f4b30436f8fadeadee1","name":"canada_data_updated.csv","type":"text/csv","lastModified":1607467572724.181,"size":19555}] 43:{"id":"45f2f79fe9b02b9b","slug":"calendar-heatmap","title":"Calendar Heatmap","thumbnail":"efea119e6376c520c2b4f6ee7b561c4263d05b7af1630a30da8819a9411943f2","access_level":"public","create_time":"$D2020-12-06T08:49:22.386Z","update_time":"$D2020-12-09T21:57:57.773Z","view_time":null,"first_public_time":"$D2020-12-08T01:42:18.896Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"67dd9ec3f65c0b18","login":"lilybryant","name":"Lily Bryant","avatar_url":"https://avatars-next.observableusercontent.com/337d4d746afffdfbbafd64c84c254ac5c36703a7236f3741340cf42165121136","tier":"starter_2024","bio":""},"version":1929,"publish_version":1929,"role":null,"authored":false,"authors":[{"type":"individual","id":"63df851fd876cb67","login":"lilybryant","name":"Lily Bryant","avatar_url":"https://avatars-next.observableusercontent.com/337d4d746afffdfbbafd64c84c254ac5c36703a7236f3741340cf42165121136","tier":null,"bio":""}],"members":[{"type":"individual","id":"63df851fd876cb67","login":"lilybryant","name":"Lily Bryant","avatar_url":"https://avatars-next.observableusercontent.com/337d4d746afffdfbbafd64c84c254ac5c36703a7236f3741340cf42165121136","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Calendar Heatmap","cells":[{"id":0,"value":"md`# Calendar Heatmap`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1927,"value":"md`February 15, 2020 - November 30, 2020`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1869,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1704,"value":"md`## Interactive Comparison Vis`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1707,"value":"md`**First Vis:**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1204,"value":"viewof dataset = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":933,"value":"viewof attrib = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1713,"value":"md`**Second Vis:**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"viewof dataset2 = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1197,"value":"viewof attrib2 = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1546,"value":"chart1 = buildChart(input)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1509,"value":"chart2 = buildChart(input2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1694,"value":"lgnd = legend({\n color: d3.scaleSequential(d3.interpolatePiYG).domain([-colourMax/100, +colourMax/100]),\n title: \"Change from Norm\",\n tickFormat: \"+%\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1866,"value":"html`