2b:null 2c:["$","title",null,{"children":"BUBBLE CHART&PIE CHART | HarrisWS | Observable"}] 31:Td18,function BubbleChart() { const width = 928; const height = 928; 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_keywords1 }) .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(); } 32:Tbe0,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', 'regular') .style('margin-bottom', '12px') .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: '#c5e3ff'}, {label: 'negative', value: negative, color: '#8fce00'} ]; 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', 1.5) .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', '13px') .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', '24px'); 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', '4px'); legendItem.append('span') .text(`${item.label}: ${item.value}time(s)`) .style('font-size', '14px') .style('color', '#945737'); }); container.append('div') .style('text-align', 'center') .style('margin-top', '16px') .style('font-size', '14px') .style('color', '#c5c7cb') .html(`

total occurrence: ${positive + negative}

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

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

`); }33:T62f,{ 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('not found'); } } else { console.error('undefined'); } }, 100); return container; }34:[{"id":"e8c019b108130380dfbebb43c1424121c14c102c7c6ed7116202fd48089b95bc0a1606de79a8030ae549604b097e6aa2c428dd5066ec71448ecabc41ece363d1","href":"https://static.observableusercontent.com/files/e8c019b108130380dfbebb43c1424121c14c102c7c6ed7116202fd48089b95bc0a1606de79a8030ae549604b097e6aa2c428dd5066ec71448ecabc41ece363d1","name":"forpiechart.json","type":"application/json","lastModified":1762918609494.792,"size":17088},{"id":"04512abb0c28e2e8269544562896a107295cdffb40e88878e4d085ca598d4109f284e267da16ebb405da2c47593e1b5706b72479912c96fd5504cf882d0c0531","href":"https://static.observableusercontent.com/files/04512abb0c28e2e8269544562896a107295cdffb40e88878e4d085ca598d4109f284e267da16ebb405da2c47593e1b5706b72479912c96fd5504cf882d0c0531","name":"amazon_reviews_keywords.csv","type":"text/csv","lastModified":1762920228148.8,"size":14034}] 2f:{"id":"28ea9e99f39bcac9","slug":null,"title":"BUBBLE CHART&PIE CHART","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2025-11-12T03:35:22.700Z","update_time":"$D2025-11-12T05:56:43.677Z","view_time":null,"first_public_time":"$D2025-11-12T04:26:38.957Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"e9ee0455100ac09c","login":"harrisws","name":"HarrisWS","avatar_url":"https://avatars-next.observableusercontent.com/e8d762f0d29dc54f4608255177e0bf51b76177ae5e3209af3175c1d00091fecf","tier":"starter_2024"},"version":37,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"676c0049beb0bf76","login":"yu-gan","name":"Harris Gan","avatar_url":"https://avatars-next.observableusercontent.com/e89b2096793e790266f363b3de24aa4f1e13c5b795ead89ab8f1081b9fd61e0a","tier":null}],"members":[{"type":"team","id":"e9ee0455100ac09c","login":"harrisws","name":"HarrisWS","avatar_url":"https://avatars-next.observableusercontent.com/e8d762f0d29dc54f4608255177e0bf51b76177ae5e3209af3175c1d00091fecf","tier":"starter_2024","role":"editor"},{"type":"individual","id":"676c0049beb0bf76","login":"yu-gan","name":"Harris Gan","avatar_url":"https://avatars-next.observableusercontent.com/e89b2096793e790266f363b3de24aa4f1e13c5b795ead89ab8f1081b9fd61e0a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"BUBBLE CHART&PIE CHART","cells":[{"id":0,"value":"# BUBBLE CHART&PIE CHART","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"amazon_reviews_keywords1 = await FileAttachment(\"amazon_reviews_keywords.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"amazon_reviews_keywords1","database":"$undefined"},{"id":5,"value":"forpiechart = FileAttachment(\"forpiechart.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"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"