31:Tb01,chart = { const height = 500; const svg = d3 .create("svg") // .style("display", "block") .attr("viewBox", [0, 0, width, height]); const projection = d3.geoAlbers().rotate([126, -10]); projection.fitSize( [960, 500], topojson.feature(bcTOP, bcTOP.objects.BCHA_HEALTH_AUTHORITY_BNDRY_SP) ); const path = d3.geoPath().projection(projection); // console.log(byReg); const tip = d3Tip() .attr('class', "d3-tip") .style("color", "white") .style("background-color", "black") .style("padding", "6px") .style("border-radius", "4px") .style("font-size", "12px") // .offset([10, 10]) .html(function(d) { // console.log(d); const final = byReg.filter(c => { if (c.health_region === "Island") { c.health_region = "Vancouver Island"; } return c.health_region === d.properties.HLTH_AUTHORITY_NAME; }); // console.log("fin", last(final).cum_death); return last(final) ? `${d.properties.HLTH_AUTHORITY_NAME}
${last(final).cum_death} ` : `${d.properties.HLTH_AUTHORITY_NAME}`; }); svg.call(tip); svg .append("g") .selectAll("path") .data( topojson.feature(bcTOP, bcTOP.objects.BCHA_HEALTH_AUTHORITY_BNDRY_SP) .features ) .join("path") .attr("d", path) .attr("fill", d => { const final = byReg.filter(c => { if (c.health_region === "Island") { c.health_region = "Vancouver Island"; } return c.health_region === d.properties.HLTH_AUTHORITY_NAME; }); // console.log("here", final, last(final)); // if( final.length === 1) return last(final) ? colour(last(final).cum_death) : "#f3f3f3"; }) .on('mouseover', function(d) { tip.show(d, this); tip.offset(function(d) { if (d.properties.HLTH_AUTHORITY_NAME === "Northern") { return [200, 10]; } else { return [10, 10]; } }); // when the bar is mouse-overed, we slightly decrease opacity of the bar. d3.select(this).style('opacity', 0.7); }) .on('mouseout', function(d) { // hide the tooltip on mouse out tip.hide(); d3.select(this).style('opacity', 1); }); svg .append("path") .datum( topojson.mesh( bcTOP, bcTOP.objects.BCHA_HEALTH_AUTHORITY_BNDRY_SP, (a, b) => a !== b ) ) .attr("fill", "none") .attr("stroke", "white") .attr("stroke-linejoin", "round") .attr("d", path); // annotate( // svg, // projection, // allCountriesFixed // .filter(d => countriesToShow.includes(d.country)) // .map(d => d.country), // 'confirmed' // ); return svg.node(); }32:T2018,chart1 = { const num_cols = 3; const num_rows = 2; const width = 1000; const height = 500; const cardwidth = 250; const cardheight = 250; const svg = d3 .create("svg") .attr("viewBox", [0, 0, width + 2, height + 2 + 30]); let i = 0; const dimensions = { width: cardwidth, height: cardheight, margin: { top: 50, right: 20, bottom: 20, left: 30 } }; dimensions.boundedWidth = dimensions.width - dimensions.margin.left - dimensions.margin.right; dimensions.boundedHeight = dimensions.height - dimensions.margin.top - dimensions.margin.bottom; const wrapper = svg .append("g") .attr( "transform", `translate(${dimensions.margin.left}, ${dimensions.margin.top})` ); let yScale; // if (type === "deaths") { yScale = d3 .scaleLinear() .domain([0, d3.max(byReg, d => d.cum_death)]) .range([dimensions.boundedHeight, 0]) .nice(); // } else { // yScale = d3 // .scaleLog() // .domain([1, d3.max(byReg, d => d.cum_death)]) // .range([dimensions.boundedHeight, 0]) // .nice(); // } const xScale = d3 .scaleUtc() .domain(d3.extent(byReg, d => d.date)) .range([0, dimensions.boundedWidth]) .nice(); array(num_rows).forEach(row => { array(num_cols).forEach(col => { let bounds = wrapper .append("g") .attr( "transform", `translate(${col * (width / num_cols)}, ${row * (height / num_rows)})` ); const data = [ { province: provsWithData[i], color: "steelblue", data: grouped.get(provsWithData[i]) } ]; // console.log(provsWithData[i]); if (grouped.get(provsWithData[i])) { // if (type === "death" && r1 === "independent") { // yScale = d3 // .scaleLinear() // .domain([0, d3.max(data[0].data, d => d.total)]) // .range([dimensions.boundedHeight, 0]) // .nice(); // } else if (type !== "death" && r1 === "independent") { // yScale = d3 // .scaleLog() // .domain([1, d3.max(data[0].data, d => d.total)]) // .range([dimensions.boundedHeight, 0]) // .nice(); // } // console.log(data); bounds .selectAll('text') .data([null]) .join('text') .style("text-anchor", "middle") .attr("x", dimensions.boundedWidth - dimensions.boundedWidth / 2) .attr("y", -10) .attr("fill", "black") .attr("font-weight", "bold") .attr("font-size", "1.2em") // .style('text-align', 'center') .text(data[0].province); const stats = bounds .selectAll('stats') .data([null]) .join('text') .style("text-anchor", "middle") .attr("x", 20) .attr("y", 10) .attr("fill", "hsla(7, 100%, 50%,100%)") .attr("id", data[0].province.replace(/\s/g, '')) // .attr("font-weight", "bold") .attr("font-size", "0.8em") // .style('text-align', 'center') .text(last(data[0].data).cum_death); bounds .append("defs") .append("clipPath") .attr("id", "bounds-clip-path") .append("rect") .attr("width", dimensions.boundedWidth) .attr("height", dimensions.boundedHeight); i++; const clip = bounds .append("g") .attr("clip-path", "url(#bounds-clip-path)"); const yAxisGenerator = d3 .axisLeft() .scale(yScale) .ticks(...[6, "~s"]); const xAxisGenerator = d3.axisBottom().scale(xScale); // Draw data // const areas = bounds.append("g"); const LineGenerator = d3 .line() .defined(d => !isNaN(d.cum_death)) .x(d => { return xScale(d.date); }) // .y0(yScale(1)) .y(d => { // console.log(d["cum_death"]); return yScale(d["cum_death"]); }); const AreaGenerator = d3 .area() .defined(d => !isNaN(d.cum_death)) .x(d => { return xScale(d.date); }) .y0(yScale(0)) .y1(d => { return yScale(d["cum_death"]); }); clip.append("path").attr("class", "area"); const area = clip .attr("class", "area") .append("g") .selectAll(".area") .data(data) .enter() .append("path") .attr("d", d => { return AreaGenerator(d.data); }) .style("fill", "hsla(7, 100%, 50%,45%)") .style("stroke", d => "none") .style("stroke-width", 2) .style("stroke-linejoin", "round") .on("mousemove click touchmove", function() { const m = d3.mouse(this); hover(xScale.invert(m[0])); }); const line = clip .attr("class", "line") .append("g") .selectAll(".line") .data(data) .enter() .append("path") .attr("d", d => { return LineGenerator(d.data); }) .style("fill", "none") .style("stroke", d => "hsla(7, 100%, 50%,45%)") .style("stroke-width", 2) .style("stroke-linejoin", "round") .on("mousemove click touchmove", function() { const m = d3.mouse(this); hover(xScale.invert(m[0])); }); const xAxis = bounds .append("g") .attr('opacity', .5) .attr("class", "x-axis") .call(xAxisGenerator) .style("transform", `translateY(${dimensions.boundedHeight}px)`) .call(g => g .selectAll("text") .attr("transform", "rotate(-65)") .attr("dx", "-2.23em") .attr("dy", "-.1em") ); const yAxis = bounds .append("g") .attr('opacity', .5) .call(yAxisGenerator) .call(g => g.select(".domain").remove()) .call(g => g .select(".tick:last-of-type text") .clone() .attr("x", 5) .attr("fill", "black") .attr("text-anchor", "start") .attr("font-weight", "bold") .text("") ); // console.log(data); const marker = bounds .append("circle") .attr("r", 4) .attr("cx", -10) .attr("fill", "hsla(7, 100%, 50%,45%)") .attr("stroke", "none") .attr("class", "marker-" + data[0].province.replace(/\s/g, '')) .attr("opacity", 1) .attr("cx", xScale(last(data[0].data).date)) .attr("cy", yScale(last(data[0].data).cum_death)); // .attr("opacity", 0); // .attr("fill", "hsla(7, 100%, 50%,100%)"); const bisect = d3.bisector(d => d.date); function hover(date) { // console.log(date); provsWithData.forEach(p => { let dataT = [ { province: p, data: grouped.get(p) } ]; const i = bisect.right(dataT[0].data, date); d3.select('.marker-' + p.replace(/\s/g, '')) .attr("stroke", "hsla(7, 100%, 50%,100%)") .attr("fill", "hsla(7, 100%, 50%,45%)") .attr("opacity", 1) .attr("cx", xScale(dataT[0].data[i].date)) .attr("cy", yScale(dataT[0].data[i].cum_death)); d3.select('#' + p.replace(/\s/g, '')).text( d3.format(",.2r")(dataT[0].data[i].cum_death) ); // .attr("fill", "hsla(7, 100%, 50%)"); }); // // d3.select('.marker-' + "Ontario") // .attr("stroke", "red") // .attr("cx", xScale(data[0].data[i].date)) // .attr("cy", yScale(data[0].data[i].total)); } // }) } }); }); return svg.node(); }33:T2983,chart2 = { const num_cols = 3; const num_rows = 4; const width = 1000; const height = 1100; const cardwidth = 250; const cardheight = 250; const svg = d3 .create("svg") .attr("viewBox", [0, 0, width + 2, height + 2 + 30]); let i = 0; const dimensions = { width: cardwidth, height: cardheight, margin: { top: 50, right: 20, bottom: 20, left: 30 } }; dimensions.boundedWidth = dimensions.width - dimensions.margin.left - dimensions.margin.right; dimensions.boundedHeight = dimensions.height - dimensions.margin.top - dimensions.margin.bottom; const tip = d3Tip() .attr('class', "d3-tip") .style("color", "white") .style("background-color", "black") .style("padding", "6px") .style("border-radius", "4px") .style("font-size", "12px") .offset([-10, 0]) .html(function(d) { // console.log(d3.format(',')(d.cases)); return `${d3.format(',')( d.total )}
${d3.timeFormat('%B %d, %Y')(d.date)}`; }); const wrapper = svg .append("g") .attr( "transform", `translate(${dimensions.margin.left}, ${dimensions.margin.top})` ); let yScale; // if (type === "deaths") { // yScale = d3 // .scaleLinear() // .domain([0, d3.max(dailyData, d => +d.total)]) // .range([dimensions.boundedHeight, 0]) // .nice(); // } else { // yScale = d3 // .scaleLog() // .domain([1, d3.max(dailyData, d => +d.total)]) // .range([dimensions.boundedHeight, 0]) // .nice(); // } yScale = d3 .scaleLinear() .domain([0, d3.max(dailyData, d => +d.total)]) .range([dimensions.boundedHeight, 0]) .nice(); const xScale = d3 .scaleUtc() .domain(d3.extent(dailyData, d => d.date)) .range([0, dimensions.boundedWidth]) .nice(); // .nice(); array(num_rows).forEach(row => { array(num_cols).forEach(col => { let bounds = wrapper .append("g") .attr( "transform", `translate(${col * (width / num_cols)}, ${row * (height / num_rows)})` ); // const xScaleBand = d3 // .scaleBand() // .domain(d3.extent(data[0].data, d => d.date)) // .range([0, dimensions.boundedWidth]) // .padding(0.1); // console.log(d3.extent(data[0].data, d => d.date)); if (grouped.get(provsWithData[i])) { const data = [ { province: provsWithData[i], color: "steelblue", data: dailyData.filter( d => d.health_region === provsWithData[i] && d.date > new Date("2020-03-01") ) } ]; // console.log(provsWithData[i], data, dailyData); // debugger; // console.log(data[0].data.filter(d => d.cases > 0).map(d => d.cases)); // const bins = d3 // .histogram() // .domain(xScale.domain()) // .thresholds(xScale.ticks(d3.timeDay))(data[0].data); const values = movingAverage(data[0].data.map(d => +d.total), 5); // console.log(data[0].province, data[0].data.map(d => +d.total), values); // console.log("max", d3.max(data[0].data, d => +d.total)); console.log("ind", data, d3.max(data[0].data, d => +d.total)); if (type === "deaths" && r === "independent") { yScale = d3 .scaleLinear() .domain([0, d3.max(data[0].data, d => +d.total)]) .range([dimensions.boundedHeight, 0]) .nice(); } else if (type !== "deaths" && r === "independent") { yScale = d3 .scaleLinear() .domain([0, d3.max(data[0].data, d => +d.total)]) .range([dimensions.boundedHeight, 0]) .nice(); } // console.log("check data", data); bounds .selectAll('text') .data([null]) .join('text') .style("text-anchor", "middle") .attr("x", dimensions.boundedWidth - dimensions.boundedWidth / 2) .attr("y", -10) .attr("fill", "black") .attr("font-weight", "bold") .attr("font-size", "1.2em") // .style('text-align', 'center') .text(data[0].province); // const stats = bounds // .selectAll('stats') // .data([null]) // .join('text') // .style("text-anchor", "middle") // .attr("x", 20) // .attr("y", 10) // .attr("fill", "hsla(7, 100%, 50%,100%)") // .attr("id", data[0].province.replace(/\s/g, '')) // // .attr("font-weight", "bold") // .attr("font-size", "0.8em") // // .style('text-align', 'center') // .text(last(data[0].data).cases); bounds .append("defs") .append("clipPath") .attr("id", "bounds-clip-path") .append("rect") .attr("width", dimensions.boundedWidth) .attr("height", dimensions.boundedHeight); i++; const clip = bounds .append("g") .attr("clip-path", "url(#bounds-clip-path)"); const yAxisGenerator = d3 .axisLeft() .scale(yScale) .ticks(...[6, "~s"]); const xAxisGenerator = d3.axisBottom().scale(xScale); // Draw data // const areas = bounds.append("g"); const LineGenerator = d3 .line() .defined(d => !isNaN(d)) .x((d, i) => { return xScale(data[0].data[i].date); }) .y(yScale); // .y0(yScale(1)) // .y(d => { // return yScale(d); // }); const AreaGenerator = d3 .area() .x(d => { return xScale(d.date); }) .y0(yScale(1)) .y1(d => { return yScale(+d["total"]); }); clip.append("g"); const barPadding = 1; const barWidth = 2; // console.log(barWidth); bounds.call(tip); const barz = bounds .append("g") .attr("fill", "hsla(7, 100%, 50%,45%)") .attr("class", 'barz') .selectAll("rect") .data(data[0].data) .join("rect") .attr("x", d => { return xScale(d.date); }) .attr("y", d => { return yScale(+d.total); }) .attr("width", barWidth) .attr("height", d => dimensions.boundedHeight - yScale(+d.total)) .on('mouseover', function(d) { // show the tooltip on mouse over tip.show(d, this); // when the bar is mouse-overed, we slightly decrease opacity of the bar. d3.select(this).style('opacity', 0.7); }) .on('mouseout', function(d) { // hide the tooltip on mouse out tip.hide(); d3.select(this).style('opacity', 1); }); // debugger; const line = clip // .attr("class", "line") // .append("g") // .selectAll(".line") // .data(values) // .enter() .append("path") .attr("d", LineGenerator(values)) .style("fill", "none") .style("stroke", d => "steelblue") .style("stroke-width", 2) .style("stroke-linejoin", "round"); // .on("mousemove click touchmove", function() { // const m = d3.mouse(this); // hover(xScale.invert(m[0])); // }); const xAxis = bounds .append("g") .attr('opacity', .5) .attr("class", "x-axis") .call(xAxisGenerator) .style("transform", `translateY(${dimensions.boundedHeight}px)`) .call(g => g .selectAll("text") .attr("transform", "rotate(-65)") .attr("dx", "-2.23em") .attr("dy", "-.1em") ); const yAxis = bounds .append("g") .attr('opacity', .5) .call(yAxisGenerator) .call(g => g.select(".domain").remove()) .call(g => g .select(".tick:last-of-type text") .clone() .attr("x", 5) .attr("fill", "black") .attr("text-anchor", "start") .attr("font-weight", "bold") .text("") ); // console.log(last(data[0].data).total); // const marker = bounds // .append("circle") // .attr("r", 4) // .attr("cx", -10) // .attr("fill", "hsla(7, 100%, 50%,45%)") // .attr("stroke", "none") // .attr("class", "marker-" + data[0].province.replace(/\s/g, '')) // .attr("opacity", 1) // .attr("cx", xScale(last(data[0].data).date)) // .attr("cy", yScale(last(data[0].data).total)); // .attr("opacity", 0); // .attr("fill", "hsla(7, 100%, 50%,100%)"); // const bisect = d3.bisector(d => d.date); // function hover(date) { // provsWithData.forEach(p => { // let dataT = [ // { // province: p, // data: grouped.get(p) // } // ]; // const i = bisect.right(dataT[0].data, date); // // console.log(dataT[0].data, date); // d3.select('.marker-' + p.replace(/\s/g, '')) // .attr("stroke", "hsla(7, 100%, 50%,100%)") // .attr("fill", "hsla(7, 100%, 50%,45%)") // .attr("opacity", 1) // .attr("cx", xScale(dataT[0].data[i].date)) // .attr("cy", yScale(dataT[0].data[i].total)); // d3.select('#' + p.replace(/\s/g, '')).text( // d3.format(",.2r")(dataT[0].data[i].total) // ); // // .attr("fill", "hsla(7, 100%, 50%)"); // }); // // // // d3.select('.marker-' + "Ontario") // // .attr("stroke", "red") // // .attr("cx", xScale(data[0].data[i].date)) // // .attr("cy", yScale(data[0].data[i].total)); // } // }) } }); }); return svg.node(); }34:[{"id":"dc063936d83aa1b6cfd9e8822a33b092be801a0b5df0cf8f1d995979d996fe8c1bd1a0eaaa6648f822655152a2500e3acf177bc05106c36f0008f13c842981eb","href":"https://static.observableusercontent.com/files/dc063936d83aa1b6cfd9e8822a33b092be801a0b5df0cf8f1d995979d996fe8c1bd1a0eaaa6648f822655152a2500e3acf177bc05106c36f0008f13c842981eb","name":"BCHA_HEALTH_AUTHORITY_BNDRY_SP_TOPO.json","type":"application/json","lastModified":1587506289258.836,"size":172960}] 2f:{"title":"COVID-19 in British Columbia","cells":[{"id":0,"value":"md`# COVID-19 in British Columbia\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":906,"value":"md`\n### COVID-19 ${type.charAt(0).toUpperCase() +\n type.slice(1)} in BC Health Regions\n
\n\n\n[Data source](https://github.com/ishaberry/Covid19Canada)\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1122,"value":"md`\n

Data as of ${d3.timeFormat('%B %d, %Y')(\n d3.max(dailyData, d => d.date)\n)}\n
${\n type === \"deaths\" ? \"Total deaths\" : \"Total confirmed cases\"\n}
\n
${\n type === \"deaths\"\n ? d3.format(\",d\")(d3.sum(newbcMort, d => +d.deaths))\n : d3.format(\",d\")(\n d3.sum(cases.filter(d => d.province === \"BC\"), d => d.cases)\n )\n}
\n
\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":846,"value":"viewof type = select({\n options: [\"deaths\", \"cases\"],\n description: \"\",\n title: \"View data for\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":340,"value":"viewof date = Scrubber(dates, {\n autoplay: true,\n format: date => date.toLocaleString(\"en\", { month: \"long\", day: \"numeric\" }),\n // delay: 100,\n loop: false,\n initial: dates.length - 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"legend({\n color: d3.scaleSequential(\n [0, d3.max(byRegAll, d => d.cum_death)],\n d3.interpolateHsl(d3.rgb('#fff7ec'), d3.rgb(\"#7f0000\"))\n ),\n title: \"Total deaths\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1496,"value":"topojson.feature(bcTOP, bcTOP.objects.BCHA_HEALTH_AUTHORITY_BNDRY_SP).features","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":1144,"value":"md`\n### ${type === \"deaths\" ? \"Cumulative Deaths\" : \"Cumulative Confirmed Cases\"}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":933,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1147,"value":"md`\n ### ${type === \"deaths\" ? \"Daily deaths\" : \"Daily confirmed cases\"}\n\n*The blue line is a 5 day moving average*\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1064,"value":"viewof r = radio({\n title: 'Scale',\n description: 'Select scale to use',\n options: [\n { label: 'same', value: 'dependent' },\n { label: 'independent', value: 'independent' }\n ],\n value: 'dependent'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":981,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":1187,"value":"md`\n
\n\n
\n
\n\n## Appendix\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1060,"value":"function movingAverage(values, N) {\n let i = 0;\n let sum = 0;\n const means = new Float64Array(values.length).fill(NaN);\n for (let n = Math.min(N - 1, values.length); i < n; ++i) {\n sum += values[i];\n }\n for (let n = values.length; i < n; ++i) {\n sum += values[i];\n means[i] = sum / N;\n sum -= values[i - N + 1];\n }\n return means;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1330,"value":"dailyData.filter(d => d.region === \"Island\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1104,"value":"dailyData = {\n return type === \"deaths\" ? newbcMort : bcCases;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":935,"value":"grouped = d3.group(byReg, d => d.health_region)","pinned":true,"hidden":false,"mode":"ojs"},{"id":536,"value":"byReg = {\n let data;\n type === \"deaths\" ? (data = newbcMort) : (data = bcCases);\n const out = [];\n const byRegion = d3.groups(data, d => d.health_region);\n byRegion.forEach(r => {\n r[1].forEach((d, i) => {\n // dates.forEach(date => {});\n console.log(d);\n if (d.health_region === \"Island\") {\n d.region = \"Vancouver Island\";\n d.health_region = \"Vancouver Island\";\n }\n d.date = dateParser(d.date_report);\n type === \"deaths\"\n ? (d.cum_death = +d.cumulative_deaths)\n : (d.cum_death = d.cumulative_cases);\n });\n r[1] = r[1].filter(dd => dd.date <= date);\n // console.log(r);\n out.push(r[1]);\n });\n return out.flat();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1450,"value":"byReg[200]","pinned":true,"hidden":false,"mode":"ojs"},{"id":948,"value":"provsWithData = Array.from(grouped.keys())","pinned":true,"hidden":false,"mode":"ojs"},{"id":759,"value":"byRegAll = {\n let data;\n type === \"deaths\" ? (data = newbcMort) : (data = bcCases);\n const out = [];\n const byRegion = d3.groups(data, d => d.health_region);\n byRegion.forEach(r => {\n r[1].forEach((d, i) => {\n if (d.region === \"Island\") {\n d.region = \"Vancouver Island\";\n d.health_region = \"Vancouver Island\";\n }\n d.date = dateParser(d.date_report);\n type === \"deaths\"\n ? (d.cum_death = +d.cumulative_deaths)\n : (d.cum_death = d.cumulative_cases);\n });\n // console.log(r);\n out.push(r[1]);\n });\n return out.flat();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":998,"value":"byDate = {\n let data;\n type === \"deaths\" ? (data = newbcMort) : (data = bcCases);\n const out = [];\n const byRegion = d3.rollups(\n data,\n v => v.length,\n d => d.health_region,\n d => +dateParser(d.date_report)\n );\n // console.log(byRegion, \"regions\");\n byRegion.forEach(r => {\n r[1].forEach(rr => {\n out.push({\n region: r[0],\n total: rr[1],\n date: new Date(rr[0])\n });\n });\n\n // r[1].map((d, i) => {\n // d.date = new Date(d[0]);\n // d.total = d[1].length;\n // d.region = r[0];\n // // type === \"deaths\"\n // // ? (d.cum_death = i + 1)\n // // : (d.cum_death = d.cumulative_cases);\n // });\n // out.push(r[1]);\n });\n return out;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":724,"value":"dateParser = d3.timeParse(\"%d-%m-%Y\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1237,"value":"newbcMort = {\n const out = [];\n newMOrt\n .filter(d => d.province === \"BC\")\n .forEach(d => {\n if (d.health_region === \"Island\") {\n d.region === \"Vancouver Island\";\n d.health_region === \"Vancouver Island\";\n }\n // d.region = d.health_region;\n d.total = d.deaths;\n out.push(d);\n });\n return out;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1245,"value":"newMOrt[100]","pinned":true,"hidden":false,"mode":"ojs"},{"id":892,"value":"bcCases = {\n const out = [];\n cases\n .filter(d => d.province === \"BC\")\n .forEach(d => {\n if (d.health_region === \"Island\") {\n d.region = \"Vancouver Island\";\n d.health_region = \"Vancouver Island\";\n }\n // d.region = d.health_region;\n d.total = d.cases;\n out.push(d);\n });\n return out;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":188,"value":"function moveLabels(countries, proj = null) {\n countries.forEach(c => {\n [c.x, c.y] = [c.latlon[0], c.latlon[1]]; //= proj ? proj([c.lon, c.lat]) : [c.x0, c.y0];\n c.r = 24;\n });\n // console.log(countries);\n\n const force = d3\n .forceSimulation()\n .force(\"x\", d3.forceX(d => d.x))\n .force(\"y\", d3.forceY(d => d.y))\n .force(\n \"collide\",\n d3\n .forceCollide()\n .radius(d => d.r)\n .iterations(2)\n )\n .nodes(countries)\n .stop()\n .tick(15);\n\n return countries;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"number = d3.format(\",d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"colour = d3\n .scaleSequential()\n .domain([0, d3.max(byRegAll, d => d.cum_death)])\n .interpolator(d3.interpolateHsl(d3.rgb('#fff7ec'), d3.rgb(\"#7f0000\")))\n .unknown(\"#ccc\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":380,"value":"dates = Array.from(\n {\n length: d3.timeDay.range(new Date(2020, 1, 1), new Date(), 1).length\n },\n (_, i) => {\n const date = new Date(2020, 1, 1);\n date.setDate(i + 1);\n return date;\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"path = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"// projection = d3.geoEqualEarth()\nprojection = d3.geoAlbers().rotate([126, -10])","pinned":false,"hidden":false,"mode":"ojs"},{"id":267,"value":"bc = topojson.feature(bcTOP, bcTOP.objects.BCHA_HEALTH_AUTHORITY_BNDRY_SP)\n .features","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"bcTOP = FileAttachment(\"BCHA_HEALTH_AUTHORITY_BNDRY_SP_TOPO.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require(\"d3@5\", \"d3-array@2\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":167,"value":"import { legend } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"import { last } from \"@mbrownshoes/covid-19-forecasting\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":338,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":610,"value":"d3Tip = require(\"d3-tip\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":336,"value":"import { us } from \"@d3/choropleth\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":848,"value":"import { select, radio } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":946,"value":"import { array } from '@makio135/utilities'","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"topojson = require('topojson')","pinned":true,"hidden":false,"mode":"ojs"},{"id":493,"value":"mortality = d3.csv(\n \"https://raw.githubusercontent.com/ishaberry/Covid19Canada/master/mortality.csv\",\n d3.autoType,\n d => {\n d.date_report = d.date_death_report;\n return d;\n }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1232,"value":"newMOrt = d3.csv(\n \"https://raw.githubusercontent.com/ishaberry/Covid19Canada/master/timeseries_hr/mortality_timeseries_hr.csv\",\n d3.autoType,\n d => {\n d.date_report = d.date_death_report;\n return d;\n }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":877,"value":"cases = d3.csv(\n \"https://raw.githubusercontent.com/ishaberry/Covid19Canada/master/timeseries_hr/cases_timeseries_hr.csv\",\n d3.autoType\n \n)","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}