31:Tc65,chart = { const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, 960, 660]) .attr("class", "canada"); const path = d3.geoPath(); svg .append("g") .selectAll("path") .data(topojson.feature(canada, canada.objects.prov).features) .enter() .append("path") .attr("fill", d => "#f4f4f4") .attr("d", path) .attr("stroke", "#999") .append("title"); svg .append("path") .datum(topojson.mesh(canada, canada.objects.prov, (a, b) => a !== b)) .attr("fill", "none") .attr("stroke", "#999") .attr("stroke-linejoin", "round") .attr("d", path); 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.value)} `; }); svg.call(tip); /// Bubbles svg .append("g") .attr("fill-opacity", 0.5) .attr("stroke", "#fff") .attr("stroke-width", 0.5) .selectAll("circle") .data( topojson .feature(canada, canada.objects.prov) .features.map(d => { let v = bubdata[d.properties.province]; v === undefined ? (v = 0) : v; return (d.value = v), d; }) .sort((a, b) => b.value - a.value) ) .join("circle") .attr("transform", d => `translate(${path.centroid(d)})`) .attr("r", d => radius(d.value)) .attr("class", "bubble") .attr("fill", d => colorScale(d.value)) .on('mouseover', function(d) { // console.log(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); }) .append("title") .text(d => { console.log(d); return `${d.properties.province} ${d.value}`; }); const legend = svg .append("g") .attr("class", "legend") .attr("fill", "#ddd") .attr("transform", `translate(${[660, 200]})`); legend .append("text") .attr("class", "legend-title") .text(() => type === "death" ? "No. of confirmed deaths" : "No. of confirmed cases" ) .attr("dy", -maxRadius * 2.9); const legendBubbles = legend .selectAll("g") .data(legendRadii) .join("g"); // console.log(legendBubbles, legendBubbles.data()); let margin = 0; legendBubbles .attr("transform", (d, i) => { margin += i === 0 ? 0 : radius(legendBubbles.data()[i - 1]) * 2 + 15; return `translate(${margin + radius(d)},0)`; }) .append("circle") .attr("class", "legend-bubble") .attr("fill", d => colorScale(d)) .attr("cy", d => -radius(d)) .attr("r", radius); legendBubbles .append("text") .attr("dy", "1.3em") .text(d3.format(",")); return svg.node(); }32:T1f54,chart1 = { 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 wrapper = svg .append("g") .attr( "transform", `translate(${dimensions.margin.left}, ${dimensions.margin.top})` ); let yScale; if (type === "death") { yScale = d3 .scaleLinear() .domain([0, d3.max(dataCanada, d => d.total)]) .range([dimensions.boundedHeight, 0]) .nice(); } else { yScale = d3 .scaleLog() .domain([1, d3.max(dataCanada, d => d.total)]) .range([dimensions.boundedHeight, 0]) .nice(); } const xScale = d3 .scaleUtc() .domain(d3.extent(dataCanada, 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]) } ]; 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(); // } 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).total); 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() .x(d => { return xScale(d.date); }) // .y0(yScale(1)) .y(d => { return yScale(d["total"]); }); const AreaGenerator = d3 .area() .x(d => { return xScale(d.date); }) .y0(yScale(1)) .y1(d => { return yScale(d["total"]); }); 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(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(); }33:T2610,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 wrapper = svg .append("g") .attr( "transform", `translate(${dimensions.margin.left}, ${dimensions.margin.top})` ); let yScale; if (type === "death") { yScale = d3 .scaleLinear() .domain([0, d3.max(dataCanada, d => d.cases)]) .range([dimensions.boundedHeight, 0]) .nice(); } else { yScale = d3 .scaleLinear() .domain([0, d3.max(dataCanada, d => d.cases)]) .range([dimensions.boundedHeight, 0]) .nice(); } const xScale = d3 .scaleUtc() .domain(d3.extent(dataCanada, 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: grouped .get(provsWithData[i]) .filter(d => d.date > new Date("2020-03-01")) } ]; console.log(data[0]); // 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.cases), 7); if (type === "death" && r === "independent") { yScale = d3 .scaleLinear() .domain([0, d3.max(data[0].data, d => d.cases)]) .range([dimensions.boundedHeight, 0]) .nice(); } else if (type !== "death" && r === "independent") { yScale = d3 .scaleLinear() .domain([0, d3.max(data[0].data, d => d.cases)]) .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, "~d"]); const xAxisGenerator = d3.axisBottom().scale(xScale); // Draw data // const areas = bounds.append("g"); const LineGenerator = d3 .line() .defined(d => !isNaN(d)) .x((d, i) => { // console.log(yScale); 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%,15%)") .attr("class", 'barz') .selectAll("rect") .data(data[0].data) .join("rect") .attr("x", d => { return xScale(d.date); }) .attr("y", d => { return yScale(d.cases); }) .attr("width", barWidth) .attr("height", d => dimensions.boundedHeight - yScale(d.cases)) .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:T8ae,{ const dimensions = { width: width, height: height, margin: { top: 10, right: 80, bottom: 50, left: 50 } }; const data = mortData.filter(d => d.age !== "Not Reported"); dimensions.boundedWidth = dimensions.width - dimensions.margin.left - dimensions.margin.right; dimensions.boundedHeight = dimensions.height - dimensions.margin.top - dimensions.margin.bottom; const svg = d3.select(DOM.svg(width, height)); const bounds = svg .append("g") .attr( "transform", `translate(${dimensions.margin.left}, ${dimensions.margin.top})` ); const metricAccessor = d => d.age; const xScale = d3 .scaleBand() .domain(d3.range(data.length)) .range([0, dimensions.boundedWidth]) .padding(0.1); // .nice(); const yScale = d3 .scaleLinear() .domain([0, d3.max(data, d => d.value)]) .range([dimensions.boundedHeight, 0]); const xAxis = g => g .attr("transform", `translate(0,${dimensions.boundedHeight})`) .call( d3 .axisBottom(xScale) .tickFormat(i => data[i].age) .tickSizeOuter(0) ) .style("opacity", 0.5) .call(g => g .append("text") .attr("x", dimensions.boundedWidth - 10) .attr("y", dimensions.margin.bottom - 4) .attr("fill", "currentColor") .attr("text-anchor", "end") .text("Age") ); const yAxis = g => g .call(d3.axisLeft(yScale)) .call(g => g.select(".domain").remove()) .style("opacity", 0.5) .call(g => g .append("text") .attr("x", -30) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text("↑ Deaths") ); bounds .append("g") .attr("fill", "steelblue") .selectAll("rect") .data(data) .join("rect") .attr("x", (d, i) => xScale(i)) .attr("y", d => { return yScale(d.value); }) .attr("height", d => dimensions.boundedHeight - yScale(d.value)) .attr("width", xScale.bandwidth()); bounds.append("g").call(xAxis); bounds.append("g").call(yAxis); return svg.node(); }35:T918,function renderChart(province) { // const color = d3.scaleOrdinal(grouped.get(province), d3.schemeCategory10); if (grouped.get(province)) { const data = [ { province: province, color: "steelblue", data: grouped.get(province) } ]; // make chart here const margin = { l: 5, r: 9 }; const height = 250; const card = d3.select(this); let svg = card.selectAll('svg.testing').data([null]); svg = svg .enter() .append('svg') .attr('class', 'testing') .attr('width', cardW) .style('height', `${height + 40}px`) .style('display', 'block'); svg .append("defs") .append("clipPath") .attr("id", "bounds-clip-path") .append("rect") .attr("width", cardW) .attr("height", `${height + 40}px`); const clip = svg.append("g").attr("clip-path", "url(#bounds-clip-path)"); const xScale = d3 .scaleUtc() .domain([new Date("2020-02-01"), new Date("2020-09-01")]) .range([margin.l, cardW - margin.l - margin.r]) .nice(); const yScale = d3 .scaleLog() .domain([1, d3.max(data[0].data, d => d["total"])]) .range([height, 15]) .nice(); const yAxisGenerator = d3 .axisLeft() .scale(yScale) .ticks(...[6, "~s"]); const xAxisGenerator = d3.axisBottom().scale(xScale); // const areaGenerator = d3 // .area() // .x(d => { // return xScale(d.date); // }) // .y(d => { // return yScale(d["lo_0_8_intensity"]); // }) // .y1(d => { // return yScale(d["hi_0_8_intensity"]); // }); // Draw data // const areas = bounds.append("g"); const lineGenerator = d3 .line() .x(d => { return xScale(d.date); }) .y(d => { return yScale(d["total"]); }); clip.append("path").attr("class", "line"); const line = clip .attr("class", "line") .append("g") .selectAll(".line") .data(data) .enter() .append("path") .attr("d", d => { // console.log(d.color); return lineGenerator(d.data); }) .style("fill", "none") .style("stroke", d => d.color) .style("stroke-width", 2) .style("stroke-linejoin", "round"); } }36:[] 2f:{"title":"COVID-19 in Canada","cells":[{"id":0,"value":"md`# COVID-19 in Canada\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":541,"value":"viewof type = select({\n options: [\"death\", \"confirmed\"],\n description: \"\",\n title: \"View data for\",\n selectStyle: {\n background: 'lightblue'\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1377,"value":"md`\n

