31:T473, together_now = { let div = d3 .create("div") .style("position", "relative") .style("height", "400px"); let slider = div .append("div") .style("width", "150px") .style("position", "relative") .style("top", "0px") .style("left", "0px"); slider.append(() => viewof dateSlider2); let myselect = div .append("div") .style("width", "150px") .style("position", "relative") .style("top", "0px") .style("left", "0px"); myselect.append(() => viewof mySelect); let mybutton = div .append("div") .style("width", "150px") .style("position", "relative") .style("top", "0px") .style("left", "0px"); mybutton.append(() => viewof fancy); if(fancy == true){ let legend = div .append("div") .style("position", "absolute") .style("top", "85px") .style("left", "0px"); legend.append(() => viewof selections); } if(fancy == false){ let legend = div .append("div") .style("position", "absolute") .style("top", "85px") .style("left", "0px"); legend.append(() => viewof disc); } return div.node(); }32:T9d0,viewof disc = { const svg = d3.create('svg') .attr('width', 450) .attr('height', 235 ); svg.append('text') .attr('font-size', "20") .attr('y', 20) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text("Disclaimer:"); svg.append('text') .attr('font-size', "15") .attr('y', 40) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text("This dashboard was created"); svg.append('text') .attr('font-size', "15") .attr('y', 55) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text("for the purpose of"); svg.append('text') .attr('font-size', "15") .attr('y', 70) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text("highlighting the impact of"); svg.append('text') .attr('font-size', "15") .attr('y', 85) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text("Covid-19 on Canadians and"); svg.append('text') .attr('font-size', "15") .attr('y', 100) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text("certain mental health statistics."); svg.append('text') .attr('font-size', "15") .attr('y', 115) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text("This was a project for the"); svg.append('text') .attr('font-size', "15") .attr('y', 130) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text("University of Victoria's CSC 497."); svg.append('text') .attr('font-size', "15") .attr('y', 160) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text("For the official Covid-19"); svg.append('text') .attr('font-size', "15") .attr('y', 175) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text("dashboard of Canada:"); svg.append('text') .attr('font-size', "20") .attr('y', 195) .attr('font-family', 'sans-serif') .attr('fill', "blue") .attr('dominant-baseline', 'middle') .text("Click here!") .on("click", function() { window.open("https://health-infobase.canada.ca/covid-19/epidemiological-summary-covid-19-cases.html"); }); return svg.node() } 33:T587d,viewof text = { const Height = 160; const font = 15; const fontSize = 40; if(array[0].value === true){ const cases = all[all.length - 12].numconf - all[all.length - 27].numconf; const allcases = all[all.length - 12].numconf; const svg = d3.create('svg') .attr('width', 450) .attr('height', Height ); svg.append('text') .attr('font-size', font) .attr('y', fontSize / 2) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text("Daily Covid-19 Case count as of:"); svg.append('text') .attr('font-size', font) .attr('y', (fontSize / 2) + 15) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text(formatDate(all[all.length -1].date) + " for Manitoba"); svg.append('text') .attr('font-size', font + 15) .attr('y', ((fontSize / 2) + 45)) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text(cases); svg.append('text') .attr('font-size', font) .attr('y', ((fontSize / 2) + 80)) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text("Total Cases for Manitoba: "); svg.append('text') .attr('font-size', font + 15) .attr('y', ((fontSize / 2) + 110)) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text( allcases); return svg.node(); } else if(array[1].value == true){ const cases = all[all.length - 13].numconf - all[all.length - 28].numconf; const allcases = all[all.length - 13].numconf; const svg = d3.create('svg') .attr('width', 450) .attr('height', Height ); svg.append('text') .attr('font-size', font) .attr('y', fontSize / 2) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text("Daily Covid-19 Case count as of:"); svg.append('text') .attr('font-size', font) .attr('y', 15 + fontSize / 2) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text(formatDate(all[all.length -1].date) + " for Saskatchewan"); svg.append('text') .attr('font-size', font + 15) .attr('y', ((fontSize / 2) + 45)) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text(cases); svg.append('text') .attr('font-size', font) .attr('y', ((fontSize / 2) + 80)) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text("Total Cases for Saskatchewan: "); svg.append('text') .attr('font-size', font + 15) .attr('y', ((fontSize / 2) + 110)) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text( allcases); return svg.node(); } else if(array[2].value == true){ const cases = all[all.length - 14].numconf - all[all.length - 29].numconf; const allcases = all[all.length - 14].numconf; const svg = d3.create('svg') .attr('width', 450) .attr('height', Height ); svg.append('text') .attr('font-size', font) .attr('y', fontSize / 2) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text("Daily Covid-19 Case count as of:"); svg.append('text') .attr('font-size', font) .attr('y', 15 + fontSize / 2) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text(formatDate(all[all.length -1].date) + " for Alberta:"); svg.append('text') .attr('font-size', font + 15) .attr('y', ((fontSize / 2) + 45)) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text(cases); svg.append('text') .attr('font-size', font) .attr('y', ((fontSize / 2) + 80)) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text("Total Cases for Alberta: "); svg.append('text') .attr('font-size', font + 15) .attr('y', ((fontSize / 2) + 110)) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text( allcases); return svg.node(); } else if(array[5].value == true){ const cases = all[all.length - 4].numconf - all[all.length - 19].numconf; const allcases = all[all.length - 4].numconf; const svg = d3.create('svg') .attr('width', 450) .attr('height', Height ); svg.append('text') .attr('font-size', font) .attr('y', fontSize / 2) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text("Daily Covid-19 Case count as of:"); svg.append('text') .attr('font-size', font) .attr('y', 30 + fontSize / 3) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text(formatDate(all[all.length -1].date) + " for North West Territories:"); svg.append('text') .attr('font-size', font + 15) .attr('y', ((fontSize / 2) + 45)) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text(cases); svg.append('text') .attr('font-size', font) .attr('y', ((fontSize / 2) + 80)) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text("Total Cases for NWT: "); svg.append('text') .attr('font-size', font + 15) .attr('y', ((fontSize / 2) + 110)) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text( allcases); return svg.node(); } else if(array[3].value == true){ const cases = all[all.length - 15].numconf - all[all.length - 30].numconf; const allcases = all[all.length - 15].numconf; const svg = d3.create('svg') .attr('width', 450) .attr('height', Height ); svg.append('text') .attr('font-size', font) .attr('y', fontSize / 2) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text("Daily Covid-19 Case count as of:"); svg.append('text') .attr('font-size', font) .attr('y', 15 + fontSize / 2) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text(formatDate(all[all.length -1].date) + " for British Columbia:"); svg.append('text') .attr('font-size', font + 15) .attr('y', ((fontSize / 2) + 45)) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text(cases); svg.append('text') .attr('font-size', font) .attr('y', ((fontSize / 2) + 80)) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text("Total Cases for British Columbia: "); svg.append('text') .attr('font-size', font + 15) .attr('y', ((fontSize / 2) + 110)) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text( allcases); return svg.node(); } else if(array[4].value == true){ const cases = all[all.length - 3].numconf - all[all.length - 18].numconf; const allcases = all[all.length - 3].numconf; const svg = d3.create('svg') .attr('width', 450) .attr('height', Height ); svg.append('text') .attr('font-size', font) .attr('y', fontSize / 2) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text("Daily Covid-19 Case count as of:"); svg.append('text') .attr('font-size', font) .attr('y', 15 + fontSize / 2) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text(formatDate(all[all.length -1].date) + " for Nunavut:"); svg.append('text') .attr('font-size', font + 15) .attr('y', ((fontSize / 2) + 45)) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text(cases); svg.append('text') .attr('font-size', font) .attr('y', ((fontSize / 2) + 80)) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text("Total Cases for Nunavut: "); svg.append('text') .attr('font-size', font + 15) .attr('y', ((fontSize / 2) + 110)) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text( allcases); return svg.node(); } else if(array[6].value == true){ const cases = all[all.length - 4].numconf - all[all.length - 19].numconf; const allcases = all[all.length - 4].numconf; const svg = d3.create('svg') .attr('width', 450) .attr('height', Height ); svg.append('text') .attr('font-size', font) .attr('y', fontSize / 2) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text("Daily Covid-19 Case count as of:"); svg.append('text') .attr('font-size', font) .attr('y', 15 + fontSize / 2) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text(formatDate(all[all.length -1].date) + " for Yukon:"); svg.append('text') .attr('font-size', font + 15) .attr('y', ((fontSize / 2) + 45)) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text(cases); svg.append('text') .attr('font-size', font) .attr('y', ((fontSize / 2) + 80)) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text("Total Cases for Yukon: "); svg.append('text') .attr('font-size', font + 15) .attr('y', ((fontSize / 2) + 110)) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text( allcases); return svg.node(); } else if(array[7].value == true){ const cases = all[all.length - 11].numconf - all[all.length - 26].numconf; const allcases = all[all.length - 11].numconf; const svg = d3.create('svg') .attr('width', 450) .attr('height', Height ); svg.append('text') .attr('font-size', font) .attr('y', fontSize / 2) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text("Daily Covid-19 Case count as of:"); svg.append('text') .attr('font-size', font) .attr('y', 15 + fontSize / 2) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text(formatDate(all[all.length -1].date) + " for Ontario:"); svg.append('text') .attr('font-size', font + 15) .attr('y', ((fontSize / 2) + 45)) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text(cases); svg.append('text') .attr('font-size', font) .attr('y', ((fontSize / 2) + 80)) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text("Total Cases for Ontario: "); svg.append('text') .attr('font-size', font + 15) .attr('y', ((fontSize / 2) + 110)) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text( allcases); return svg.node(); } else if(array[8].value == true){ const cases = all[all.length - 10].numconf - all[all.length - 25].numconf; const allcases = all[all.length - 10].numconf; const svg = d3.create('svg') .attr('width', 450) .attr('height', Height ); svg.append('text') .attr('font-size', font) .attr('y', fontSize / 2) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text("Daily Covid-19 Case count as of:"); svg.append('text') .attr('font-size', font) .attr('y', 15 + fontSize / 2) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text(formatDate(all[all.length -1].date) + " for Quebec:"); svg.append('text') .attr('font-size', font + 15) .attr('y', ((fontSize / 2) + 45)) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text(cases); svg.append('text') .attr('font-size', font) .attr('y', ((fontSize / 2) + 80)) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text("Total Cases for Quebec: "); svg.append('text') .attr('font-size', font + 15) .attr('y', ((fontSize / 2) + 110)) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text( allcases); return svg.node(); } else if(array[9].value == true){ const cases = all[all.length - 8].numconf - all[all.length - 23].numconf; const allcases = all[all.length - 8].numconf; const svg = d3.create('svg') .attr('width', 450) .attr('height', Height ); svg.append('text') .attr('font-size', font) .attr('y', fontSize / 2) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text("Daily Covid-19 Case count as of:"); svg.append('text') .attr('font-size', font) .attr('y', 15 + fontSize / 2) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text(formatDate(all[all.length -1].date) + " for New Brunswick:"); svg.append('text') .attr('font-size', font + 15) .attr('y', ((fontSize / 2) + 45)) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text(cases); svg.append('text') .attr('font-size', font) .attr('y', ((fontSize / 2) + 80)) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text("Total Cases for New Brunswick: "); svg.append('text') .attr('font-size', font + 15) .attr('y', ((fontSize / 2) + 110)) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text( allcases); return svg.node(); } else if(array[10].value == true){ const cases = all[all.length - 7].numconf - all[all.length - 22].numconf; const allcases = all[all.length - 7].numconf; const svg = d3.create('svg') .attr('width', 450) .attr('height', Height ); svg.append('text') .attr('font-size', font) .attr('y', fontSize / 2) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text("Daily Covid-19 Case count as of:"); svg.append('text') .attr('font-size', font) .attr('y', 15 + fontSize / 2) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text(formatDate(all[all.length -1].date) + " for Nova Scotia:"); svg.append('text') .attr('font-size', font + 15) .attr('y', ((fontSize / 2) + 45)) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text(cases); svg.append('text') .attr('font-size', font) .attr('y', ((fontSize / 2) + 80)) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text("Total Cases for Nova Scotia: "); svg.append('text') .attr('font-size', font + 15) .attr('y', ((fontSize / 2) + 110)) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text( allcases); return svg.node(); } else if(array[11].value == true){ const cases = all[all.length - 9].numconf - all[all.length - 24].numconf; const allcases = all[all.length - 9].numconf; const svg = d3.create('svg') .attr('width', 450) .attr('height', Height ); svg.append('text') .attr('font-size', font) .attr('y', 15 + fontSize / 2) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text("Daily Covid-19 Case count as of:"); svg.append('text') .attr('font-size', font) .attr('y', fontSize / 2) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text(formatDate(all[all.length -1].date) + " for Newfoundland:"); svg.append('text') .attr('font-size', font + 15) .attr('y', ((fontSize / 2) + 45)) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text(cases); svg.append('text') .attr('font-size', font) .attr('y', ((fontSize / 2) + 80)) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text("Total Cases for Newfoundland: "); svg.append('text') .attr('font-size', font + 15) .attr('y', ((fontSize / 2) + 110)) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text( allcases); return svg.node(); } else if(array[12].value == true){ const cases = all[all.length - 6].numconf - all[all.length - 21].numconf; const allcases = all[all.length - 6].numconf; const svg = d3.create('svg') .attr('width', 450) .attr('height', Height ); svg.append('text') .attr('font-size', font) .attr('y', fontSize / 2) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text("Daily Covid-19 Case count as of:"); svg.append('text') .attr('font-size', font) .attr('y', 15 + fontSize / 2) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text(formatDate(all[all.length -1].date) + " for PEI:"); svg.append('text') .attr('font-size', font + 15) .attr('y', ((fontSize / 2) + 45)) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text(cases); svg.append('text') .attr('font-size', font) .attr('y', ((fontSize / 2) + 80)) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text("Total Cases for Prince Edward Island: "); svg.append('text') .attr('font-size', font + 15) .attr('y', ((fontSize / 2) + 110)) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text( allcases); return svg.node(); } else if(array[7].value == true){ const cases = all[all.length - 5].numconf - all[all.length - 20].numconf; const allcases = all[all.length - 5].numconf; const svg = d3.create('svg') .attr('width', 450) .attr('height', Height ); svg.append('text') .attr('font-size', font) .attr('y', fontSize / 2) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text("Daily Covid-19 Case count as of:"); svg.append('text') .attr('font-size', font) .attr('y', 15 + (fontSize / 2)) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text(formatDate(all[all.length -1].date) + " for Yukon:"); svg.append('text') .attr('font-size', font + 15) .attr('y', ((fontSize / 2) + 45)) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text(cases); svg.append('text') .attr('font-size', font) .attr('y', ((fontSize / 2) + 80)) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text("Total Cases for Yukon: "); svg.append('text') .attr('font-size', font + 15) .attr('y', ((fontSize / 2) + 110)) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text( allcases); return svg.node(); } else if(fancy == false) { const cases = all[all.length - 1].numconf - all[all.length - 16].numconf; const allcases = all[all.length - 1].numconf; const svg = d3.create('svg') .attr('width', 450) .attr('height', Height ); svg.append('text') .attr('font-size', font) .attr('y', (fontSize / 2) + 30) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text("Daily Covid-19 Case count as of:"); svg.append('text') .attr('font-size', font) .attr('y', (fontSize / 2)+45) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text(formatDate(all[all.length -1].date) + " for Canada:"); svg.append('text') .attr('font-size', font + 15) .attr('y', ((fontSize / 2) + 70)) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text(cases); svg.append('text') .attr('font-size', font) .attr('y', ((fontSize / 2) + 97)) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text("Total Cases for Canada: "); svg.append('text') .attr('font-size', font + 15) .attr('y', ((fontSize / 2) + 125)) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text( allcases); return svg.node(); } else{ const svg = d3.create('svg') .attr('width', 450) .attr('height', Height ); let chart = svg .append("svg") .style("position", "absolute") .style("top", "0px") .style("left", "0px") .text("Fail") return svg.node(); } /* const cases = all[all.length - 1].numconf - all[all.length - 16].numconf; const allcases = all[all.length - 1].numconf; const svg = d3.create('svg') .attr('width', 450) .attr('height', Height ); svg.append('text') .attr('font-size', font) .attr('y', fontSize / 2) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text("Total Cases today for Canada: "); svg.append('text') .attr('font-size', font + 15) .attr('y', ((fontSize / 2) + 30)) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text(cases); svg.append('text') .attr('font-size', font) .attr('y', ((fontSize / 2) + 65)) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text("Total Cases for Canada: "); svg.append('text') .attr('font-size', font + 15) .attr('y', ((fontSize / 2) + 95)) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text( allcases); return svg.node(); */ }34:T1546,viewof title = { const Height = 50; const width = 800; const font = 40; const fontSize = 40; if(array[0].value === true){ const svg = d3.create('svg') .attr('width', width) .attr('height', Height ); svg.append('text') .attr('font-size', font) .attr('y', fontSize / 2) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text("Covid-19 Dashboard: Manitoba"); return svg.node(); } else if(array[1].value == true){ const svg = d3.create('svg') .attr('width', width) .attr('height', Height ); svg.append('text') .attr('font-size', font) .attr('y', fontSize / 2) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text("Covid-19 Dashboard: Saskatchewan"); return svg.node(); } else if(array[2].value == true){ const svg = d3.create('svg') .attr('width', width) .attr('height', Height ); svg.append('text') .attr('font-size', font) .attr('y', fontSize / 2) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text("Covid-19 Dashboard: Alberta"); return svg.node(); } else if(array[5].value == true){ const svg = d3.create('svg') .attr('width', width) .attr('height', Height ); svg.append('text') .attr('font-size', font) .attr('y', fontSize / 2) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text("Covid-19 Dashboard: Northwest Territories"); return svg.node(); } else if(array[3].value == true){ const svg = d3.create('svg') .attr('width', width) .attr('height', Height ); svg.append('text') .attr('font-size', font) .attr('y', fontSize / 2) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text("Covid-19 Dashboard: British Columbia"); return svg.node(); } else if(array[4].value == true){ const svg = d3.create('svg') .attr('width', width) .attr('height', Height ); svg.append('text') .attr('font-size', font) .attr('y', fontSize / 2) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text("Covid-19 Dashboard: Nunavut"); return svg.node(); } else if(array[6].value == true){ const svg = d3.create('svg') .attr('width', width) .attr('height', Height ); svg.append('text') .attr('font-size', font) .attr('y', fontSize / 2) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text("Covid-19 Dashboard: Yukon"); return svg.node(); } else if(array[7].value == true){ const svg = d3.create('svg') .attr('width', width) .attr('height', Height ); svg.append('text') .attr('font-size', font) .attr('y', fontSize / 2) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text("Covid-19 Dashboard: Ontario"); return svg.node(); } else if(array[8].value == true){ const svg = d3.create('svg') .attr('width', width) .attr('height', Height ); svg.append('text') .attr('font-size', font) .attr('y', fontSize / 2) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text("Covid-19 Dashboard: Quebec"); return svg.node(); } else if(array[9].value == true){ const svg = d3.create('svg') .attr('width', width) .attr('height', Height ); svg.append('text') .attr('font-size', font) .attr('y', fontSize / 2) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text("Covid-19 Dashboard: New Brunswick"); return svg.node(); } else if(array[10].value == true){ const svg = d3.create('svg') .attr('width', width) .attr('height', Height ); svg.append('text') .attr('font-size', font) .attr('y', fontSize / 2) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text("Covid-19 Dashboard: Nova Scotia"); return svg.node(); } else if(array[11].value == true){ const svg = d3.create('svg') .attr('width', width) .attr('height', Height ); svg.append('text') .attr('font-size', font) .attr('y', fontSize / 2) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text("Covid-19 Dashboard: Newfoundland"); return svg.node(); } else if(array[12].value == true){ const svg = d3.create('svg') .attr('width', width) .attr('height', Height ); svg.append('text') .attr('font-size', font) .attr('y', fontSize / 2) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .text("Covid-19 Dashboard: Prince Edward Island"); return svg.node(); } else{ const svg = d3.create('svg') .attr('width', width) .attr('height', Height ); svg.append('text') .attr('font-size', font) .attr('y', fontSize / 2) .attr('font-family', 'sans-serif') .attr('fill', '#484848') .attr('dominant-baseline', 'middle') .text("Covid-19 Dashboard: Canada"); return svg.node(); return svg.node(); } }35:T25ff, viewof chart = { //sources if(fancy == false){ /* chart https://observablehq.com/@d3/zoom-to-bounding-box https://observablehq.com/@d3/choropleth?collection=@observablehq/maps https://observablehq.com/@yu-frank/choropleth-and-surprise-map-for-canada https://observablehq.com/@odunayo12/nigerian-population data https://health-infobase.canada.ca/covid-19/epidemiological-summary-covid-19-cases.html https://gist.github.com/Brideau/2391df60938462571ca9 */ const width = 575; const height = 450; const data = topojson.feature(canada , canada.objects.canadaprov).features ; const zoom = d3.zoom() .scaleExtent([1, 8]) .on("zoom", zoomed); //create the main svg 'canvas' const svg = d3.create("svg") .attr("viewBox", [100, 250, width, height]) .style('background-color', "white") .on("click", reset) //.on("dblclick", fullscreen.click()); svg .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", width + 500) .attr("height", height + 200) .style('fill', "white") .attr('filter', 'url(#border-blur2)'); var defs = svg.append("defs"); const filter = defs .append('filter') .attr('id', 'border-blur') .append('feGaussianBlur') .attr('in', 'SourceGraphic') .attr('stdDeviation', 10) .attr('result', 'shadow'); const filter2 = defs .append('filter') .attr('id', 'border-blur2') .append('feGaussianBlur') .attr('in', 'SourceGraphic') .attr('stdDeviation', 50) .attr('result', 'shadow'); svg .append("g") .append("path") .datum(graticule) .attr("class", "graticule") .attr("d", path) .attr("clip-path", "url(#clip)") .style('fill', "none") .style('stroke', "white") .style('stroke-width', .5) .style('stroke-opacity', .4) .style('stroke-dasharray', 0.5); // const water = svg.append("rect") // .attr("x", 0).attr("y", 0).attr("width",width).attr("height", height + 200).attr("fill", "aliceblue") const g = svg.append("g"); //draw the provinces and give them events when clicked const prov = g.append("g") .attr("cursor", "pointer") .selectAll("path") .data(data) .join("path") .attr("class","provinces" ) .attr("fill", d => color( datevalues[dateSlider2][1].get(d.properties.name)? datevalues[dateSlider2][1].get(d.properties.name):0)) .on("click", clicked) .attr('opacity', 1) .attr("d", path) .on("mouseover", mouseOver ) .on("mouseleave", mouseLeave ) const Circles = g.selectAll("circle") .data(data) .join("circle") .attr("cx", d => { let x = path.centroid(d)[0]; switch (d.properties.name){ case "New Brunswick": x -=20 ; break; case "Nova Scotia": x +=20 ; break; case "Newfoundland and Labrador": x -=20 ; break; case "Nunavut": x -= 40 ; break; default: } return x; }) .attr("cy", d => { let y = path.centroid(d)[1]; switch (d.properties.name){ case "New Brunswick": y +=50 ; break; case "Nova Scotia": y +=30 ; break; case "Prince Edward Island": y -=15 ; break; case "Northwest Territories": y +=80 ; break; case "Nunavut": y += 140 ; break; default: } return y - 10; }) .attr("fill", "#36454F") .attr('opacity', 1) // .attr('r', '27') ; //label provinces using centre of path, adjust position and colour manually for some const regionsCircles = g.selectAll("provStats") .data(data) .enter() .append("svg:text") .text(d => `${d3.format(".4~s")(datevalues[dateSlider2][1].get(d.properties.name)? datevalues[dateSlider2][1].get(d.properties.name):0)} `) .attr("x", d => { let x = path.centroid(d)[0]; switch (d.properties.name){ case "New Brunswick": x -=20; break; case "Nova Scotia": x +=20 ; break; case "Newfoundland and Labrador": x -=20 ; break; case "Nunavut": x -= 40 ; break; default: } return x; }) .attr("y", d => { let y = path.centroid(d)[1]; switch (d.properties.name){ case "New Brunswick": y +=50 ; break; case "Nova Scotia": y +=30 ; break; case "Prince Edward Island": y -=15 ; break; case "Northwest Territories": y +=80 ; break; case "Nunavut": y += 140 ; break; default: } return y; }) .attr("fill", d =>( [""] .filter(p => p ===d.properties.name).length)? "#000":"#fff") .attr("text-anchor","middle") .attr('font-size','15pt') .attr('paint-order','stroke') .attr('stroke-width','2px') .attr('stroke-linecap','butt') .attr('font-weight',300) .attr('stroke','#111') ; //on hover show full stats prov.append("title") .text(d => `${d.properties.name}: ${d3.format(",")(datevalues[dateSlider2][1].get(d.properties.name)? datevalues[dateSlider2][1].get(d.properties.name):0)} ${covidStats.filter( (stat) => stat.value.key === mySelect.key)[0].label}`); //draw the border lines g.append("path") .datum(topojson.mesh(canada, canada.objects.canadaprov, (a, b) => a !== b)) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-linejoin", "round") .attr("d",path(topojson.mesh(canada, canada.objects.canadaprov, (a, b) => a !== b))); //add legend and title, increase font sizes g.append("g") .attr("transform", "translate(20,630)") .append(() => legend({color, title: `${covidStats.filter( (stat) => stat.value.key === mySelect.key)[0].label}: ${formatDate(datevalues[dateSlider2][0])}`, width: 760,height:60,tickFormat: ".1s"})) .call(g => g.selectAll(".tick text").attr("font-size", "1.75em")) .call(g => g.selectAll("g .title").attr("font-size", "4em").attr('paint-order','stroke') .attr('stroke-width','2px') .attr('stroke-linecap','butt') .attr('stroke','#fff') ); //enable zoom // svg.call(zoom); function reset() { prov.transition().style("fill", null); svg.transition().duration(750).call( zoom.transform, d3.zoomIdentity, d3.zoomTransform(svg.node()).invert([width / 2, height / 2]) ); d3.selectAll(".provinceLineChart").remove(); d3.selectAll(".provinceLabel").remove(); const selected = new Map(data.map(d => [d, false])); svg.property('value', selected).dispatch('input'); } function mouseOver(event, d) { d3.selectAll(".provinces") .transition() .duration(200) .style("opacity", .5) d3.select(this) .transition() .duration(200) .style("opacity", 1) .style("stroke", "black") .attr('stroke-width','3px') } function mouseLeave(event, d) { d3.selectAll(".provinces") .transition() .duration(200) .style("opacity", 1) .style("stroke", "transparent") } const selected = new Map(data.map(d => [d, false])); function clicked(event, d) { const selected = new Map(data.map(d => [d, false])); const isSelected = selected.get(d); event.stopPropagation(); prov.transition().style("fill", null); selected.set(d, !isSelected); d3.select(this).transition().style("fill", "blue"); svg.property('value', selected).dispatch('input'); } svg.property('value', selected).dispatch('input'); function zoomed(event) { const {transform} = event; g.attr("transform", transform); g.attr("stroke-width", 1 / transform.k); } return svg.node(); } else if(fancy == true){ /* let div = d3 .create("div") .style("position", "relative") .style("height", "500px"); let legend = div .append("div") .style("position", "absolute") .style("top", "0px") .style("width", "1500px") .style("left", "0px"); legend.append(() => all_together_now); return div.node(); */ //const svg = d3.create("svg") // .attr("height", 700) // .attr("width", 1300) const width = 1450; const height = 650; const svg = d3.create("svg") .attr("viewBox", [60, 0, width, height]) .style('background-color', "white") let chart = svg .append("svg") .style("position", "absolute") .style("top", "0px") .style("left", "150px"); if(mySelect.key == "numconf"){ chart.append(() => chart2); } else if(mySelect.key == "numrecover"){ chart.append(() => viewof numrecover); } else if(mySelect.key == "numtoday"){ chart.append(() => viewof numtoday); } else if(mySelect.key == "rateconf"){ chart.append(() => viewof numrate); } else if(mySelect.key == "numdeaths"){ chart.append(() => viewof numdeaths); } else if(mySelect.key == "deathrate"){ chart.append(() => viewof deathrate); } else if(mySelect.key == "numtests"){ chart.append(() => viewof numtests); } else if(mySelect.key == "raterecovered"){ chart.append(() => viewof raterecovered); } else if(mySelect.key == "avgtotal_last7"){ chart.append(() => viewof avgtotal_last7); } else if(mySelect.key == "numtotal_last7"){ chart.append(() => viewof numtotal_last7); } return svg.node(); } return svg.node(); } 36:T7e5,together_pie = { let div = d3 .create("div") .style("position", "relative") .style("height", "750px") let title = div .append("div") .style("position", "absolute") .style("top", "10px") .style("left", "10px"); let title2 = div .append("div") .style("position", "absolute") .style("resize", "both") .style("overflow", "auto") .style("top", "30px") .style("left", "400px"); let title3 = div .append("div") .style("position", "absolute") .style("top", "0px") .style("left", "160px"); if(array[0].value === true){ title.append(() => viewof groupbar2man); } else if(array[1].value === true){ title.append(() => viewof groupbar2sas); } else if(array[2].value === true){ title.append(() => viewof groupbar2alb); } else if(array[3].value === true){ title.append(() => viewof groupbar2bc); } else if(array[4].value === true){ title.append(() => viewof groupbar2NUN); } else if(array[5].value === true){ title.append(() => viewof groupbar2NWT); } else if(array[6].value === true){ title.append(() => viewof groupbar2YUK); } else if(array[7].value === true){ title.append(() => viewof groupbar2ont); } else if(array[8].value === true){ title.append(() =>viewof groupbar2que); } else if(array[9].value === true){ title.append(() => viewof groupbar2NB); } else if(array[10].value === true){ title.append(() => viewof groupbar2NS); } else if(array[11].value === true){ title.append(() => viewof groupbar2Nfl); } else if(array[12].value === true){ title.append(() =>viewof groupbar2PEI); } else{ let title2 = div .append("div") .style("position", "absolute") .style("top", "-20px") .style("left", "10px"); title2.append(() => pietitle); let text = div .append("div") .style("position", "absolute") .style("top", "45px") .style("left", "0px"); text.append(() => viewof piechart); } return div.node(); }37:T6cd,together_bar = { let div = d3 .create("div") .style("position", "relative") .style("height", "750px") let title = div .append("div") .style("position", "absolute") .style("top", "10px") .style("left", "50px"); let title2 = div .append("div") .style("position", "absolute") .style("resize", "both") .style("overflow", "auto") .style("top", "30px") .style("left", "400px"); let title3 = div .append("div") .style("position", "absolute") .style("top", "0px") .style("left", "160px"); if(array[0].value === true){ title.append(() => manchart); } else if(array[1].value === true){ title.append(() => saskchart); } else if(array[2].value === true){ title.append(() => abchart); } else if(array[3].value === true){ title.append(() => bcchart); } else if(array[4].value === true){ title.append(() => groupbarchart2); } else if(array[5].value === true){ title.append(() => groupbarchart2); } else if(array[6].value === true){ title.append(() => groupbarchart2); } else if(array[7].value === true){ title.append(() => ontchart); } else if(array[8].value === true){ title.append(() => quechart); } else if(array[9].value === true){ title.append(() => nbchart); } else if(array[10].value === true){ title.append(() => groupbarchart2); } else if(array[11].value === true){ let titlespecial = div .append("div") .style("position", "absolute") .style("top", "0px") .style("left", "160px"); titlespecial.append(() => nflchart); } else if(array[12].value === true){ title.append(() => peichart); } else{ title.append(() => groupbarchart3); } return div.node(); }38:T704,/* together_bar = { let div = d3 .create("div") .style("position", "relative") .style("height", "750px") let title = div .append("div") .style("position", "absolute") .style("top", "10px") .style("left", "50px"); title.append(() => groupbarchart2); let title2 = div .append("div") .style("position", "absolute") .style("top", "30px") .style("left", "400px"); title2.append(() => key); return div.node(); } */ harmschart2 = { let div = d3 .create("div") .style("position", "relative") .style("height", "550px") let chart = div .append("div") .style("position", "absolute") .style("top", "0px") .style("left", "50px"); let chart2 = div .append("div") .style("position", "absolute") .style("top", "30px") .style("left", "385px"); if(array[0].value === true){ chart.append(() => manbop); } else if(array[1].value === true){ chart.append(() => saskop); } else if(array[2].value === true){ chart.append(() => albop); } else if(array[3].value === true){ chart.append(() => opvscov); } else if(array[4].value === true){ chart.append(() => barchart); } else if(array[5].value === true){ chart.append(() => barchart); } else if(array[6].value === true){ chart.append(() => yukbop); } else if(array[7].value === true){ chart.append(() => ontbop); } else if(array[8].value === true){ chart.append(() => quebop); } else if(array[9].value === true){ chart.append(() => nbbop); } else if(array[10].value === true){ chart.append(() => barchart); } else if(array[11].value === true){ chart.append(() => barchart); } else if(array[12].value === true){ chart.append(() => barchart); } else{ chart.append(() => barchart2); } return div.node(); }39:T433,datara = [ {Year_Quarter:2016, x: "16"}, {Year_Quarter:2017, x: "17"}, {Year_Quarter:2018, x: "18"}, {Year_Quarter:2019, x: "19"}, {Year_Quarter:2020, x: "20"}, {Year_Quarter:"2021 (Jan to Mar)", x: "21"}, {Year_Quarter:"2016 Q1", x: "16Q1"}, {Year_Quarter:"2016 Q2", x: "16Q2"}, {Year_Quarter:"2016 Q3", x: "16Q3"}, {Year_Quarter:"2016 Q4", x: "16Q4"}, {Year_Quarter:"2017 Q1", x: "17Q1"}, {Year_Quarter:"2017 Q2", x: "17Q2"}, {Year_Quarter:"2017 Q3", x: "17Q3"}, {Year_Quarter:"2017 Q4", x: "17Q4"}, {Year_Quarter:"2018 Q1", x: "18Q1"}, {Year_Quarter:"2018 Q2", x: "18Q2"}, {Year_Quarter:"2018 Q3", x: "18Q3"}, {Year_Quarter:"2018 Q4", x: "18Q4"}, {Year_Quarter:"2019 Q1", x: "19Q1"}, {Year_Quarter:"2019 Q2", x: "19Q2"}, {Year_Quarter:"2019 Q3", x: "19Q3"}, {Year_Quarter:"2019 Q4", x: "19Q4"}, {Year_Quarter:"2020 Q1", x: "20Q1"}, {Year_Quarter:"2020 Q2", x: "20Q2"}, {Year_Quarter:"2020 Q3", x: "20Q3"}, {Year_Quarter:"2020 Q4", x: "20Q4"}, {Year_Quarter:"2021 Q1", x: "21Q1"}, ]3a:Tca8,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/bar-chart function BarChart(data, { x = (d, i) => i, // given d in data, returns the (ordinal) x-value y = d => d, // given d in data, returns the (quantitative) y-value title, // given d in data, returns the title text marginTop = 20, // the top margin, in pixels marginRight = 0, // the right margin, in pixels marginBottom = 30, // the bottom margin, in pixels marginLeft = 90, // the left margin, in pixels width = 640, // the outer width of the chart, in pixels height = 400, // the outer height of the chart, in pixels xDomain, // an array of (ordinal) x-values xRange = [marginLeft, width - marginRight], // [left, right] yType = d3.scaleLinear, // y-scale type yDomain, // [ymin, ymax] yRange = [height - marginBottom, marginTop], // [bottom, top] xPadding = .75, // amount of x-range to reserve to separate bars yFormat, // a format specifier string for the y-axis yLabel, // a label for the y-axis color = "currentColor" // bar fill color } = {}) { // Compute values. const X = d3.map(data, x); const Y = d3.map(data, y); // Compute default domains, and unique the x-domain. if (xDomain === undefined) xDomain = X; if (yDomain === undefined) yDomain = [0, d3.max(Y)]; xDomain = new d3.InternSet(xDomain); // Omit any data not present in the x-domain. const I = d3.range(X.length).filter(i => xDomain.has(X[i])); // Construct scales, axes, and formats. const xScale = d3.scaleBand(xDomain, xRange).padding(xPadding); const yScale = yType(yDomain, yRange); const xAxis = d3.axisBottom(xScale).tickSizeOuter(0); const yAxis = d3.axisLeft(yScale).ticks(height / 40, yFormat); // Compute titles. if (title === undefined) { const formatValue = yScale.tickFormat(100, yFormat); title = i => `${X[i]}\n${formatValue(Y[i])}`; } else { const O = d3.map(data, d => d); const T = title; title = i => T(O[i], i, data); } const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(yAxis) .attr("font-size", "23px") .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").clone() .attr("x2", width - marginLeft - marginRight) .attr("stroke-opacity", 0.1)) .call(g => g.append("text") .attr("x", -marginLeft) .attr("y", 20) .attr("fill", "currentColor") .attr("text-anchor", "start") .text(yLabel)); const bar = svg.append("g") .attr("fill", color) .selectAll("rect") .data(I) .join("rect") .attr("x", i => xScale(X[i])) .attr("y", i => yScale(Y[i])) .attr("height", i => yScale(0) - yScale(Y[i])) .attr("width", xScale.bandwidth()); if (title) bar.append("title") .text(title); svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(xAxis) .attr("font-size", "30px"); return svg.node(); }3b:Td1b,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/pie-chart function PieChart(data, { name = ([x]) => x, // given d in data, returns the (ordinal) label value = ([, y]) => y, // given d in data, returns the (quantitative) value title, // given d in data, returns the title text width = 640, // outer width, in pixels height = 400, // outer height, in pixels innerRadius = 0, // inner radius of pie, in pixels (non-zero for donut) outerRadius = Math.min(width, height) / 2, // outer radius of pie, in pixels labelRadius = (innerRadius * 0.2 + outerRadius * 0.8), // center radius of labels format = ",", // a format specifier for values (in the label) names, // array of names (the domain of the color scale) colors, // array of colors for names stroke = innerRadius > 0 ? "none" : "white", // stroke separating widths strokeWidth = 1, // width of stroke separating wedges strokeLinejoin = "round", // line join of stroke separating wedges padAngle = stroke === "none" ? 1 / outerRadius : 0, // angular separation between wedges } = {}) { // Compute values. const N = d3.map(data, name); const V = d3.map(data, value); const I = d3.range(N.length).filter(i => !isNaN(V[i])); // Unique the names. if (names === undefined) names = N; names = new d3.InternSet(names); // Chose a default color scheme based on cardinality. if (colors === undefined) colors = d3.schemeSpectral[names.size]; if (colors === undefined) colors = d3.quantize(t => d3.interpolateSpectral(t * 0.8 + 0.1), names.size); // Construct scales. const color = d3.scaleOrdinal(names, colors); // Compute titles. if (title === undefined) { const formatValue = d3.format(format); title = i => `${N[i]}\n${formatValue(V[i])}`; } else { const O = d3.map(data, d => d); const T = title; title = i => T(O[i], i, data); } // Construct arcs. const arcs = d3.pie().padAngle(padAngle).sort(null).value(i => V[i])(I); const arc = d3.arc().innerRadius(innerRadius).outerRadius(outerRadius); const arcLabel = d3.arc().innerRadius(labelRadius).outerRadius(labelRadius); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [-width / 2, -height / 2, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); svg.append("g") .attr("stroke", stroke) .attr("stroke-width", strokeWidth) .attr("stroke-linejoin", strokeLinejoin) .selectAll("path") .data(arcs) .join("path") .attr("fill", d => color(N[d.data])) .attr("d", arc) .append("title") .text(d => title(d.data)); svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 58) .attr("text-anchor", "middle") .selectAll("text") .data(arcs) .join("text") .attr("transform", d => `translate(${arcLabel.centroid(d)})`) .selectAll("tspan") .data(d => { const lines = `${title(d.data)}`.split(/\n/); return (d.endAngle - d.startAngle) > 0.25 ? lines : lines.slice(0, 1); }) .join("tspan") .attr("x", 0) .attr("y", (_, i) => `${i * 1.1}em`) .attr("font-weight", (_, i) => i ? null : "bold") .text(d => d); return Object.assign(svg.node(), {scales: {color}}); }3c:Tebe,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/grouped-bar-chart function GroupedBarChart(data, { x = (d, i) => i, // given d in data, returns the (ordinal) x-value y = d => d, // given d in data, returns the (quantitative) y-value z = () => 1, // given d in data, returns the (categorical) z-value title, // given d in data, returns the title text marginTop = 60, // top margin, in pixels marginRight = 0, // right margin, in pixels marginBottom = 50, // bottom margin, in pixels marginLeft = 60, // left margin, in pixels width = 640, // outer width, in pixels height = 400, // outer height, in pixels xDomain, // array of x-values xRange = [marginLeft, width - marginRight], // [xmin, xmax] xPadding = 0.1, // amount of x-range to reserve to separate groups yType = d3.scaleLinear, // type of y-scale yDomain, // [ymin, ymax] yRange = [height - marginBottom, marginTop], // [ymin, ymax] zDomain, // array of z-values zPadding = 0.05, // amount of x-range to reserve to separate bars yFormat, // a format specifier string for the y-axis yLabel, // a label for the y-axis colors = d3.schemeTableau10, // array of colors } = {}) { // Compute values. const X = d3.map(data, x); const Y = d3.map(data, y); const Z = d3.map(data, z); // Compute default domains, and unique the x- and z-domains. if (xDomain === undefined) xDomain = X; if (yDomain === undefined) yDomain = [0, d3.max(Y)]; if (zDomain === undefined) zDomain = Z; xDomain = new d3.InternSet(xDomain); zDomain = new d3.InternSet(zDomain); // Omit any data not present in both the x- and z-domain. const I = d3.range(X.length).filter(i => xDomain.has(X[i]) && zDomain.has(Z[i])); // Construct scales, axes, and formats. const xScale = d3.scaleBand(xDomain, xRange).paddingInner(xPadding); const xzScale = d3.scaleBand(zDomain, [0, xScale.bandwidth()]).padding(zPadding); const yScale = yType(yDomain, yRange); const zScale = d3.scaleOrdinal(zDomain, colors); const xAxis = d3.axisBottom(xScale).tickSizeOuter(0); const yAxis = d3.axisLeft(yScale).ticks(height / 60, yFormat); // Compute titles. if (title === undefined) { const formatValue = yScale.tickFormat(100, yFormat); title = i => `${X[i]}\n${Z[i]}\n${formatValue(Y[i])}`; } else { const O = d3.map(data, d => d); const T = title; title = i => T(O[i], i, data); } const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(yAxis) .attr("font-size", 25) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").clone() .attr("x2", width - marginLeft - marginRight) .attr("stroke-opacity", 0.1)) .call(g => g.append("text") .attr("x", -marginLeft) .attr("font-size", 40) .attr("y", 40) .attr("fill", "currentColor") .attr("text-anchor", "start") .text(yLabel)); const bar = svg.append("g") .selectAll("rect") .data(I) .join("rect") .attr("x", i => xScale(X[i]) + xzScale(Z[i])) .attr("y", i => yScale(Y[i])) .attr("width", xzScale.bandwidth()) .attr("height", i => yScale(0) - yScale(Y[i])) .attr("fill", i => zScale(Z[i])); if (title) bar.append("title") .text(title); svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(xAxis) .attr("font-size", 40); return Object.assign(svg.node(), {scales: {color: zScale}}); }3d:Tf64,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/grouped-bar-chart function GroupedBarChart2(data, { x = (d, i) => i, // given d in data, returns the (ordinal) x-value y = d => d, // given d in data, returns the (quantitative) y-value z = () => 1, // given d in data, returns the (categorical) z-value title, // given d in data, returns the title text marginTop = 60, // top margin, in pixels marginRight = 0, // right margin, in pixels marginBottom = 50, // bottom margin, in pixels marginLeft = 60, // left margin, in pixels width = 640, // outer width, in pixels height = 400, // outer height, in pixels xDomain, // array of x-values xRange = [marginLeft, width - marginRight], // [xmin, xmax] xPadding = 0.1, // amount of x-range to reserve to separate groups yType = d3.scaleLinear, // type of y-scale yDomain, // [ymin, ymax] yRange = [height - marginBottom, marginTop], // [ymin, ymax] zDomain, // array of z-values zPadding = 0.05, // amount of x-range to reserve to separate bars yFormat, // a format specifier string for the y-axis yLabel, // a label for the y-axis colors = d3.schemeTableau10, // array of colors } = {}) { // Compute values. const X = d3.map(data, x); const Y = d3.map(data, y); const Z = d3.map(data, z); // Compute default domains, and unique the x- and z-domains. if (xDomain === undefined) xDomain = X; if (yDomain === undefined) yDomain = [0, d3.max(Y)]; if (zDomain === undefined) zDomain = Z; xDomain = new d3.InternSet(xDomain); zDomain = new d3.InternSet(zDomain); // Omit any data not present in both the x- and z-domain. const I = d3.range(X.length).filter(i => xDomain.has(X[i]) && zDomain.has(Z[i])); // Construct scales, axes, and formats. const xScale = d3.scaleBand(xDomain, xRange).paddingInner(xPadding); const xzScale = d3.scaleBand(zDomain, [0, xScale.bandwidth()]).padding(zPadding); const yScale = yType(yDomain, yRange); const zScale = d3.scaleOrdinal(zDomain, colors); const xAxis = d3.axisBottom(xScale).tickSizeOuter(0); const yAxis = d3.axisLeft(yScale).ticks(height / 60, yFormat); // Compute titles. if (title === undefined) { const formatValue = yScale.tickFormat(100, yFormat); title = i => `${X[i]}\n${Z[i]}\n${formatValue(Y[i])}`; } else { const O = d3.map(data, d => d); const T = title; title = i => T(O[i], i, data); } const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(yAxis) .attr("font-size", 25) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").clone() .attr("x2", width - marginLeft - marginRight) .attr("stroke-opacity", 0.1)) .call(g => g.append("text") .attr("x", -marginLeft) .attr("font-size", 40) .attr("font-weight", "bold") .attr("y", 40) .attr("fill", "currentColor") .attr("text-anchor", "start") .text(yLabel)); const bar = svg.append("g") .selectAll("rect") .data(I) .join("rect") .attr("x", i => xScale(X[i]) + xzScale(Z[i])) .attr("y", i => yScale(Y[i])) .attr("width", xzScale.bandwidth()) .attr("height", i => yScale(0) - yScale(Y[i])) .attr("fill", i => zScale(Z[i])); if (title) bar.append("title") .text(title); svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(xAxis) .attr("font-size", 40); svg.append(() => key) .attr("transform", `translate(940,-300)`) .attr("width", width/2) .attr("height", height) return Object.assign(svg.node(), {scales: {color: zScale}}); }3e:Tf65,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/grouped-bar-chart function GroupedBarChart3(data, { x = (d, i) => i, // given d in data, returns the (ordinal) x-value y = d => d, // given d in data, returns the (quantitative) y-value z = () => 1, // given d in data, returns the (categorical) z-value title, // given d in data, returns the title text marginTop = 60, // top margin, in pixels marginRight = 0, // right margin, in pixels marginBottom = 50, // bottom margin, in pixels marginLeft = 60, // left margin, in pixels width = 640, // outer width, in pixels height = 400, // outer height, in pixels xDomain, // array of x-values xRange = [marginLeft, width - marginRight], // [xmin, xmax] xPadding = 0.1, // amount of x-range to reserve to separate groups yType = d3.scaleLinear, // type of y-scale yDomain, // [ymin, ymax] yRange = [height - marginBottom, marginTop], // [ymin, ymax] zDomain, // array of z-values zPadding = 0.05, // amount of x-range to reserve to separate bars yFormat, // a format specifier string for the y-axis yLabel, // a label for the y-axis colors = d3.schemeTableau10, // array of colors } = {}) { // Compute values. const X = d3.map(data, x); const Y = d3.map(data, y); const Z = d3.map(data, z); // Compute default domains, and unique the x- and z-domains. if (xDomain === undefined) xDomain = X; if (yDomain === undefined) yDomain = [0, d3.max(Y)]; if (zDomain === undefined) zDomain = Z; xDomain = new d3.InternSet(xDomain); zDomain = new d3.InternSet(zDomain); // Omit any data not present in both the x- and z-domain. const I = d3.range(X.length).filter(i => xDomain.has(X[i]) && zDomain.has(Z[i])); // Construct scales, axes, and formats. const xScale = d3.scaleBand(xDomain, xRange).paddingInner(xPadding); const xzScale = d3.scaleBand(zDomain, [0, xScale.bandwidth()]).padding(zPadding); const yScale = yType(yDomain, yRange); const zScale = d3.scaleOrdinal(zDomain, colors); const xAxis = d3.axisBottom(xScale).tickSizeOuter(0); const yAxis = d3.axisLeft(yScale).ticks(height / 60, yFormat); // Compute titles. if (title === undefined) { const formatValue = yScale.tickFormat(100, yFormat); title = i => `${X[i]}\n${Z[i]}\n${formatValue(Y[i])}`; } else { const O = d3.map(data, d => d); const T = title; title = i => T(O[i], i, data); } const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(yAxis) .attr("font-size", 25) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").clone() .attr("x2", width - marginLeft - marginRight) .attr("stroke-opacity", 0.1)) .call(g => g.append("text") .attr("x", -marginLeft) .attr("font-size", 40) .attr("font-weight", "bold") .attr("y", 40) .attr("fill", "currentColor") .attr("text-anchor", "start") .text(yLabel)); const bar = svg.append("g") .selectAll("rect") .data(I) .join("rect") .attr("x", i => xScale(X[i]) + xzScale(Z[i])) .attr("y", i => yScale(Y[i])) .attr("width", xzScale.bandwidth()) .attr("height", i => yScale(0) - yScale(Y[i])) .attr("fill", i => zScale(Z[i])); if (title) bar.append("title") .text(title); svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(xAxis) .attr("font-size", 40); svg.append(() => key2) .attr("transform", `translate(840,-300)`) .attr("width", width/2) .attr("height", height) return Object.assign(svg.node(), {scales: {color: zScale}}); }3f:Tee7,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/grouped-bar-chart function GroupedBarChart4(data, { x = (d, i) => i, // given d in data, returns the (ordinal) x-value y = d => d, // given d in data, returns the (quantitative) y-value z = () => 1, // given d in data, returns the (categorical) z-value title, // given d in data, returns the title text marginTop = 100, // top margin, in pixels marginRight = 30, // right margin, in pixels marginBottom = 50, // bottom margin, in pixels marginLeft = 90, // left margin, in pixels width = 640, // outer width, in pixels height = 400, // outer height, in pixels xDomain, // array of x-values xRange = [marginLeft, width - marginRight], // [xmin, xmax] xPadding = 0.3, // amount of x-range to reserve to separate groups yType = d3.scaleLinear, // type of y-scale yDomain, // [ymin, ymax] yRange = [height - marginBottom, marginTop], // [ymin, ymax] zDomain, // array of z-values zPadding = 0.6, // amount of x-range to reserve to separate bars yFormat, // a format specifier string for the y-axis yLabel, // a label for the y-axis colors = d3.schemeTableau10, // array of colors } = {}) { // Compute values. const X = d3.map(data, x); const Y = d3.map(data, y); const Z = d3.map(data, z); // Compute default domains, and unique the x- and z-domains. if (xDomain === undefined) xDomain = X; if (yDomain === undefined) yDomain = [0, d3.max(Y)]; if (zDomain === undefined) zDomain = Z; xDomain = new d3.InternSet(xDomain); zDomain = new d3.InternSet(zDomain); // Omit any data not present in both the x- and z-domain. const I = d3.range(X.length).filter(i => xDomain.has(X[i]) && zDomain.has(Z[i])); // Construct scales, axes, and formats. const xScale = d3.scaleBand(xDomain, xRange).paddingInner(xPadding); const xzScale = d3.scaleBand(zDomain, [0, xScale.bandwidth()]).padding(zPadding); const yScale = yType(yDomain, yRange); const zScale = d3.scaleOrdinal(zDomain, colors); const xAxis = d3.axisBottom(xScale).tickSizeOuter(0); const yAxis = d3.axisLeft(yScale).ticks(height / 60, yFormat); // Compute titles. if (title === undefined) { const formatValue = yScale.tickFormat(100, yFormat); title = i => `${X[i]}\n${Z[i]}\n${formatValue(Y[i])}`; } else { const O = d3.map(data, d => d); const T = title; title = i => T(O[i], i, data); } const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(yAxis) .attr("font-size", 40) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").clone() .attr("x2", width - marginLeft - marginRight) .attr("stroke-opacity", 0.1)) .call(g => g.append("text") .attr("x", -marginLeft) .attr("font-size", 60) .attr("font-weight", "bold") .attr("y", 55) .attr("fill", "currentColor") .attr("text-anchor", "start") .text(yLabel)); const bar = svg.append("g") .selectAll("rect") .data(I) .join("rect") .attr("x", i => xScale(X[i]) + xzScale(Z[i])) .attr("y", i => yScale(Y[i])) .attr("width", xzScale.bandwidth()) .attr("height", i => yScale(0) - yScale(Y[i])) .attr("fill", i => zScale(Z[i])); if (title) bar.append("title") .text(title); svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(xAxis) .attr("font-size", 40); return Object.assign(svg.node(), {scales: {color: zScale}}); }40:T16d8,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/multi-line-chart function LineChart(data, { x = ([x]) => x, // given d in data, returns the (temporal) x-value y = ([, y]) => y, // given d in data, returns the (quantitative) y-value z = () => 1, // given d in data, returns the (categorical) z-value title, // given d in data, returns the title text defined, // for gaps in data curve = d3.curveLinear, // method of interpolation between points marginTop = 50, // top margin, in pixels marginRight = 90, // right margin, in pixels marginBottom = 30, // bottom margin, in pixels marginLeft = 130, // left margin, in pixels width = 575, // outer width, in pixels height = 450, // outer height, in pixels xType = d3.scaleUtc, // type of x-scale xDomain, // [xmin, xmax] xRange = [marginLeft, width - marginRight], // [left, right] yType = d3.scaleLinear, // type of y-scale yDomain, // [ymin, ymax] yRange = [height - marginBottom, marginTop], // [bottom, top] yFormat, // a format specifier string for the y-axis yLabel, // a label for the y-axis zDomain, // array of z-values color = "currentColor", // stroke color of line strokeLinecap, // stroke line cap of line strokeLinejoin, // stroke line join of line strokeWidth = 1.5, // stroke width of line strokeOpacity, // stroke opacity of line mixBlendMode = "multiply", // blend mode of lines voronoi // show a Voronoi overlay? (for debugging) } = {}) { // Compute values. const X = d3.map(data, x); const Y = d3.map(data, y); const Z = d3.map(data, z); const O = d3.map(data, d => d); if (defined === undefined) defined = (d, i) => !isNaN(X[i]) && !isNaN(Y[i]); const D = d3.map(data, defined); // Compute default domains, and unique the z-domain. if (xDomain === undefined) xDomain = muttime(timeframe); if (yDomain === undefined) yDomain = [0, mutdomain(mySelect.key)]; if (zDomain === undefined) zDomain = Z; zDomain = new d3.InternSet(zDomain); // Omit any data not present in the z-domain. const I = d3.range(X.length).filter(i => zDomain.has(Z[i])); // Construct scales and axes. const xScale = xType(xDomain, xRange); const yScale = yType(yDomain, yRange); const xAxis = d3.axisBottom(xScale).ticks(width / 80).tickSizeOuter(0); const yAxis = d3.axisLeft(yScale).ticks(height / 60, yFormat); // Compute titles. const T = title === undefined ? Y : title === null ? null : d3.map(data, y); const Q = title === undefined ? Z : title === null ? null : d3.map(data, z); // Construct a line generator. const line = d3.line() .defined(i => D[i]) .curve(curve) .x(i => xScale(X[i])) .y(i => yScale(Y[i])); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;") .style("-webkit-tap-highlight-color", "transparent") .on("pointerenter", pointerentered) .on("pointermove", pointermoved) .on("pointerleave", pointerleft) .on("touchstart", event => event.preventDefault()); // An optional Voronoi display (for fun). if (voronoi) svg.append("path") .attr("fill", "none") .attr("stroke", "#ccc") .attr("d", d3.Delaunay .from(I, i => xScale(X[i]), i => yScale(Y[i])) .voronoi([0, 0, width, height]) .render()); svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(xAxis) .attr("font-size", 11); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(yAxis) .attr("font-size", 20) .call(g => g.select(".domain").remove()) .call(voronoi ? () => {} : g => g.selectAll(".tick line").clone() .attr("x2", width - marginLeft - marginRight) .attr("stroke-opacity", 0.1)) .call(g => g.append("text") .attr("x", -marginLeft) .attr("y", 14) .attr("fill", "currentColor") .attr("text-anchor", "start") .text(yLabel)); const path = svg.append("g") .attr("fill", "none") .attr("stroke", typeof color === "string" ? color : null) .attr("stroke-linecap", strokeLinecap) .attr("stroke-linejoin", strokeLinejoin) .attr("stroke-width", strokeWidth) .attr("stroke-opacity", strokeOpacity) .selectAll("path") .data(d3.group(I, i => Z[i])) .join("path") .style("mix-blend-mode", mixBlendMode) .attr("stroke", typeof color === "function" ? ([z]) => color(z) : null) .attr("d", ([, I]) => line(I)); const dot = svg.append("g") .attr("display", "none"); dot.append("circle") .attr("r", 2.5); dot.append("text") .attr("font-family", "sans-serif") .attr("font-size", 15) .attr("text-anchor", "middle") .attr("x", -15) .attr("y", -8); function pointermoved(event) { const [xm, ym] = d3.pointer(event); const i = d3.least(I, i => Math.hypot(xScale(X[i]) - xm, yScale(Y[i]) - ym)); // closest point path.style("stroke", ([z]) => Z[i] === z ? null : "#ddd").filter(([z]) => Z[i] === z).raise(); dot.attr("transform", `translate(${xScale(X[i])},${yScale(Y[i])})`); if (T) dot.select("text").text(Q[i] +" " + T[i]); svg.property("value", O[i]).dispatch("input", {bubbles: true}); } function pointerentered() { path.style("mix-blend-mode", null).style("stroke", "#ddd"); dot.attr("display", null); } function pointerleft() { path.style("mix-blend-mode", "multiply").style("stroke", null); dot.attr("display", "none"); svg.node().value = null; svg.dispatch("input", {bubbles: true}); } return Object.assign(svg.node(), {value: null}); }41:T1144,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/stacked-bar-chart function StackedBarChart(data, { x = (d, i) => i, // given d in data, returns the (ordinal) x-value y = d => d, // given d in data, returns the (quantitative) y-value z = () => 1, // given d in data, returns the (categorical) z-value title, // given d in data, returns the title text marginTop = 30, // top margin, in pixels marginRight = 0, // right margin, in pixels marginBottom = 30, // bottom margin, in pixels marginLeft = 40, // left margin, in pixels width = 640, // outer width, in pixels height = 400, // outer height, in pixels xDomain, // array of x-values xRange = [marginLeft, width - marginRight], // [left, right] xPadding = 0.1, // amount of x-range to reserve to separate bars yType = d3.scaleLinear, // type of y-scale yDomain, // [ymin, ymax] yRange = [height - marginBottom, marginTop], // [bottom, top] zDomain, // array of z-values offset = d3.stackOffsetDiverging, // stack offset method order = d3.stackOrderNone, // stack order method yFormat, // a format specifier string for the y-axis yLabel, // a label for the y-axis colors = d3.schemeTableau10, // array of colors } = {}) { // Compute values. const X = d3.map(data, x); const Y = d3.map(data, y); const Z = d3.map(data, z); // Compute default x- and z-domains, and unique them. if (xDomain === undefined) xDomain = X; if (zDomain === undefined) zDomain = Z; xDomain = new d3.InternSet(xDomain); zDomain = new d3.InternSet(zDomain); // Omit any data not present in the x- and z-domains. const I = d3.range(X.length).filter(i => xDomain.has(X[i]) && zDomain.has(Z[i])); // Compute a nested array of series where each series is [[y1, y2], [y1, y2], // [y1, y2], …] representing the y-extent of each stacked rect. In addition, // each tuple has an i (index) property so that we can refer back to the // original data point (data[i]). This code assumes that there is only one // data point for a given unique x- and z-value. const series = d3.stack() .keys(zDomain) .value(([x, I], z) => Y[I.get(z)]) .order(order) .offset(offset) (d3.rollup(I, ([i]) => i, i => X[i], i => Z[i])) .map(s => s.map(d => Object.assign(d, {i: d.data[1].get(s.key)}))); // Compute the default y-domain. Note: diverging stacks can be negative. if (yDomain === undefined) yDomain = d3.extent(series.flat(2)); // Construct scales, axes, and formats. const xScale = d3.scaleBand(xDomain, xRange).paddingInner(xPadding); const yScale = yType(yDomain, yRange); const color = d3.scaleOrdinal(zDomain, colors); const xAxis = d3.axisBottom(xScale).tickSizeOuter(0); const yAxis = d3.axisLeft(yScale).ticks(height / 60, yFormat); // Compute titles. if (title === undefined) { const formatValue = yScale.tickFormat(100, yFormat); title = i => `${X[i]}\n${Z[i]}\n${formatValue(Y[i])}`; } else { const O = d3.map(data, d => d); const T = title; title = i => T(O[i], i, data); } const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(yAxis) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").clone() .attr("x2", width - marginLeft - marginRight) .attr("stroke-opacity", 0.1)) .call(g => g.append("text") .attr("x", -marginLeft) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text(yLabel)); const bar = svg.append("g") .selectAll("g") .data(series) .join("g") .attr("fill", ([{i}]) => color(Z[i])) .selectAll("rect") .data(d => d) .join("rect") .attr("x", ({i}) => xScale(X[i])) .attr("y", ([y1, y2]) => Math.min(yScale(y1), yScale(y2))) .attr("height", ([y1, y2]) => Math.abs(yScale(y1) - yScale(y2))) .attr("width", xScale.bandwidth()); if (title) bar.append("title") .text(({i}) => title(i)); svg.append("g") .attr("transform", `translate(0,${yScale(0)})`) .call(xAxis); return Object.assign(svg.node(), {scales: {color}}); }42:Td31,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/donut-chart function DonutChart(data, { name = ([x]) => x, // given d in data, returns the (ordinal) label value = ([, y]) => y, // given d in data, returns the (quantitative) value title, // given d in data, returns the title text width = 640, // outer width, in pixels height = 400, // outer height, in pixels innerRadius = Math.min(width, height) / 3, // inner radius of pie, in pixels (non-zero for donut) outerRadius = Math.min(width, height) / 2, // outer radius of pie, in pixels labelRadius = (innerRadius + outerRadius) / 2, // center radius of labels format = ",", // a format specifier for values (in the label) names, // array of names (the domain of the color scale) colors, // array of colors for names stroke = innerRadius > 0 ? "none" : "white", // stroke separating widths strokeWidth = 1, // width of stroke separating wedges strokeLinejoin = "round", // line join of stroke separating wedges padAngle = stroke === "none" ? 1 / outerRadius : 0, // angular separation between wedges } = {}) { // Compute values. const N = d3.map(data, name); const V = d3.map(data, value); const I = d3.range(N.length).filter(i => !isNaN(V[i])); // Unique the names. if (names === undefined) names = N; names = new d3.InternSet(names); // Chose a default color scheme based on cardinality. if (colors === undefined) colors = d3.schemeSpectral[names.size]; if (colors === undefined) colors = d3.quantize(t => d3.interpolateSpectral(t * 0.8 + 0.1), names.size); // Construct scales. const color = d3.scaleOrdinal(names, colors); // Compute titles. if (title === undefined) { const formatValue = d3.format(format); title = i => `${N[i]}\n${formatValue(V[i])}`; } else { const O = d3.map(data, d => d); const T = title; title = i => T(O[i], i, data); } // Construct arcs. const arcs = d3.pie().padAngle(padAngle).sort(null).value(i => V[i])(I); const arc = d3.arc().innerRadius(innerRadius).outerRadius(outerRadius); const arcLabel = d3.arc().innerRadius(labelRadius).outerRadius(labelRadius); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [-width / 2, -height / 2, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); svg.append("g") .attr("stroke", stroke) .attr("stroke-width", strokeWidth) .attr("stroke-linejoin", strokeLinejoin) .selectAll("path") .data(arcs) .join("path") .attr("fill", d => color(N[d.data])) .attr("d", arc) .append("title") .text(d => title(d.data)); svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 50) .attr("text-anchor", "middle") .selectAll("text") .data(arcs) .join("text") .attr("transform", d => `translate(${arcLabel.centroid(d)})`) .selectAll("tspan") .data(d => { const lines = `${title(d.data)}`.split(/\n/); return (d.endAngle - d.startAngle) > 0.25 ? lines : lines.slice(0, 1); }) .join("tspan") .attr("x", 0) .attr("y", (_, i) => `${i * 1.1}em`) .attr("font-weight", (_, i) => i ? null : "bold") .text(d => d); return Object.assign(svg.node(), {scales: {color}}); }43:T1757,async function vegaSync({ facts = null, dims = [], multivalued = false, actions = false, renderer = "canvas", spec = {}, sample = 1000, interactivity = false, filter = null, counts = false, debug = false, normalized = false, scrollbar = false, group = null, reduce = null, top = Infinity, invalidation, visibility }) { if (!facts) return vegalite(spec); await visibility(); const dimension = typeof dims === "function" ? dims : dims instanceof Array ? d => dims.map(key => d[key]) : d => [dims].map(key => d[key]); if (reduce !== null || group !== null) counts = true; // our dimension, with filter const xy = facts.dimension(dimension, multivalued); // same dimension unfiltered const xyUnfiltered = counts && facts.unfiltered.dimension(dimension, multivalued); //groups filtered/unfiltered const groupUnfiltered = counts && (group !== null ? xyUnfiltered.group(group) : xyUnfiltered.group()); const groupFiltered = counts && (group !== null ? xy.group(group) : xy.group()); //reduce options const reduceUnfiltered = counts && (reduce !== null ? reduce(groupUnfiltered) : groupUnfiltered.reduceCount()); const reduceFiltered = counts && (reduce !== null ? reduce(groupFiltered) : groupFiltered.reduceCount()); //counts function let getCounts = function() { const resultFiltered = top === Infinity ? reduceFiltered.all() : reduceFiltered.top(top), resultUnfiltered = top === Infinity ? reduceUnfiltered.all() : reduceUnfiltered.top(top); if (debug) console.log({ resultFiltered, resultUnfiltered }); const getKey = d => (Array.isArray(d.key) ? d.key.join(',') : d.key); const lookup = new Map(resultFiltered.map(d => [getKey(d), d.value])); if (debug) console.log(lookup); const unfilteredSize = normalized ? facts.size() : 1, filteredSize = normalized ? resultFiltered.reduce((acc, d) => acc + d.value, 0) : 1; const result = resultUnfiltered.map(d => { let o = { key: getKey(d), value: normalized ? d.value / unfilteredSize : d.value, filtered: normalized ? lookup.get(getKey(d)) / filteredSize : lookup.get(getKey(d)) }; return o; }); if (debug) console.log(result); return result; }; // feed the spec with initials values if (!spec.datasets) spec.datasets = {}; if (!counts && !spec.datasets.all) spec.datasets.all = sampleArray(facts.all(), sample); if (!counts && !spec.datasets.filtered) spec.datasets.filtered = sampleArray(facts.allFiltered([xy]), sample); if (counts && !spec.datasets.counts) spec.datasets.counts = getCounts(); const view = await vegalite(spec, { actions, renderer }), e = view.value, resetButton = d3 .select(view) .append("a") .attr("href", "#void") .attr("class", "reset") .style("font-size", "small") .style('font-align', 'middle') .style("top", "0.3em") .style('left', `${w}px`) .style("position", "absolute") .on("click", reset); //remove scroll bars if (!scrollbar) d3.select(view).attr('style', 'overflow : hidden'); const id = xy.id(); invalidation && invalidation.then(() => { xy.filterAll().dispose(); xyUnfiltered && xyUnfiltered.dispose(); reduceUnfiltered && reduceUnfiltered.dispose(); reduceFiltered && reduceFiltered.dispose(); e.finalize(); facts.dispatch.on("redraw.view" + id, null); facts.dispatch.on("reset.view" + id, null); facts.dispatch.call('redraw'); }); if (interactivity) { e.addSignalListener(interactivity, function(name, value) { let chartFilter = null; //default interactions behaviors if (debug) console.log({ name, value, interactivity }); if (filter === null) { switch (interactivity) { case "brush": if (value && Object.values(value).length > 0) chartFilter = RangedMultiDimensionalFilter(Object.values(value)); else chartFilter = null; break; case "selection": const f = "key" in value ? value.key : value[dims[0]]; if (f && f.length > 0) chartFilter = d => f.includes(d[0]); else chartFilter = null; break; } } else chartFilter = filter(name, value); xy.filter(chartFilter); facts.dispatch.call("redraw", undefined, { sourceId: id }); resetButton.html(chartFilter ? "Reset" : ""); }); } // redraw: add filtered data let drawn = 0; async function redraw(args = {}) { const selfCalled = args !== undefined && args.sourceId !== undefined && id === args.sourceId; if (selfCalled) return; if (drawn++) return; await (visibility ? visibility() : Promises.delay(800)); if (debug) console.log(spec.title, args, selfCalled, id); const viewData = e._runtime.data; let run = false; // if dataset has changed update "all" if (!counts && args.updateAll && viewData.hasOwnProperty('data')) { e.data("all", sampleArray(facts.all(), sample)); run = true; } if (!counts && viewData.hasOwnProperty('filtered')) { e.data("filtered", sampleArray(facts.allFiltered([xy]), sample)); run = true; } if (counts && viewData.hasOwnProperty('counts')) { e.data("counts", getCounts()); run = true; } run && (await e.runAsync()); drawn = 0; } function reset() { const { signals } = e.getState(); if (signals['brush_x']) e.signal('brush_x', []); if (signals['brush_y']) e.signal('brush_y', []); if (interactivity === "selection") e.signal('selection_tuple', []); e.runAsync(); } // redraw when notified facts.dispatch.on("redraw.view" + id, redraw); facts.dispatch.on("reset.view" + id, reset); redraw(); drawn = 0; return view; }44:Ta3f,function Scrubber(values, { format = value => value, initial = 0, delay = null, autoplay = true, loop = true, loopDelay = null, alternate = false } = {}) { values = Array.from(values); const form = html``; let frame = null; let timer = null; let interval = null; let direction = 1; function start() { form.b.textContent = "Pause"; if (delay === null) frame = requestAnimationFrame(tick); else interval = setInterval(tick, delay); } function stop() { form.b.textContent = "Play"; if (frame !== null) cancelAnimationFrame(frame), frame = null; if (timer !== null) clearTimeout(timer), timer = null; if (interval !== null) clearInterval(interval), interval = null; } function running() { return frame !== null || timer !== null || interval !== null; } function tick() { if (form.i.valueAsNumber === (direction > 0 ? values.length - 1 : direction < 0 ? 0 : NaN)) { if (!loop) return stop(); if (alternate) direction = -direction; if (loopDelay !== null) { if (frame !== null) cancelAnimationFrame(frame), frame = null; if (interval !== null) clearInterval(interval), interval = null; timer = setTimeout(() => (step(), start()), loopDelay); return; } } if (delay === null) frame = requestAnimationFrame(tick); step(); } function step() { form.i.valueAsNumber = (form.i.valueAsNumber + direction + values.length) % values.length; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); } form.i.oninput = event => { if (event && event.isTrusted && running()) stop(); form.value = values[form.i.valueAsNumber]; form.o.value = format(form.value, form.i.valueAsNumber, values); }; form.b.onclick = () => { if (running()) return stop(); direction = alternate && form.i.valueAsNumber === values.length - 1 ? -1 : 1; form.i.valueAsNumber = (form.i.valueAsNumber + direction) % values.length; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); start(); }; form.i.oninput(); if (autoplay) start(); else stop(); Inputs.disposal(form).then(stop); return form; }45:T1211,// Copyright 2021, Observable Inc. // Released under the ISC license. // https://observablehq.com/@d3/color-legend function Legend(color, { title, tickSize = 9, width = 360, height = 44 + tickSize, marginTop = 18, marginRight = 0, marginBottom = 16 + tickSize, marginLeft = 0, ticks = width / 64, tickFormat, tickValues } = {}) { function ramp(color, n = 256) { const canvas = document.createElement("canvas"); canvas.width = n; canvas.height = 1; const context = canvas.getContext("2d"); for (let i = 0; i < n; ++i) { context.fillStyle = color(i / (n - 1)); context.fillRect(i, 0, 1, 1); } return canvas; } 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; // Continuous if (color.interpolate) { const n = Math.min(color.domain().length, color.range().length); x = color.copy().rangeRound(d3.quantize(d3.interpolate(marginLeft, width - marginRight), n)); 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.copy().domain(d3.quantize(d3.interpolate(0, 1), n))).toDataURL()); } // Sequential else if (color.interpolator) { 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); } } } // Threshold else if (color.invertExtent) { const thresholds = color.thresholds ? color.thresholds() // scaleQuantize : color.quantiles ? color.quantiles() // scaleQuantile : color.domain(); // scaleThreshold const thresholdFormat = tickFormat === undefined ? d => d : typeof tickFormat === "string" ? d3.format(tickFormat) : tickFormat; x = d3.scaleLinear() .domain([-1, color.range().length - 1]) .rangeRound([marginLeft, width - marginRight]); svg.append("g") .selectAll("rect") .data(color.range()) .join("rect") .attr("x", (d, i) => x(i - 1)) .attr("y", marginTop) .attr("width", (d, i) => x(i) - x(i - 1)) .attr("height", height - marginTop - marginBottom) .attr("fill", d => d); tickValues = d3.range(thresholds.length); tickFormat = i => thresholdFormat(thresholds[i], i); } // Ordinal else { x = d3.scaleBand() .domain(color.domain()) .rangeRound([marginLeft, width - marginRight]); svg.append("g") .selectAll("rect") .data(color.domain()) .join("rect") .attr("x", x) .attr("y", marginTop) .attr("width", Math.max(0, x.bandwidth() - 1)) .attr("height", height - marginTop - marginBottom) .attr("fill", color); tickAdjust = () => { }; } 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-weight", "bold") .attr("class", "title") .text(title)); return svg.node(); }46:T588,function mutdomain(mySelect){ if (mySelect === "numconf") { return d3.max(datatime((timeframe)).flat(), d => d.numconf) } else if(mySelect === "numdeaths"){ return d3.max(datatime(timeframe).flat(), d => d.numdeaths) } else if(mySelect === "rateconf"){ return d3.max(datatime(timeframe).flat(), d => d.rate) } else if(mySelect === "deathrate"){ return d3.max(datatime(timeframe).flat(), d => d.deathrate) } else if(mySelect === "rateconf"){ return d3.max(datatime(timeframe).flat(), d => d.rateconf) } else if(mySelect === "numtests"){ return d3.max(datatime(timeframe).flat(), d => d.numtests) } else if(mySelect === "numtoday"){ return d3.max(datatime(timeframe).flat(), d => d.numtoday) } else if(mySelect === "numtotal_last14"){ return d3.max(datatime(timeframe).flat(), d => d.numtotal_last14) } else if(mySelect === "raterecovered"){ return d3.max(datatime(timeframe).flat(), d => d.raterecovered) } else if(mySelect === "numrecover"){ return d3.max(datatime(timeframe).flat(), d => d.numrecover) } else if(mySelect === "avgtotal_last7"){ return d3.max(datatime(timeframe).flat(), d => d.avgtotal_last7) } else if(mySelect === "numtotal_last7"){ return d3.max(datatime(timeframe).flat(), d => d.numtotal_last7) } } 47:T5ba,provincedatarate = [ {name: "Canada", age: "<17", value: Math.ceil(633/382.46108)},{name: "Canada", age: "1764", value: Math.ceil(23738/382.46108)}, {name: "BC", age: "<17", value: Math.ceil(56/52.14805)},{name: "BC", age: "1764", value: Math.ceil(3085/52.14805)}, {name: "AB", age: "<17", value: Math.ceil(130/44.42879)},{name: "AB", age: "1764", value: Math.ceil(3400/44.42879)}, {name: "Ont", age: "<17", value: Math.ceil(339/148.26276)},{name: "Ont", age: "1764", value: Math.ceil(14396/148.26276)}, {name: "N.L", age: "<17", value: 0},{name: "N.L", age: "1764", value: Math.ceil(30/5.20553)}, {name: "N.S.", age: "<17", value: 0},{name: "N.S.", age: "1764", value: Math.ceil(45/9.92055)}, {name: "Man.", age: "<17", value: Math.ceil(45/13.83765)},{name: "Man.", age: "1764", value: Math.ceil(1506/13.83765)}, {name: "Sask.", age: "<17", value: Math.ceil(58/11.79844)},{name: "Sask.", age: "1764", value: Math.ceil(1150/11.79844)} ]48:T54c, data4 = data3.map(d => ({ x: cordLookup.get(d.prname), y: cordyLookup.get(d.prname), pruid: d.pruid, prname: d.prname, prnameFR: d.prnameFR, date: d.date, update: d.update, numconf: d.numconf, numprob: d.numprob, numdeaths: d.numdeaths, numtotal: d.numtotal, numtested: d.numtested, numtests: ((d.numtests/((popLookup.get(d.prname))/10000))), numrecover: d.numrecover, percentrecover: d.percentrecover, ratetested: d.ratetested, ratetests: d.ratetests, numtoday: d.numtoday, percentoday: d.percentoday, ratetotal: d.ratetotal, ratedeaths: d.ratedeaths, numdeathstoday: d.numdeathstoday, percentdeath: d.percentdeath, numtestedtoday: d.numtestedtoday, numteststoday: d.numteststoday, numrecoveredtoday: d.numrecoveredtoday, percentactive: d.percentactive, rateactive: d.rateactive, numtotal_last14: d.numtotal_last14, ratetotal_last14: d.ratetotal_last14, numdeaths_last14: d.numdeaths_last14, ratedeaths_last14: d.ratedeaths_last14, numtotal_last7: d.numtotal_last7, ratetotal_last7: d.ratetotal_last7, numdeaths_last7: d.numdeaths_last7, ratedeaths_last7: d.ratedeaths_last7, avgtotal_last7: d.avgtotal_last7, avgincidence_last7: d.avgincidence_last7, avgdeaths_last7: d.vgdeaths_last7, avgratedeaths_last7: d.avgratedeaths_last7, raterecovered: d.raterecovered })) 49:[{"id":"c1c1553104b2169992bf2b7395a9cd3de7dc4f0326c7a3f5c258f560776ac511d3be9612bb5674d5ef260d0035703eef9d6d96bae3ce667b9b5e89a304e7c60f","href":"https://static.observableusercontent.com/files/c1c1553104b2169992bf2b7395a9cd3de7dc4f0326c7a3f5c258f560776ac511d3be9612bb5674d5ef260d0035703eef9d6d96bae3ce667b9b5e89a304e7c60f","name":"canada.json","type":"application/json","lastModified":1637933864639.714,"size":1854026},{"id":"3476e6c620a369696e98c8781780889af9a6b34ac3ac8693413225939b429c30b1168f950cfb5ba8da25be41e1c3d720ff8bdb1338aae519bc2597c4ef1eb3c7","href":"https://static.observableusercontent.com/files/3476e6c620a369696e98c8781780889af9a6b34ac3ac8693413225939b429c30b1168f950cfb5ba8da25be41e1c3d720ff8bdb1338aae519bc2597c4ef1eb3c7","name":"canadaprovtopo.json","type":"application/json","lastModified":1637933864639.714,"size":522535},{"id":"3684e0788c94cd1ef0dc015eddff2a7cd9ed65e9e794117bb997ccdddff1581193656443f0a36a7c108359aadc5496d5014a41f1faf6c854e89395b30dd33d4f","href":"https://static.observableusercontent.com/files/3684e0788c94cd1ef0dc015eddff2a7cd9ed65e9e794117bb997ccdddff1581193656443f0a36a7c108359aadc5496d5014a41f1faf6c854e89395b30dd33d4f","name":"covid19-download(8).csv","type":"text/csv","lastModified":1639386323036.549,"size":1745505}] 2f:{"title":"Final Project Work Horse Notebook","cells":[{"id":0,"value":"# Final Project Work Horse Notebook","pinned":false,"hidden":false,"mode":"md"},{"id":1345,"value":"moment = require('moment')","pinned":true,"hidden":false,"mode":"ojs"},{"id":705,"value":"dates = md`#### Date Slider cell below `","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"viewof dateSlider3= {\n \n const dates = datevalues.map(dv =>formatDate(dv[0]));\n \n return Scrubber(numbers,{\n autoplay: false,\n initial: numbers.length - 1,\n loop: false,\n min: 0,\n max: datevalues.length-1, \n step: 1, \n value: datevalues.length-1,\n display:\" days\",\n\n description: \"Scrub through time\"\n });\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":2019,"value":"viewof dateSlider2= {\n \n const dates = datevalues.map(dv =>formatDate(dv[0]));\n \n return Scrubber(numbers,{\n autoplay: false,\n initial: numbers.length - 1,\n loop: false,\n min: 0,\n max: datevalues.length-1, \n step: 1, \n value: datevalues.length-1,\n display:\" days\",\n\n description: \"Scrub through time\"\n });\n} ","pinned":true,"hidden":false,"mode":"ojs"},{"id":711,"value":"selec = md`#### myselect choice cell below (ignore)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"viewof mySelect = complexInputValues(select, {\n options: covidStats,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":977,"value":"Choro = md`## Choropleth of Canada for: `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1191,"value":"fullscreen = {\n const button = html`