25:["$","title",null,{"children":"chart3：各省的确诊，死亡，治愈，新确诊所占比例 | 1907040110 | Observable"}] 4c:Tb77,chart = { const svg = d3.create("svg") .attr("font-size", "10pt") .attr("cursor", "default") .attr("viewBox", [0, 0, width, height]); svg.append("g").call(g => drawGuidelines(g, chartData.map(d => d.year), d => d3.line()([[x(d) + hx, margin.top],[x(d) + hx, height - margin.bottom]])) ); svg.append("g").call(g => drawGuidelines(g, y.ticks().reverse().slice(1), d => d3.line()([[margin.left, y(d)],[width - margin.left - margin.right, y(d)]])) ); const g = svg.selectAll(".pie") .data(chartData) .join("g") .attr("class", "pie") .attr("transform", d => `translate(${x(d.year) + hx},${y(d.total)})`) .call(g => g.append("text") .attr("dy", "1em") .attr("text-anchor", "middle") .attr("transform", d => `translate(0,${r(d.total)})`) .text(d => toCurrency(d.total))); const pg = g.selectAll("g") .data(d => d3.pie()(d.values).map(p => ({pie: p, total: d.total}))) .join("g") .call(g => g.append("title") .text((d, i) => `${territories[i]}\n${toCurrency(d.pie.value)} (${(d.pie.value / d.total * 100).toFixed(1)}%)`)); const slice = pg.append("path") .attr("d", d => pie(d)()) .attr("opacity", 1) .attr("fill", (d, i) => color(territories[i])); const pct = pg.append("text") .attr("text-anchor", "middle") .attr("fill", "white") .attr("transform", (d, i) => { const c = pie(d).centroid(d.pie.value); return `translate(${c[0]},${c[1]})`; }) .attr("opacity", "0") .text(d => (d.pie.value / d.total * 100).toFixed(1) + "%"); svg.append("g").call(g => drawAxis(g, margin.left, 0, d3.axisLeft(y).ticks(height / 100, "s"))); svg.append("g").call(g => drawAxis(g, 0, height - margin.bottom, d3.axisBottom(x))); svg.append("g").call(drawLegend); return svg.node(); var legend; function drawLegend(g) { legend = g.attr("transform", `translate(${width - margin.right}, 15)`) .selectAll("g") .data(territories) .join("g") .attr("transform", (d, i) => `translate(0,${i * 20})`) .call(g => g.append("rect") .attr("rx", 3).attr("ry", 3) .attr("width", 20).attr("height", 15) .attr("fill", d => color(d))) .call(g => g.append("text").attr("dx", 25).attr("alignment-baseline", "hanging").text(d => d)) .on("mouseover", e => highlight(e)) .on("mouseout", () => highlight()); } function highlight(e) { const i = e ? legend.nodes().indexOf(e.currentTarget) : -1; slice.transition().duration(500).attr("opacity", (d, j) => i === -1 || j === i ? 1 : 0.3); pct.transition().duration(500) .attr("opacity", function(d, j) { if (j === i) { this.parentNode.parentNode.appendChild(this.parentNode); return 1; } else return 0; }); } } 4d:T1210,// Copyright 2021, Observable Inc. // Released under the ISC license. // https://observablehq.com/@d3/color-legend function Legend(color, { title, tickSize = 6, width = 320, 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(); } 4e:T739,// Copyright 2021, Observable Inc. // Released under the ISC license. // https://observablehq.com/@d3/color-legend function Swatches(color, { columns = null, format = x => x, swatchSize = 15, swatchWidth = swatchSize, swatchHeight = swatchSize, marginLeft = 0 } = {}) { const id = `-swatches-${Math.random().toString(16).slice(2)}`; function entity(character) { return `&#${character.charCodeAt(0).toString()};`; } if (columns !== null) return htl.html`

${color.domain().map(value => { const label = format(value); return htl.html`

${label}

`; })}

`; return htl.html`

${color.domain().map(value => htl.html`${format(value)}`)}