Data as of ${d3.timeFormat('%B %d, %Y')(\n d3.max(databyday, d => d.date)\n)}\n
${\n type === \"death\" ? \"Total deaths\" : \"Total confirmed cases\"\n}
\n
${d3.format(\n \",d\"\n)(canadaTot)}
\n
\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2980,"value":"viewof date = Scrubber(dates, {\n autoplay: false,\n format: date => date.toLocaleString(\"en\", { month: \"long\", day: \"numeric\" }),\n // delay: 10,\n loop: false,\n initial: dates.length - 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":911,"value":"md`\n### ${type === \"death\" ? \"Cumulative Deaths\" : \"Cumulative Confirmed Cases\"}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1982,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1758,"value":"md`\n ### ${type === \"death\" ? \"Daily deaths\" : \"Daily confirmed cases\"}\n\n*The blue line is a 7 day moving average*\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2915,"value":"viewof r = radio({\n title: 'Scale',\n options: [\n { label: 'dependent', value: 'dependent' },\n { label: 'independent', value: 'independent' }\n ],\n value: 'dependent'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2681,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1574,"value":"md`\n
\n
\n### Deaths by age group\n*When reported, though for the vast majority of deaths (${\n last(mortData.filter(d => d.age === \"Not Reported\")).value\n}) in this dataset, the age was not reported.*\n\n*Data: [COVID-19 Canada Open Data Working Group](https://github.com/ishaberry/Covid19Canada)*\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1578,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":2636,"value":"md`\n
\n\n
\n
\n\n## Appendix\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1140,"value":"md`\n
\n
\n\n
\n\n
\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2362,"value":"dates = rawData\n .filter(d => d.type === type && d.country === \"Canada\")\n .map(d => d.date)\n//","pinned":false,"hidden":false,"mode":"ojs"},{"id":2786,"value":"function movingAverage(values, N) {\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":2736,"value":"tip = d3Tip()\n .attr('class', \"d3-tip\")\n .style(\"color\", \"white\")\n .style(\"background-color\", \"black\")\n .style(\"padding\", \"6px\")\n .style(\"border-radius\", \"4px\")\n .style(\"font-size\", \"12px\")\n .offset([-10, 0])\n .html(function(d) {\n // console.log(d3.format(',')(d.cases));\n return `${d3.format(',')(\n d.cases\n )}
${d3.timeFormat('%B %d, %Y')(d.date)}`;\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2684,"value":"d3Tip = require(\"d3-tip\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1895,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1986,"value":"import { array } from '@makio135/utilities'","pinned":true,"hidden":false,"mode":"ojs"},{"id":1698,"value":"mortOrder = ({\n \"20-29\": 0,\n \"30-39\": 1,\n \"40-49\": 2,\n \"50-59\": 3,\n \"60-69\": 4,\n \"70-79\": 5,\n \"80-89\": 6,\n \"90-99\": 7,\n \"100-109\": 8,\n \">50\": 9,\n \">65\": 10,\n \">70\": 11,\n \">80\": 12,\n \"Not Reported\": 13\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1919,"value":"provsWithData = Array.from(grouped.keys())","pinned":true,"hidden":false,"mode":"ojs"},{"id":1877,"value":"cardW = 189 && 200","pinned":true,"hidden":false,"mode":"ojs"},{"id":1612,"value":"mortData = {\n const out = [];\n const asArr = Array.from(\n d3.group(mortality, d => {\n if ((d.age >= 80) & (d.age <= 89)) {\n d.age = \"80-89\";\n } else if ((d.age >= 90) & (d.age <= 99)) {\n d.age = \"90-99\";\n } else if ((d.age >= 100) & (d.age <= 109)) {\n d.age = \"100-109\";\n } else if ((d.age >= 60) & (d.age <= 69)) {\n d.age = \"60-69\";\n } else if ((d.age >= 50) & (d.age <= 59)) {\n d.age = \"50-59\";\n } else if ((d.age >= 40) & (d.age <= 49)) {\n d.age = \"40-49\";\n } else if ((d.age >= 70) & (d.age <= 79)) {\n d.age = \"70-79\";\n }\n\n return d.age;\n })\n );\n asArr.forEach((d, i) => {\n out.push({\n order: mortOrder[d[0]],\n age: d[0],\n value: d[1].length\n });\n });\n return out.sort((a, b) => a.order - b.order);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1584,"value":"import { printTable } from '@uwdata/data-utilities'","pinned":true,"hidden":false,"mode":"ojs"},{"id":775,"value":"{\n const c = `rgb(255, 255, 255, 0.5)`;\n return html``;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1563,"value":"mortality = d3.csv(\n \"https://raw.githubusercontent.com/ishaberry/Covid19Canada/master/mortality.csv\",\n d3.autoType\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1307,"value":"combined = {\n return { series: ratesofchange, dates: databyday.map(d => d.date) };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1157,"value":"ratesofchange = {\n let out = [];\n let baseValue = 0;\n let name;\n provinces.forEach((p, ip) => {\n let provArr = databyday.map(d => d[p]);\n let rc = rateofchange(provArr);\n // console.log(rc);\n out.push({ name: p, values: rc });\n });\n return out;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1251,"value":"function rateofchange(on) {\n // calc % change\n const out = [];\n for (let i = 0; i < on.length - 1; i++) {\n out.push(((on[i + 1] - on[i]) / on[i]) * 100);\n }\n\n return out.map(d => {\n return isNaN(d) || d == \"Infinity\" ? 0 : d;\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3104,"value":"last(databyday)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1351,"value":"canadaTot = {\n let tot = 0;\n Object.keys(last(databyday)).forEach(k => {\n provinces.includes(k) ? (tot += last(databyday)[k]) : tot;\n });\n return tot;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":768,"value":"colorScale = d3\n .scaleSqrt()\n .domain([0, maxCases])\n .range([`hsla(57, 100%, 50%, 0.36)`, `hsla(7, 100%, 50%, 0.57)`])","pinned":false,"hidden":false,"mode":"ojs"},{"id":743,"value":"legendRadii = type === \"death\" ? [10, 100, 500, 1000] : [10, 100, 5000, 20000]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1018,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":748,"value":"maxLegend = Math.round(maxCases / magnitude) * magnitude","pinned":false,"hidden":false,"mode":"ojs"},{"id":703,"value":"magnitude = toMagnitude(maxCases)","pinned":false,"hidden":false,"mode":"ojs"},{"id":705,"value":"maxCases = d3.sum(Object.values(last(databydayAll)).slice(1))","pinned":true,"hidden":false,"mode":"ojs"},{"id":3017,"value":"recentData = dataCanadaAll[dataCanadaAll.length - 1]","pinned":true,"hidden":false,"mode":"ojs"},{"id":700,"value":"function toMagnitude(n) {\n var order = Math.floor(Math.log(n) / Math.LN10 + 0.000000001);\n return Math.pow(10, order);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":641,"value":"maxRadius = 50","pinned":true,"hidden":false,"mode":"ojs"},{"id":609,"value":"radius = d3\n .scaleSqrt()\n .domain([0, maxCases])\n .range([0, maxRadius])","pinned":true,"hidden":false,"mode":"ojs"},{"id":574,"value":"topojson.feature(canada, canada.objects.prov).features.map(d => {\n let v = bubdata[\"Canada:\" + d.properties.province];\n v === undefined ? (v = 0) : v;\n return (d.value = v), d;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":567,"value":"last = array => array[array.length - 1]","pinned":false,"hidden":false,"mode":"ojs"},{"id":569,"value":"bubdata = last(databyday)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1839,"value":"grouped = d3.group(dataCanada.filter(d => d.type === type), d => d.province)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1871,"value":"smData = Array.from(grouped)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3047,"value":"dataCanadaAll","pinned":true,"hidden":false,"mode":"ojs"},{"id":3049,"value":"d3.rollups(\n dataCanadaAll.filter(d => d.type === type),\n v => {\n const o = {};\n provinces.forEach(p => (o[p] = 0));\n v.forEach(d => (o[d.province] = d.total));\n return o;\n },\n d => d.ymd\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":535,"value":"databydayAll = {\n const rollups = d3\n .rollups(\n dataCanadaAll.filter(d => d.type === type),\n v => {\n const o = {};\n provinces.forEach(p => (o[p] = 0));\n v.forEach(d => (o[d.province] = d.total));\n return o;\n },\n d => d.ymd\n )\n .map(d => ({ date: parseDateYMD(d[0]), ...d[1] }))\n .filter(d => d.date > new Date(\"2020-02-29\"));\n\n const last = rollups[rollups.length - 1];\n\n return Object.assign(rollups, {\n columns: [...Object.keys(last)].sort((a, b) =>\n d3.descending(last[a], last[b])\n ),\n y: `Cumulative ${type} cases of covid-19 infection, by province`\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3045,"value":"dataCanadaAll","pinned":true,"hidden":false,"mode":"ojs"},{"id":3031,"value":"databyday = databydayAll.filter(d => d.date <= date)","pinned":true,"hidden":false,"mode":"ojs"},{"id":537,"value":"parseDateYMD = d3.timeParse(\"%Y-%m-%d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":531,"value":"provinces = {\n const p = d3.groups(dataCanada, d => d.province).map(d => d[0]);\n p.splice(p.indexOf(\"Diamond Princess\"), 1);\n p.splice(p.indexOf(\"Grand Princess\"), 1);\n // const n = p.map(d => d.slice(7));\n return p;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":518,"value":"dataCanadaAll = rawData\n .filter(\n d =>\n d.type === type &&\n d.country === \"Canada\" &&\n d.province_name !== \"\" &&\n d.province_name !== \"Diamond Princess\" &&\n d.province_name !== \"Grand Princess\"\n // &&\n // d.date <= date\n )\n .map(d => {\n d.province = d.province_name;\n return d;\n })\n// .filter(d => d.province === \"New Brunswick\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":2494,"value":"dataCanada = dataCanadaAll.filter(d => d.date <= date)","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"import { data as rawData } from \"@fil/ncov2019-data\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"canada = d3.json(\"https://raw.githubusercontent.com/Mbrownshoes/energyeast/master/can.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":549,"value":"color = d3\n .scaleOrdinal()\n .domain(provinces)\n .range(d3.schemeTableau10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":870,"value":"h = 300","pinned":false,"hidden":false,"mode":"ojs"},{"id":1505,"value":"databyday","pinned":true,"hidden":false,"mode":"ojs"},{"id":524,"value":"// import { chart as stackChart } with {\n// databyday as data,\n// color,\n// h as height\n// } from \"@d3/stacked-area-chart\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":3,"value":"d3 = require(\"d3@5\", \"d3-array@2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":544,"value":"import { radio } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":3122,"value":"import { select } from '@bartok32/diy-inputs'","pinned":true,"hidden":false,"mode":"ojs"},{"id":2978,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":297,"value":" html``\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":895,"value":"import { vl } from \"@vega/vega-lite-api\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}