31:T878,data = [ { topic: "🚚 Shipping", aspect: "Delivery speed", opinion: "Arrived next day", mentions: 18 }, { topic: "🚚 Shipping", aspect: "Delivery speed", opinion: "Faster than expected", mentions: 11 }, { topic: "🚚 Shipping", aspect: "Delivery delays", opinion: "Took over a week", mentions: 8 }, { topic: "🚚 Shipping", aspect: "Delivery delays", opinion: "No tracking updates", mentions: 5 }, { topic: "🚚 Shipping", aspect: "Packaging", opinion: "Well protected box", mentions: 9 }, { topic: "✨ Product Quality", aspect: "Build quality", opinion: "Feels premium", mentions: 14 }, { topic: "✨ Product Quality", aspect: "Build quality", opinion: "Solid materials", mentions: 9 }, { topic: "✨ Product Quality", aspect: "Durability issues", opinion: "Broke within a month", mentions: 7 }, { topic: "✨ Product Quality", aspect: "Consistency", opinion: "Color differs from photos", mentions: 6 }, { topic: "💰 Pricing", aspect: "Value for money", opinion: "Great value", mentions: 13 }, { topic: "💰 Pricing", aspect: "Value for money", opinion: "Would buy again", mentions: 8 }, { topic: "💰 Pricing", aspect: "Price increases", opinion: "Got more expensive", mentions: 6 }, { topic: "🎧 Support", aspect: "Helpful agents", opinion: "Solved it right away", mentions: 10 }, { topic: "🎧 Support", aspect: "Slow responses", opinion: "Waited days for a reply", mentions: 8 }, { topic: "🎧 Support", aspect: "Refund friction", opinion: "Refund was complicated", mentions: 6 }, { topic: "📱 App Experience", aspect: "Easy ordering", opinion: "Checkout is quick", mentions: 11 }, { topic: "📱 App Experience", aspect: "App crashes", opinion: "App keeps crashing", mentions: 7 }, { topic: "📱 App Experience", aspect: "Search gaps", opinion: "Search misses items", mentions: 5 } ]32:T698,worldRows = { // world-countries(지역 계층·좌표) + country-json(인구) + World Bank API(일인당 GDP 최신연도) const [countries, popList, gdpRes] = await Promise.all([ fetch("https://cdn.jsdelivr.net/npm/world-countries@5/countries.json").then( (r) => r.json() ), fetch( "https://cdn.jsdelivr.net/npm/country-json@1/src/country-by-population.json" ).then((r) => r.json()), fetch( "https://api.worldbank.org/v2/country/all/indicator/NY.GDP.PCAP.CD?format=json&per_page=400&mrv=1" ).then((r) => r.json()) ]); const ALIAS = { "DR Congo": "The Democratic Republic of Congo", Türkiye: "Turkey", Libya: "Libyan Arab Jamahiriya", Fiji: "Fiji Islands" }; const popMap = new Map( popList.filter((p) => p.population).map((p) => [p.country, p.population]) ); const gdpMap = new Map( gdpRes[1] .filter((r) => r.value != null) .map((r) => [r.countryiso3code, r.value]) ); return countries.flatMap((c) => { const name = c.name.common; const population = popMap.get(name) ?? popMap.get(ALIAS[name]) ?? popMap.get(c.name.official); const gdpPerCapita = gdpMap.get(c.cca3); const gdp = population * gdpPerCapita; if (!population || !gdpPerCapita || c.region === "Antarctic") return []; return [ { continent: c.region, subregion: c.subregion, country: name, country_ko: c.translations.kor.common, population, gdpPerCapita, gdp, latlng: c.latlng, ...c } ].map((d) => ({ ...d, continent: d.region === "Americas" ? d.subregion : d.region })); }); }33:T766,geoPositions = { const byContinent = {}; const bySubregion = {}; const byCountry = {}; const byCountry_ko = {}; worldRows.forEach((r) => { (byContinent[r.continent ?? "Unknown"] ??= []).push(r); (bySubregion[r.subregion ?? "Unknown"] ??= []).push(r); (byCountry[r.country ?? "Unknown"] ??= []).push(r); (byCountry_ko[r.country_ko ?? "Unknown"] ??= []).push(r); }); const continents = Object.entries(byContinent).map(([key, rs]) => ({ key, depth: 1, x: (rs.reduce((s, r) => s + r.latlng[1], 0) / rs.length + 180) / 360, y: (90 - rs.reduce((s, r) => s + r.latlng[0], 0) / rs.length) / 180 })); const subregions = Object.entries(bySubregion).map(([key, rs]) => ({ key, depth: 2, x: (rs.reduce((s, r) => s + r.latlng[1], 0) / rs.length + 180) / 360, y: (90 - rs.reduce((s, r) => s + r.latlng[0], 0) / rs.length) / 180 })); const countries_ko = Object.entries(byCountry_ko).map(([key, rs]) => ({ key, depth: 2, x: (rs.reduce((s, r) => s + r.latlng[1], 0) / rs.length + 180) / 360, y: (90 - rs.reduce((s, r) => s + r.latlng[0], 0) / rs.length) / 180 })); const countries = Object.entries(byCountry).map(([key, rs]) => ({ key, depth: 3, x: (rs.reduce((s, r) => s + r.latlng[1], 0) / rs.length + 180) / 360, y: (90 - rs.reduce((s, r) => s + r.latlng[0], 0) / rs.length) / 180 })); return [ { key: "Americas", depth: 1, x: 0.9, y: 0.3 }, { key: "North America", depth: 1, x: 0.9, y: 0.3 }, { key: "South America", depth: 1, x: 0.9, y: 0.6 }, { key: "Central America", depth: 1, x: 0.9, y: 0.42 }, { key: "Caribbean", depth: 1, x: 0.9, y: 0.4 }, ...continents, ...subregions, ...countries_ko, ...countries ]; }34:[] 2f:{"title":"VoronoiBubble Library","cells":[{"id":0,"value":"# VoronoiBubble Library","pinned":false,"hidden":false,"mode":"md"},{"id":20,"value":"Flat rows in, a pebble-shaped Voronoi treemap out. Your own column names work\nas-is via `levels`/`value` — here `topic → aspect → opinion`, sized by `mentions`.\nClick a cell for the quoted opinion.\n- Library: [pxd-uxtech/voronoi-bubble-dist](https://github.com/pxd-uxtech/voronoi-bubble-dist) (MIT)","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"VB = {\n const m = await import(\n \"https://cdn.jsdelivr.net/gh/pxd-uxtech/voronoi-bubble-dist@v2.1.3/dist/voronoi-bubble.standalone.js\"\n );\n return m;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"chart = {\n const svg = new VB.VoronoiBubble().render(data, {\n width: 1200,\n height: 900,\n levels: [\"topic\", \"aspect\", \"opinion\"], // 원본 컬럼명 그대로\n value: \"mentions\",\n title: `What customer reviews talk about`,\n caption: \"cell area = number of mentions · click a cell\",\n showGroupLabel: true,\n showPercent: true,\n onClick: (cell) =>\n VB.showVoronoiPopup(cell, {\n format:\n \"“{opinion}”
{aspect} · {topic}
{mentions} mentions\"\n })\n });\n return svg;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"viewof controls = Inputs.form({\n geo: Inputs.toggle({\n label: \"Pin continents geographically (positions)\",\n value: true\n }),\n gdp: Inputs.toggle({\n label: \"Color by GDP per capita (colorFunc + viridis)\",\n value: false\n })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"worldChart = {\n const logs = worldRows.map((d) => Math.log10(d.gdpPerCapita));\n const [lo, hi] = [Math.min(...logs), Math.max(...logs)];\n return new VB.VoronoiBubble().render(worldRows, {\n width: 1200,\n height: 900,\n levels: [\"continent\", \"country_ko\"],\n value: \"population\",\n title: `World Population`,\n caption: \"country-json 2024\",\n positions: controls.geo ? geoPositions : null,\n colorFunc: controls.gdp\n ? (rows) =>\n d3sc.interpolateGnBu(\n 0.1 + 0.85 * ((Math.log10(rows[0].gdpPerCapita) - lo) / (hi - lo))\n )\n : null,\n onClick: (cell) =>\n VB.showVoronoiPopup(cell, {\n format: \"

{flag} {country}

Pop:{population}\"\n }),\n showPercent: true,\n labelMode: \"show\",\n ratioLimit: 0.0001,\n sizeLimit: 2 * 10 ** 8 // 값 라벨 숨김\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"worldChart_gdp_ko = {\n const logs = worldRows.map((d) => Math.log10(d.gdpPerCapita));\n const [lo, hi] = [Math.min(...logs), Math.max(...logs)];\n return new VB.VoronoiBubble().render(worldRows, {\n width: 1200,\n height: 900,\n levels: [\"continent\", \"country_ko\"],\n value: \"gdp\",\n title: `World GDP`,\n caption:\n \"area = GDP\" +\n (controls.gdp ? \" · color = GDP per capita (viridis, log)\" : \"\"),\n positions: controls.geo ? geoPositions : null,\n colorFunc: controls.gdp\n ? (rows) =>\n d3sc.interpolateGnBu(\n 0.1 + 0.85 * ((Math.log10(rows[0].gdpPerCapita) - lo) / (hi - lo))\n )\n : null,\n onClick: (cell) =>\n VB.showVoronoiPopup(cell, {\n format: \"

{flag} {country}

Pop:{population}\"\n }),\n showPercent: true,\n labelMode: \"show\",\n ratioLimit: 0.0001,\n\n sizeLimit: 2 * 10 ** 12 // 값 라벨 숨김\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"worldChart2 = {\n const logs = worldRows.map((d) => Math.log10(d.gdpPerCapita));\n const [lo, hi] = [Math.min(...logs), Math.max(...logs)];\n return new VB.VoronoiBubble().render(worldRows, {\n width: 1200,\n height: 900,\n levels: [\"continent\", \"subregion\", \"country\"],\n value: \"gdp\",\n title: `World GDP`,\n caption:\n \"area = GDP\" +\n (controls.gdp ? \" · color = GDP per capita (viridis, log)\" : \"\"),\n positions: controls.geo ? geoPositions : null,\n colorFunc: controls.gdp\n ? (rows) =>\n d3sc.interpolateGnBu(\n 0.1 + 0.85 * ((Math.log10(rows[0].gdpPerCapita) - lo) / (hi - lo))\n )\n : null,\n onClick: (cell) =>\n VB.showVoronoiPopup(cell, {\n format: \"

{flag} {country}

Pop:{population}\"\n }),\n showPercent: true,\n labelMode: \"show\",\n ratioLimit: 0.0005,\n sizeLimit: 2 * 10 ** 18 // 값 라벨 숨김\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"d3sc = import(\"https://cdn.jsdelivr.net/npm/d3-scale-chromatic@3/+esm\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"세계 인구 셀의 데이터 출처: [world-countries](https://www.npmjs.com/package/world-countries)(지역 계층·좌표), [country-json](https://www.npmjs.com/package/country-json)(인구), [World Bank API](https://api.worldbank.org)(일인당 GDP). Taiwan·Kosovo는 인구/GDP 소스에 없어 제외됩니다.","pinned":false,"hidden":false,"mode":"md"}],"files":"$W34","stdlib":"1","titling":"auto"}