2b:null 2c:["$","title",null,{"children":"Bubble Chart | Ziqian Zhang | Observable"}] 31:Tc8c, function createPieChart(word, positive, negative, container) { container.html(""); const width = 250; const height = 250; const radius = Math.min(width, height) / 2; container.append("div") .style("text-align", "center") .style("font-weight", "bold") .style("margin-bottom", "15px") .text(`"${word}" value`); const svg = container.append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("transform", `translate(${width/2}, ${height/2})`); const data = [ {label: "positive", value: positive, color: "#28a745"}, {label: "negative", value: negative, color: "#dc3545"} ]; const pie = d3.pie() .value(d => d.value) .sort(null); const arc = d3.arc() .innerRadius(0) .outerRadius(radius); const arcs = svg.selectAll("arc") .data(pie(data)) .enter() .append("g") .attr("class", "arc"); arcs.append("path") .attr("d", arc) .attr("fill", d => d.data.color) .attr("stroke", "white") .attr("stroke-width", 2) .style("opacity", 0.8) .transition() .duration(1000) .attrTween("d", function(d) { const i = d3.interpolate({startAngle: 0, endAngle: 0}, d); return function(t) { return arc(i(t)); }; }); arcs.append("text") .attr("transform", d => `translate(${arc.centroid(d)})`) .attr("text-anchor", "middle") .attr("dy", "0.35em") .style("font-size", "12px") .style("font-weight", "bold") .style("fill", "white") .text(d => { const percent = (d.data.value / (positive + negative) * 100).toFixed(1); return percent + "%"; }); const legend = container.append("div") .style("text-align", "center") .style("margin-top", "20px"); data.forEach(item => { const legendItem = legend.append("div") .style("margin", "8px 0"); legendItem.append("span") .style("display", "inline-block") .style("width", "12px") .style("height", "12px") .style("background", item.color) .style("margin-right", "8px") .style("border-radius", "2px"); legendItem.append("span") .text(`${item.label}: ${item.value}time(s)`) .style("font-size", "14px") .style("color", "#495057"); }); container.append("div") .style("text-align", "center") .style("margin-top", "15px") .style("font-size", "14px") .style("color", "#6c757d") .html(`

total occurrence: ${positive + negative}

Positive proportion: ${((positive/(positive+negative))*100).toFixed(1)}%

Negative proportion: ${((negative/(positive+negative))*100).toFixed(1)}%

`); }32:Te03, function BubbleChart() { const width = 950; const height = 950; const margin = 1; const getName = d => { const name = d.id.replace(/^amazon_reviews\./, ''); return name; }; const getNames = d => { const nodeName = getName(d); return nodeName.split(/(?=[A-Z][a-z])|\s+/g); }; const format = d3.format(",d"); const color = d3.scaleOrdinal (d3.schemePaired); const pack = d3.pack() .size([width - margin * 2, height - margin * 2]) .padding(3); const hierarchy = d3.hierarchy({children: amazon_reviews_keywords }) .sum(d => d.value); const root = pack(hierarchy); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [-margin, -margin, width, height]) .attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;") .attr("text-anchor", "middle"); const leaves = root.leaves(); const node = svg.append("g") .selectAll("g") .data(leaves) .join("g") .attr("transform", d => `translate(${d.x},${d.y})`); node.on("mouseover", function(event, d) { d3.select(this).select("circle") .transition() .duration(200) .attr("r", d => d.r * 1.1); d3.select(this).select("text") .transition() .duration(200) .style("font-size", d => { const baseSize = 3; const scaleFactor = 0.3; return Math.max(8, Math.min(16, baseSize + d.r * scaleFactor)) + "px"; }); }) .on("mouseout", function(event, d) { d3.select(this).select("circle") .transition() .duration(200) .attr("r", d => d.r); d3.select(this).select("text") .transition() .duration(200) .style("font-size", d => { const baseSize = 3; const scaleFactor = 0.3; return Math.max(6, Math.min(14, baseSize + d.r * scaleFactor)) + "px"; }); }); node.on("click", function(event, d) { const word = getName(d.data); if (forpiechart[word]) { const {positive, negative} = forpiechart[word]; d3.select("#pie-chart-container").html(""); createPieChart(word, positive, negative, d3.select("#pie-chart-container")); node.select("circle") .attr("stroke", null) .attr("stroke-width", 1); d3.select(this).select("circle") .attr("stroke", "#000") .attr("stroke-width", 3) .attr("stroke-opacity", 0.8); } } ); node.append("title") .text(d => `${d.data.id}\nCategory: ${d.data.category}\nValue: ${format(d.value)}`); node.append("circle") .attr("fill-opacity", 0.7) .attr("fill", d => color(d.data.category)) .attr("r", d => d.r) const text = node.append("text") .attr("clip-path", d => `circle(${d.r})`) .style("font-size", d => { const baseSize = 3; const scaleFactor = 0.3; return Math.max(6, Math.min(14, baseSize + d.r * scaleFactor)) + "px"; }) text.selectAll("tspan") .data(d => getNames(d.data)) .join("tspan") .attr("x", 0) .attr("y", (d, i, nodes) => `${i - nodes.length / 2 + 0.35}em`) .text(d => d); text.append("tspan") .attr("x", 0) .attr("y", d => `${getNames(d.data).length / 2 + 0.35}em`) .attr("fill-opacity", 0.7) .text(d => format(d.value)); return svg.node(); } 33:T65f,{ const container = html`

