2c:null 2d:["$","title",null,{"children":"Cluster Bubble Continents with Data | flammenz | Observable"}] 32:T9f3, chart = { var svg = d3.create("svg").attr("width", w).attr("height", h); var div = d3.create("div").style("width", `${w}px`).style("height", `${h}px`);// will be used to make hover and tooltip var chart = svg.append("g"); var myColor = d3.scaleOrdinal() .domain(["EU", "AF","AN", "AS", "SA","NA","OC"]) .range(d3.schemeSet3); const nodes = pack().leaves(); const simulation = d3.forceSimulation(nodes) .force("x", d3.forceX(w/ 2).strength(0.01)) .force("y", d3.forceY(h / 2).strength(0.01)) .force("cluster", forceCluster()) .force("collide", forceCollide()); // const svg = d3.select(DOM.svg(w, h)); var p = cluster.toLowerCase().replace(" ", ""); var max = d3.max(countrieslatestfile.map((z) => +z[p])); const node = svg.append("g") .selectAll("circle") .data(nodes) .join("circle") .attr("cx", (d) => d.x) .attr("cy", (d) => d.y) .attr("r", (d) => d.r ) .attr("fill", d => color(d.data.group)) .call(drag(simulation)) .on("pointerenter", function () { d3.select(this) .attr("stroke", "black") .attr("stroke-width", 1.5) .attr("stroke-opacity", 1); }) .on("pointerleave", function () { d3.select(this) .attr("stroke", "grey") .attr("stroke-width", 0.5) .attr("stroke-opacity", 0.5) .attr("fill-opacity", 1); }) node.transition() .delay((d, i) => Math.random() * 500) .duration(750) .attrTween("r", d => { const i = d3.interpolate(0, d.r); return t => d.r = i(t); }) //mousehover color /* trying to show which parameter is currently selected as text ,i.e if airports selected must showe Airports : 254*/ .nodes() .forEach(function (c, i) { //let hover = country_data[i]; let hover = countrieslatestfile[i]; let content = `

${hover.CountryName}

${hover[p]}

CountryCode : ${hover.CountryCode}

ContinentCode : ${hover.ContinentCode}

${d3.format(',')(hover[p ])}

` tippy(c, { content: content, allowHTML: true, theme: "light-border" }); }); simulation.on("tick", () => { node .attr("cx", d => d.x) .attr("cy", d => d.y); }); invalidation.then(() => simulation.stop()); return svg.node(); }33:T47f,function forceCollide() { const alpha = 0.4; // fixed for greater rigidity! const padding1 = 2; // separation between same-color nodes const padding2 = 6; // separation between different-color nodes let nodes; let maxRadius; function force() { const quadtree = d3.quadtree(nodes, d => d.x, d => d.y); for (const d of nodes) { const r = d.r + maxRadius; const nx1 = d.x - r, ny1 = d.y - r; const nx2 = d.x + r, ny2 = d.y + r; quadtree.visit((q, x1, y1, x2, y2) => { if (!q.length) do { if (q.data !== d) { const r = d.r + q.data.r + (d.data.group === q.data.data.group ? padding1 : padding2); let x = d.x - q.data.x, y = d.y - q.data.y, l = Math.hypot(x, y); if (l < r) { l = (l - r) / l * alpha; d.x -= x *= l, d.y -= y *= l; q.data.x += x, q.data.y += y; } } } while (q = q.next); return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1; }); } } force.initialize = _ => maxRadius = d3.max(nodes = _, d => d.r) + Math.max(padding1, padding2); return force; }34:[{"id":"09880d706153a359d54a941623e4e147116551a924695d0a2121103c62bbbeb8e5f048d3430f98e27a74003810fa1f908b05b84164b4ef70c2ebda07197475e4","href":"https://static.observableusercontent.com/files/09880d706153a359d54a941623e4e147116551a924695d0a2121103c62bbbeb8e5f048d3430f98e27a74003810fa1f908b05b84164b4ef70c2ebda07197475e4","name":"countries.json","type":"application/json","lastModified":1660854133160,"size":1068803},{"id":"e2c170a82e9ee295e2bc2b7dabe966c205377fd1a694d5060ce9e7c8a8eae56c8cafc5b92741759bbc3d82640b0bcde1023e0c6e9919786b021492de851ca465","href":"https://static.observableusercontent.com/files/e2c170a82e9ee295e2bc2b7dabe966c205377fd1a694d5060ce9e7c8a8eae56c8cafc5b92741759bbc3d82640b0bcde1023e0c6e9919786b021492de851ca465","name":"countrieslatest-.csv","type":"text/csv","lastModified":1660854133160,"size":17001}] 30:{"id":"f8400c6ffb5f6b96","slug":"clusterringwithdata","title":"Cluster Bubble Continents with Data","thumbnail":"2617627ead79ab8af57e9f2dc441bb64f3542bde87e64ca795919b5eb8955d3f","access_level":"unlisted","create_time":"$D2022-08-18T20:22:13.160Z","update_time":"$D2022-09-09T16:29:44.523Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"520ce4770f3d4765","login":"sandeshdhungel","name":"flammenz","avatar_url":"https://avatars-next.observableusercontent.com/3a0479ac49e86a97a09ab6b92baf793644800d56de6abde3b9a374a02a5be889","tier":"starter_2024"},"version":879,"publish_version":879,"role":null,"authored":false,"authors":[{"type":"individual","id":"030bb86fa71fb079","login":"sandeshdhungel","name":"flammenz","avatar_url":"https://avatars-next.observableusercontent.com/3a0479ac49e86a97a09ab6b92baf793644800d56de6abde3b9a374a02a5be889","tier":null}],"members":[{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null,"role":"editor"},{"type":"individual","id":"c3301e515dd08a41","login":"mcmcclur","name":"Mark McClure","avatar_url":"https://avatars-next.observableusercontent.com/e615e819ce83d43faef607e48c53c5ff63943aa0ba9f5848499bd02fef7396f4","tier":null,"role":"editor"},{"type":"individual","id":"030bb86fa71fb079","login":"sandeshdhungel","name":"flammenz","avatar_url":"https://avatars-next.observableusercontent.com/3a0479ac49e86a97a09ab6b92baf793644800d56de6abde3b9a374a02a5be889","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Cluster Bubble Continents with Data","cells":[{"id":0,"value":"# Cluster Bubble Continents with Data","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":50,"value":"viewof cluster = Inputs.radio([\"Area Sqkm\",\"Population\", \"Airports\", \"Median Age\",\"Gdp Growthrate\",\"Inflation Rate\",\"Unemployment Rate\",\"PopnBelow Poverty\"], {\n value: \"Area Sqkm\",\n label: \"Parameter to show:\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":" Swatches(d3.scaleOrdinal([\"Europe : EU\", \"Africa : AF\",\"Antartica: AN\" ,\"Asia : AS\", \"South America : SA\", \"North America : NA\", \"Oceania : OC\"], d3.schemeSet3), {\n columns: \"180px\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"function forceCluster() {\n const strength = 0.2;\n let nodes;\n\n function force(alpha) {\n const centroids = d3.rollup(nodes, centroid, d => d.data.group);\n const l = alpha * strength;\n for (const d of nodes) {\n const {x: cx, y: cy} = centroids.get(d.data.group);\n console.log(centroids.get(d.data.group));\n d.vx -= (d.x - cx) * l;\n d.vy -= (d.y - cy) * l;\n }\n }\n\n force.initialize = _ => nodes = _;\n\n return force;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"pack = () => d3.pack()\n .size([w, h])\n .padding(1)\n (d3.hierarchy(data)\n .sum(d => d.value))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"data = ({\n children: Array.from(\n d3.group(\n countrieslatest,\n \n d => d.group\n ),\n ([, children]) => ({children})\n )\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"/* datatest = ({\n children: Array.from(\n d3.group(\n // Array.from({length: n}, (_, i) => ({\n // group: _,// should actually group bubbles according to continents but not working\n // value: -Math.log(Math.random()) // should actally hold the values of parameters cluster as in top bar but not working\n // })),\n countrieslatest,\n d => d.group\n ),\n ([, children]) => ({children})\n )\n })*/","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"/*dataprobe = ({children: Array.from(d3.group(countrieslatest,d =>d.ContinentCode))})*/","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"function centroid(nodes) {\n let x = 0;\n let y = 0;\n let z = 0;\n for (const d of nodes) {\n let k = d.r ** 2;\n x += d.x * k;\n y += d.y * k;\n z += k;\n }\n return {x: x / z, y: y / z};\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"drag = simulation => {\n \n function dragstarted(event, d) {\n if (!event.active) simulation.alphaTarget(0.3).restart();\n d.fx = d.x;\n d.fy = d.y;\n }\n \n function dragged(event, d) {\n d.fx = event.x;\n d.fy = event.y;\n }\n \n function dragended(event, d) {\n if (!event.active) simulation.alphaTarget(0);\n d.fx = null;\n d.fy = null;\n }\n \n return d3.drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"//n = d3.count(countrieslatest, d => d.country_id)// number of nodes -countries\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"m = 6// should be number of continents","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"h = 0.625 * w","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"w = width < 1100 ? width : 1100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"color = d3.scaleOrdinal(d3.range(m), d3.schemeCategory10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"colors = [\"#2c7bb6\", \"#00a6ca\",\"#00ccbc\",\"#90eb9d\",\"#ffff8c\",\"#f9d057\",\"#f29e2e\",\"#e76818\",\"#d7191c\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":727,"value":"country_data = d3.csvParse(await fetch(\"https://raw.githubusercontent.com/SandeshDhungel/datadoc/main/countries.csv\").then(d => d.text()))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"countrieslatestfile = FileAttachment(\"countrieslatest-.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"countrieslatest = countrieslatestfile.map(({ ContinentCode, CountryName,CountryCode, population,areasqkm,airports,gdpgrowthrate,inflationrate,unemploymentrate,popnbelowpoverty,medianage, ...data }) => ({\n // ...data,\n group: ContinentCode,\n value: Math.sqrt(airports) \n// value : d3.max([7,30 * Math.sqrt(+d[p]/max)])\n //.attr(\"r\", (d) => d3.max([7, 30 * Math.sqrt(+d[p] / max)]))\n // value: Math.sqrt(airports) \n }));\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"countries = topojson.feature(map_layer, map_layer.objects.countries)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"map_layer = FileAttachment(\"countries.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":378,"value":"ContinentCode = d3.group(countrieslatestfile, d => d.ContinentCode, d => d.CountryName)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"/*d3.rollup(countrieslatestfile, v => v.length, d => d.ContinentCode, d => d.CountryName, d => d.CountryCode, d => d.areasqkm, d => d.population, d => d.airports, d => d.gdpgrowthrate, d =>d.inflationrate, d => d.unemploymentrate, d =>d.popnbelowpoverty, d => d.medianage)*/","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"import {Legend, Swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":466,"value":"// require tippy function\ntippy = require(\"tippy.js@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":481,"value":"// defining nodes\nnodes = d3.range(1).map(() => {\n let r = 2 + Math.random() * 20\n let x = Math.random() * sign()\n let y = Math.random() * sign()\n let point = {x: x, y: y, r: r}\n \n return point\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"sign = function() { return Math.random() > 0.5 ? 1 : -1 }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":491,"value":"// Trying to make hoverable view\nfunction make_hoverable_link(t) {\n let ht = d3\n .create(\"span\")\n .style(\"cursor\",\"pointer\")\n .style(\"color\",\"blue\")\n .style(\"text-decoration\",\"underline\")\n .text(\"Show\")\n .node();\n tippy(ht,{content: t, theme: \"light-border\"});\n return ht;\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":493,"value":"//link for tippy\ntippy_style = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"