`; } 4f:[{"id":"a851055834bc1b2cecfab44d082a869cc9d78bb4d00fc8f9322d61b1dfbf3e14e3d3d842869001b1db80632e1f6291fa56d248ed883680a5cbaa1a8cbc5378a9","href":"https://static.observableusercontent.com/files/a851055834bc1b2cecfab44d082a869cc9d78bb4d00fc8f9322d61b1dfbf3e14e3d3d842869001b1db80632e1f6291fa56d248ed883680a5cbaa1a8cbc5378a9","name":"2021-12-29-china-1@1.csv","type":"text/csv","lastModified":1640873795279.827,"size":705}] 48:{"id":"1abd0fdf901f8e05","slug":"chart3","title":"chart3：各省的确诊，死亡，治愈，新确诊所占比例","thumbnail":"de4dc419c2416a8ee50068da824c1506fccb44071d4cf34c9912956eddfe6525","access_level":"public","create_time":"$D2021-12-30T13:02:26.671Z","update_time":"$D2021-12-31T02:26:25.213Z","view_time":null,"first_public_time":"$D2021-12-31T01:25:08.944Z","has_unpublished_edits":null,"fork":{"id":"b9ba04e86c627d65","slug":"bubble-pie-chart","title":"Bubble Pie Chart","owner":{"id":"f525e1fa7de7eeea","login":"instancia","name":"instancia paris"}},"stars":0,"starred":false,"owner":{"type":"team","id":"0a519974a7572d2a","login":"1907040110","name":"","avatar_url":null,"tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":694,"publish_version":694,"role":null,"authored":false,"authors":[{"type":"individual","id":"29f3eb8431bcbc5d","login":"1907040110","name":"","avatar_url":null,"tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"29f3eb8431bcbc5d","login":"1907040110","name":"","avatar_url":null,"tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"chart3：各省的确诊，死亡，治愈，新确诊所占比例","cells":[{"id":0,"value":"# chart3：各省的确诊，死亡，治愈，新确诊所占比例","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":41,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"drawAxis = (g, x, y, axis) => \n g.attr(\"transform\", `translate(${x},${y})`)\n .call(axis)\n .selectAll(\".tick text\")\n .attr(\"font-size\", \"9pt\");\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"drawGuidelines = (g, data, line) => {\n g.selectAll(\"path\")\n .data(data)\n .join(\"path\")\n .attr(\"stroke\", \"#ddd\")\n .attr(\"stroke-dasharray\", \"5,5\")\n .attr(\"d\", line);\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"//toCurrency = num => d3.format(\"$,.2f\")(num)\ntoCurrency = num => num\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"x = d3.scaleBand()\n .domain(chartData.map(d => d.year))\n .range([margin.left, width - margin.left - margin.right])\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"hx = x.bandwidth() / 2\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"r = d3.scaleLinear()\n .domain(d3.extent(chartData.map(d => d.total)))\n .range([hx / 2, hx])\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"pie = d => d3.arc()\n .innerRadius(0)\n .outerRadius(r(d.total))\n .startAngle(d.pie.startAngle)\n .endAngle(d.pie.endAngle)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"y = {\n const ext = d3.extent(chartData.map(d => d.total));\n // value(total) to length ratio of radius\n const f = (ext[1] - ext[0]) / (height - margin.bottom - margin.top * 2);\n // margin = 1.5 radius\n ext[0] -= hx * 1.5 * f;\n ext[1] += hx * 1.5 * f;\n \n return d3.scaleLinear().domain(ext).range([height - margin.top - margin.bottom, margin.top])\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"color = d3.scaleOrdinal(mycolors).domain(territories);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":658,"value":"mycolors = [\n \"#ffd0d6\",\n \"#b7dde0\",\n \"#fee19f\",\n \"#735b69\",\n \"#fec748\",\n \"#eac1db\",\n \"#aec33a\",\n \"#253f58\",\n \"#33c7f7\",\n \"#dfa0c8\",\n \"#2c439b\",\n \"#25255f\",\n \"#d92139\",\n \"#9d1e31\",\n \"#2c0136\",\n \"#fec804\",\n \"#f26322\",\n \"#7a2d59\",\n \"#181b46\",\n \"#eac9c0\",\n \"#dab2d3\",\n \"#9edae3\",\n \"#65c4d8\",\n \"#f6e0ae\",\n \"#ffb312\",\n \"#85cfb4\",\n \"#fd8411\",\n \"#f0bbc3\",\n \"#10a44a\",\n \"#ed186b\",\n \"#877d7c\",\n \"#ecec84\",\n \"#ffb69b\",\n \"#a299ca\"\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"\nterritories = [\"安徽\",\"澳门\",\"北京\",\"福建\",\"甘肃\",\"广东\",\"广西\",\"贵州\",\"海南\",\"河北\",\"河南\",\"黑龙江\",\"湖北\",\"湖南\",\"吉林\",\"江苏\",\"江西\",\"辽宁\",\"内蒙古\",\"宁夏\",\"青海\",\"山东\",\"山西\",\"陕西\",\"上海\",\"四川\",\"台湾\",\"天津\",\"西藏\",\"香港\",\"新疆\",\"云南\",\"浙江\",\"重庆\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":667,"value":"data = d3.csvParse(\n await FileAttachment(\"2021-12-29-china-1@1.csv\").text(),\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":432,"value":"sites = ['confirm', 'dead', 'heal', 'new_confirm']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"chartData = data.columns.slice(1).map((y) => {\n const values = data.map((d) => d[y]);\n return {\n year: y,\n values: values,\n total: values.reduce((a, b) => a + b)\n };\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"margin = ({left: 40, bottom: 50, top: 50, right: 150})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"height = 690","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":455,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":473,"value":"function legend({color, ...options}) {\n return Legend(color, options);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":469,"value":"function swatches({color, ...options}) {\n return Swatches(color, options);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4f","stdlib":"1"}} 24:null