2b:null 2c:["$","title",null,{"children":"Bumble Chart & Pie Chart | Cu | Observable"}] 31:T10be,function BubbleChart() { const width = 1000; const height = 1000; 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() .range([ "#3b82f6", "#6366f1", "#8b5cf6", "#a855f7", "#d946ef", "#06b6d4", "#0ea5e9", "#2563eb", "#4f46e5", "#7c3aed", "#60a5fa", "#818cf8", "#a78bfa", "#c084fc", "#e879f9", "#22d3ee", "#38bdf8", "#3b82f6", "#6366f1", "#8b5cf6" ]); const pack = d3 .pack() .size([width - margin * 2, height - margin * 2]) .padding(4); 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: 12px 'Segoe UI', Arial, 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.08); d3.select(this) .select("text") .transition() .duration(200) .style("font-size", (d) => { const baseSize = 8; const scaleFactor = 0.15; return ( Math.max(10, Math.min(20, 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 = 8; const scaleFactor = 0.15; return Math.max(8, Math.min(18, 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", "#1e293b") .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.85) .attr("fill", (d) => color(d.data.category)) .attr("r", (d) => d.r) .attr("stroke", "#ffffff") .attr("stroke-width", 1.5); const text = node .append("text") .attr("clip-path", (d) => `circle(${d.r})`) .style("font-size", (d) => { const baseSize = 8; const scaleFactor = 0.15; return Math.max(8, Math.min(18, baseSize + d.r * scaleFactor)) + "px"; }) .style("font-weight", "500") .style("fill", "#1e293b"); 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`) .style("font-weight", (d, i) => (i === 0 ? "600" : "500")) .style("text-shadow", "0 1px 2px rgba(255,255,255,0.8)") .text((d) => d); text .append("tspan") .attr("x", 0) .attr("y", (d) => `${getNames(d.data).length / 2 + 0.35}em`) .attr("fill-opacity", 0.8) .style("font-size", "85%") .style("text-shadow", "0 1px 2px rgba(255,255,255,0.8)") .text((d) => format(d.value)); return svg.node(); }32:Tf73,function createPieChart(word, positive, negative, container) { container.html(""); const width = 280; const height = 280; const radius = Math.min(width, height) / 2; container .append("div") .style("text-align", "center") .style("font-weight", "600") .style("font-size", "18px") .style("margin-bottom", "20px") .style("color", "#2d3748") .text(`"${word}" Sentiment Analysis`); 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: "#34d399" }, { label: "Negative", value: negative, color: "#f87171" } ]; 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", 3) .style("opacity", 0.9) .style("cursor", "pointer") .on("mouseover", function (d) { d3.select(this) .transition() .duration(200) .attr("stroke-width", 4) .style("opacity", 1); }) .on("mouseout", function (d) { d3.select(this) .transition() .duration(200) .attr("stroke-width", 3) .style("opacity", 0.9); }) .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", "14px") .style("font-weight", "600") .style("fill", "white") .style("text-shadow", "0 1px 2px rgba(0,0,0,0.5)") .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", "25px") .style("padding", "0 20px"); const legendContainer = legend .append("div") .style("display", "flex") .style("justify-content", "center") .style("gap", "20px"); data.forEach((item) => { const legendItem = legendContainer .append("div") .style("display", "flex") .style("align-items", "center") .style("margin", "5px 0"); legendItem .append("div") .style("width", "16px") .style("height", "16px") .style("background", item.color) .style("margin-right", "8px") .style("border-radius", "4px") .style("border", "2px solid white") .style("box-shadow", "0 2px 4px rgba(0,0,0,0.1)"); legendItem .append("span") .text(`${item.label}: ${item.value}`) .style("font-size", "14px") .style("font-weight", "500") .style("color", "#4a5568"); }); const total = positive + negative; container .append("div") .style("text-align", "center") .style("margin-top", "20px") .style("padding", "15px") .style("background", "#f7fafc") .style("border-radius", "8px") .style("font-size", "14px") .style("color", "#4a5568").html(`

Total Occurrence: ${total}

Positive: ${( (positive / total) * 100 ).toFixed(1)}%

Negative: ${( (negative / total) * 100 ).toFixed(1)}%

`); }33:T158b,{ const container = html`

Amazon Reviews Keyword Analysis

Interactive bubble chart showing keyword frequency and sentiment distribution. Click on any bubble to view detailed sentiment analysis.

Sentiment Insights

Click on any keyword bubble to explore its positive and negative sentiment distribution

`; const style = html` `; container.appendChild(style); setTimeout(() => { const placeholder = container.querySelector("#pie-chart-placeholder"); try { if (typeof BubbleChart === "function") { const bubbleSvg = BubbleChart(); const bubbleChartDiv = container.querySelector("#bubble-chart"); if (bubbleChartDiv && bubbleSvg) { bubbleChartDiv.innerHTML = ""; bubbleChartDiv.appendChild(bubbleSvg); bubbleChartDiv.classList.add("chart-transition"); if (placeholder) { placeholder.style.display = "none"; } } else { console.error("气泡图容器或SVG未找到"); if (placeholder) { placeholder.innerHTML = "❌ 图表加载失败，请刷新页面重试"; placeholder.style.display = "block"; } } } else { console.error("BubbleChart函数未定义"); if (placeholder) { placeholder.innerHTML = "❌ 图表功能暂不可用"; placeholder.style.display = "block"; } } } catch (error) { console.error("图表初始化错误:", error); if (placeholder) { placeholder.innerHTML = "❌ 初始化过程中出现错误"; placeholder.style.display = "block"; } } }, 100); return container; }34:[{"id":"04512abb0c28e2e8269544562896a107295cdffb40e88878e4d085ca598d4109f284e267da16ebb405da2c47593e1b5706b72479912c96fd5504cf882d0c0531","href":"https://static.observableusercontent.com/files/04512abb0c28e2e8269544562896a107295cdffb40e88878e4d085ca598d4109f284e267da16ebb405da2c47593e1b5706b72479912c96fd5504cf882d0c0531","name":"amazon_reviews_keywords.csv","type":"text/csv","lastModified":1762927021883.412,"size":14034},{"id":"e8c019b108130380dfbebb43c1424121c14c102c7c6ed7116202fd48089b95bc0a1606de79a8030ae549604b097e6aa2c428dd5066ec71448ecabc41ece363d1","href":"https://static.observableusercontent.com/files/e8c019b108130380dfbebb43c1424121c14c102c7c6ed7116202fd48089b95bc0a1606de79a8030ae549604b097e6aa2c428dd5066ec71448ecabc41ece363d1","name":"forpiechart.json","type":"application/json","lastModified":1762927021921.495,"size":17088}] 2f:{"id":"4494a625867ea26f","slug":null,"title":"Bumble Chart & Pie Chart","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2025-11-12T05:53:33.187Z","update_time":"$D2025-11-12T07:40:41.124Z","view_time":null,"first_public_time":"$D2025-11-12T07:21:52.614Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"2e5bfe0ce6ce7549","login":"cu3","name":"Cu","avatar_url":"https://avatars-next.observableusercontent.com/9a975e6775bd901b7adc4d6c6bba2701ad77e8686ac470ab38928697c9dd54b6","tier":"starter_2024"},"version":39,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"45ee98670b70a40c","login":"lyan2","name":"Lyan","avatar_url":"https://avatars-next.observableusercontent.com/b21004147f9173553f17632b2395e7700828284262248816db713560d2687214","tier":null}],"members":[{"type":"team","id":"2e5bfe0ce6ce7549","login":"cu3","name":"Cu","avatar_url":"https://avatars-next.observableusercontent.com/9a975e6775bd901b7adc4d6c6bba2701ad77e8686ac470ab38928697c9dd54b6","tier":"starter_2024","role":"editor"},{"type":"individual","id":"45ee98670b70a40c","login":"lyan2","name":"Lyan","avatar_url":"https://avatars-next.observableusercontent.com/b21004147f9173553f17632b2395e7700828284262248816db713560d2687214","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Bumble Chart & Pie Chart","cells":[{"id":0,"value":"# Bumble Chart & Pie Chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4,"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":6,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"forpiechart = FileAttachment(\"forpiechart.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"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"