45:["$","title",null,{"children":"Untitled | Jing D | Observable"}] 4d:T6c9, covidWorld = { const projection = d3.geoEqualEarth(); const path = d3.geoPath(projection); const width = 800; const outline = ({type: "Sphere"}); const height = function(){ const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(width, outline)).bounds(outline); const dy = Math.ceil(y1 - y0), l = Math.min(Math.ceil(x1 - x0), dy); projection.scale(projection.scale() * (l - 1) / l).precision(0.2); return dy; }(); const svg = d3.create("svg") .style("display", "block") .attr("viewBox", [0, 0, width, height]); const defs = svg.append("defs"); defs.append("path") .attr("id", "outline") .attr("d", path(outline)); defs.append("clipPath") .attr("id", "clip") .append("use") .attr("xlink:href", new URL("#outline", location)); const g = svg.append("g") .attr("clip-path", `url(${new URL("#clip", location)})`); g.append("use") .attr("xlink:href", new URL("#outline", location)) .attr("fill", "white"); g.append("g") .selectAll("path") .data(countries.features) .join("path") .attr("fill", d => covidWorldColor(covidWorldData.get(d.properties.name))) .attr("d", path) .append("title") .text(d => `${d.properties.name} ${covidWorldData.has(d.properties.name) ? covidWorldData.get(d.properties.name) : "N/A"}`); g.append("path") .datum(topojson.mesh(world, world.objects.countries, (a, b) => a !== b)) .attr("fill", "none") .attr("stroke", "white") .attr("stroke-linejoin", "round") .attr("d", path); svg.append("use") .attr("xlink:href", new URL("#outline", location)) .attr("fill", "none") .attr("stroke", "black"); return svg.node(); }4e:Tadb, chart = { const height = 450; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const x = d3.scaleLog([10, 4e6], [margin.left, width - margin.right]); const y = d3.scaleLinear([1, 30], [height - margin.bottom, margin.top]); const radius = d3.scaleSqrt([0, 10e8], [0, width / 24]); const xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).ticks(width / 80, ",")) .call(g => g.select(".domain").remove()) .call(g => g.append("text") .attr("x", width) .attr("y", margin.bottom - 4) .attr("fill", "currentColor") .attr("text-anchor", "end") .text("Cases →")); const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y)) .call(g => g.select(".domain").remove()) .call(g => g.append("text") .attr("x", -margin.left) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text("↑ Deaths (% of cases)")); const grid = g => g .attr("stroke", "currentColor") .attr("stroke-opacity", 0.1) .call(g => g.append("g") .selectAll("line") .data(x.ticks()) .join("line") .attr("x1", d => 0.5 + x(d)) .attr("x2", d => 0.5 + x(d)) .attr("y1", margin.top) .attr("y2", height - margin.bottom)) .call(g => g.append("g") .selectAll("line") .data(y.ticks()) .join("line") .attr("y1", d => 0.5 + y(d)) .attr("y2", d => 0.5 + y(d)) .attr("x1", margin.left) .attr("x2", width - margin.right)); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); svg.append("g") .call(grid); const circle = svg.append("g") .attr("stroke", "black") .selectAll("circle") .data(timelineDataAt("2020-01-01"), d => d.country) .join("circle") .sort((a, b) => d3.descending(a.population, b.population)) .attr("cx", d => x(Number.isNaN(d.cases)? 0: d.cases)) .attr("cy", d => y(Number.isNaN(d.deaths)? 0: d.deaths)) .attr("r", d => radius(Number.isNaN(d.cases)|| d.cases <= 10 ? 0 : d.population)) .attr("fill", d => timelineColor(d.region)) .call(circle => circle.append("title") .text(d => [d.country, d.region].join("\n"))); return Object.assign(svg.node(), { update(data) { circle.data(data, d => d.country) .sort((a, b) => d3.descending(a.population, b.population)) .attr("cx", d => x(Number.isNaN(d.cases)? 0: d.cases)) .attr("cy", d => y(Number.isNaN(d.deaths)? 0: d.deaths)) .attr("r", d => radius(Number.isNaN(d.cases) || d.cases < 10 ? 0 : d.population)); } }); }4f:Te82,function fullscreen({ className = 'custom-fullscreen', style = null, breakLayoutAtCell = 2, hideAfter = 9999, hideBefore = 0, left = 66, right = 33, button } = {}) { function hide({ hideAfter = Infinity, hideBefore = 0, reset = false } = {}) { let cells = document.getElementsByClassName('observablehq'); for (let i = 0; i < cells.length; i++) { if ((i < hideBefore || i > hideAfter) && !reset) cells[i].style.display = "none"; else cells[i].style.display = "block"; } // console.log("Hide", cells); return cells; } // Superfluous bling. const buttonStyle = style != null ? style : 'font-size:1rem;font-weight:bold;padding:8px;background:hsl(50,100%,90%);border:5px solid hsl(40,100%,50%); border-radius:4px;box-shadow:0 .5px 2px 1px rgba(0,0,0,.2);cursor: pointer'; button = button || html`