31:T7b1,chart = { const svg = d3.select(DOM.svg(chartWidth, height)); let counter = 1; svg.append("g").call(xAxis); svg .append("g") .attr("class", "yAxis") .call(yAxis) .call(g => g .selectAll(".tick text") .attr("font-size", 12) .attr("y", -3) ); const group = svg .append("g") .selectAll("g") .data(data.series) .join("g") .attr("transform", d => `translate(0,${y(d.name) + 1})`) .on("click", function(d,i,nodes) { console.log(d3.select(this).data()[0].name); console.log(d3.selectAll('g.yAxis text').data()[0]); let odd = counter % 2 === 1; if (odd) { d3.selectAll('path.partArea').attr('opacity', 0.2); d3.selectAll('path.partLine').attr('opacity', 0.2); d3.selectAll('g.yAxis text').attr('opacity', 0.2); d3.selectAll('g.yAxis text').filter(d => d == d3.select(this).data()[0].name).attr('fill', 'green').attr('opacity',1); d3.select(this).select('path.partArea').attr('fill', 'green'); d3.select(this).select('path.partArea').attr('opacity', 1); d3.select(this) .append("g") .attr("class", "zAxis") .call(zAxis); }else{ d3.selectAll("g.zAxis").remove(); d3.selectAll('path.partArea').attr('opacity', fillOpacity); d3.selectAll('path.partLine').attr('opacity', fillOpacity); d3.selectAll('g.yAxis text').attr('opacity', 1).attr('fill', 'black'); d3.select(this).select('path.partArea').attr('fill', fillColor); } counter++; }); group .append("path") .attr("class", "partArea") .attr("fill", fillColor) .attr("opacity", fillOpacity) .attr("d", d => area(d.values)); group .append("path") .attr("class", "partLine") .attr("fill", "none") .attr("stroke", strokeColor) .attr("d", 0) .attr("d", d => line(d.values)); return svg.node(); }32:T474,html ` pillCSS `33:[] 2f:{"title":"Covid-19 Global Dataset Visualization","cells":[{"id":0,"value":"# Covid-19 Global Dataset Visualization","pinned":false,"hidden":false,"mode":"md"},{"id":536,"value":"pills = {\n const pillData = ['Ridgeline Plot', 'Arquero', 'd3-listener', 'Dynamic Inputs'];\n return html `\n

\n ${pillData.map(d => '

'+d+'

')}\n

\n`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":514,"value":"

All data available in this dataset, and consequently analyzed and visualized in this notebook, are collected from WorldOMeters.\nMore details of the data can be found here on Kaggle.

D3 Ridgeline Plot allows to visualize the distribution of several numeric variables. Click each small area to focus on the individual country.

","pinned":false,"hidden":false,"mode":"html"},{"id":296,"value":"viewof varSelector = select({\n options: [\"daily_new_cases\",\"new_cases_per_1m\", \n \"daily_new_deaths\", \"new_deaths_per_1m\", \n \"active_cases\", \"active_cases_per_1m\",\n \"cumulative_total_cases\", \"cumulative_total_deaths\"],\n value: \"daily_new_cases\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":504,"value":"viewof varSort= select({\n options: [\"Sort by Alphabet\",\"Sort by Number\"],\n value: \"Sort by Alphabet\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"# Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":105,"value":"chartWidth = Math.min(640, width)","pinned":true,"hidden":false,"mode":"ojs"},{"id":107,"value":"height = 2800","pinned":true,"hidden":false,"mode":"ojs"},{"id":109,"value":"margin = ({top: 80, right: 40, bottom: 30, left: 140})","pinned":true,"hidden":false,"mode":"ojs"},{"id":132,"value":"fillColor = '#94c1cf'","pinned":true,"hidden":false,"mode":"ojs"},{"id":130,"value":"strokeColor = '#707070'","pinned":true,"hidden":false,"mode":"ojs"},{"id":134,"value":"viewof fillOpacity = slider({\n value: 0.7,\n step: 0.1,\n title: \"Fill opacity\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":118,"value":"viewof overlap = slider({\n value: 5,\n min: 1,\n max: 20,\n step: 1,\n title: \"Overlap\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":111,"value":"x = d3\n .scaleTime()\n .domain(d3.extent(data.dates))\n .range([margin.left, chartWidth - margin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":114,"value":"y = d3.scalePoint()\n .domain(data.series.map(d => d.name))\n .range([margin.top, height - margin.bottom])","pinned":true,"hidden":false,"mode":"ojs"},{"id":116,"value":"z = d3.scaleLinear()\n .domain([0, d3.max(data.series, d => d3.max(d.values))]).nice()\n .range([0, -overlap * y.step()])","pinned":true,"hidden":false,"mode":"ojs"},{"id":120,"value":"xAxis = g =>\n g.attr(\"transform\", `translate(0,${height - margin.bottom})`).call(\n d3\n .axisBottom(x)\n .ticks(chartWidth / 80)\n .tickSizeOuter(0)\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":122,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).tickSize(0).tickPadding(4))\n .call(g => g.select(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs"},{"id":342,"value":"zAxis = g => g\n .attr(\"transform\", `translate(${chartWidth - margin.right},0)`)\n .call(d3.axisRight(z)\n .ticks(4) \n .tickSize(`${-(chartWidth - margin.left - margin.right - 10)}`)\n .tickFormat(d3.format('.2s')))\n .call(g => g.select(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs"},{"id":124,"value":"area = d3.area()\n .curve(d3.curveBasis)\n .defined(d => !isNaN(d))\n .x((d, i) => x(data.dates[i]))\n .y0(0)\n .y1(d => z(d))","pinned":true,"hidden":false,"mode":"ojs"},{"id":126,"value":"line = area.lineY1()","pinned":true,"hidden":false,"mode":"ojs"},{"id":79,"value":"data = {\n let data = varSort === \"Sort by Alphabet\" ? \n JSON.parse(JSON.stringify(raw)) : \n JSON.parse(JSON.stringify(raw)).sort((a,b) => b[varSelector] - a[varSelector]);\n \n data.forEach(d => {\n d.date = dateParse(d.date);\n d.value = +d[varSelector];\n });\n const dates = Array.from(d3.group(data, d => +d.date).keys()).sort(\n d3.ascending\n );\n return {\n dates: dates.map(d => new Date(d)),\n series: d3\n .groups(data, d => d.country)\n .map(([name, values]) => {\n const value = new Map(values.map(d => [+d.date, d.value]));\n return { name, values: dates.map(d => value.get(d)) };\n })\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":318,"value":"raw = aq.from(raw_data)\n .join(aq.from(raw_country).select('country', 'population'), ['country', 'country'])\n .derive({new_cases_per_1m: d => (d.daily_new_cases / d.population) * 1000000, \n new_deaths_per_1m: d => (d.daily_new_deaths / d.population) * 1000000,\n active_cases_per_1m: d => (d.active_cases / d.population) * 1000000\n })\n .objects()","pinned":true,"hidden":false,"mode":"ojs"},{"id":258,"value":"raw_data = d3.csv('https://raw.githubusercontent.com/zhihaohowardyao/Howard/master/data/worldometer_coronavirus_daily_data.csv')","pinned":true,"hidden":false,"mode":"ojs"},{"id":316,"value":"raw_country = d3.csv('https://raw.githubusercontent.com/zhihaohowardyao/Howard/master/data/worldometer_coronavirus_summary_data.csv')","pinned":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"dateParse = d3.timeParse(\"%Y-%m-%d\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"confirmed = aq.from(confirmedCases)\n .select(aq.not('Province/State', 'Lat', 'Long'))\n .fold(aq.not('Country/Region'))\n .groupby(['Country/Region', 'key'])\n .derive({sum: d => op.sum(d.value), \n date: d => op.parse_date(d.key)})\n .rename({'Country/Region':'Country', 'sum':'case'})\n .objects()","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"confirmedCases = d3.csv('https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_confirmed_global.csv')","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"import { slider, select, color } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"import { aq, op } from '@uwdata/arquero'","pinned":false,"hidden":false,"mode":"ojs"},{"id":538,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":469,"value":"html`css\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3@v6\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}