Amazon Reviews Key Bubble Chart

📊 analysis

click to view value

`; setTimeout(() => { if (typeof BubbleChart === 'function') { const bubbleSvg = BubbleChart(); const bubbleChartDiv = container.querySelector('#bubble-chart'); if (bubbleChartDiv && bubbleSvg) { bubbleChartDiv.appendChild(bubbleSvg); } else { console.error('气泡图容器或SVG未找到'); } } else { console.error('BubbleChart函数未定义'); } }, 100); return container; }34:[{"id":"e8c019b108130380dfbebb43c1424121c14c102c7c6ed7116202fd48089b95bc0a1606de79a8030ae549604b097e6aa2c428dd5066ec71448ecabc41ece363d1","href":"https://static.observableusercontent.com/files/e8c019b108130380dfbebb43c1424121c14c102c7c6ed7116202fd48089b95bc0a1606de79a8030ae549604b097e6aa2c428dd5066ec71448ecabc41ece363d1","name":"forpiechart.json","type":"application/json","lastModified":1762918666905.105,"size":17088},{"id":"04512abb0c28e2e8269544562896a107295cdffb40e88878e4d085ca598d4109f284e267da16ebb405da2c47593e1b5706b72479912c96fd5504cf882d0c0531","href":"https://static.observableusercontent.com/files/04512abb0c28e2e8269544562896a107295cdffb40e88878e4d085ca598d4109f284e267da16ebb405da2c47593e1b5706b72479912c96fd5504cf882d0c0531","name":"amazon_reviews_keywords.csv","type":"text/csv","lastModified":1762918666883.255,"size":14034}] 2f:{"id":"c6d1665cb7905f67","slug":null,"title":"Bubble Chart","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2025-11-12T03:36:37.744Z","update_time":"$D2025-11-12T04:52:50.652Z","view_time":null,"first_public_time":"$D2025-11-12T03:36:37.744Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"e0ef1e41cff0a19e","login":"ronark-zhang","name":"Ziqian Zhang","avatar_url":"https://avatars-next.observableusercontent.com/7d1e607006e72370d5744d95fc74eabe5ece460211fdf4499f44d3793f25530f","tier":"starter_2024"},"version":17,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"aa551a4ecdb12ba2","login":"ronark-zhang","name":"Ronark Zhang","avatar_url":"https://avatars-next.observableusercontent.com/33c5839336e85ca0a4e7efe82fcd22f5d23f927d783fc377b179bbeeaba2bbed","tier":null}],"members":[{"type":"individual","id":"aa551a4ecdb12ba2","login":"ronark-zhang","name":"Ronark Zhang","avatar_url":"https://avatars-next.observableusercontent.com/33c5839336e85ca0a4e7efe82fcd22f5d23f927d783fc377b179bbeeaba2bbed","tier":null,"role":"editor"},{"type":"team","id":"e0ef1e41cff0a19e","login":"ronark-zhang","name":"Ziqian Zhang","avatar_url":"https://avatars-next.observableusercontent.com/7d1e607006e72370d5744d95fc74eabe5ece460211fdf4499f44d3793f25530f","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Bubble Chart","cells":[{"id":0,"value":"# Bubble Chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"amazon_reviews_keywords = FileAttachment(\"amazon_reviews_keywords.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"forpiechart = FileAttachment(\"forpiechart.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"