31:T86d,map = { for (let i = 0; i < 200; i++){ simulation.tick(); } const svg = d3.create("svg") .attr("width", width) .attr("height", h) .attr("overflow", "visible"); var map = svg.append("g"); var myColor = d3.scaleOrdinal() .domain(["EU", "AF", "AN", "AS", "SA","NA","OC"]) .range(d3.schemeSet3); var centroid_map = new Map(); countries.features.forEach(function (c) { var centroid = path.centroid(c); if (!isNaN(centroid[0])) { centroid_map.set(c.properties.NAME, centroid); } }); var p = parameter.toLowerCase().replace(" ", ""); var max = d3.max(country_data.map((z) => +z[p])); var bubble_group = svg.append("g"); // Using the same data to plot the circles and generate the hover var filtered_data = data.filter((z) => centroid_map.has(z.CountryName)); svg.call(d3.zoom() .scaleExtent([1, 8]) .translateExtent([[-width,-h],[width * 2, h * 2]]) .on("zoom", zoomed)); function zoomed() { var transform = d3.zoomTransform(this); bubble_group.attr("transform", transform); } svg.selectAll("circle") .data(countries.features) //.data(filtered_data) .enter().append("circle") .attr("r", d => r(d.properties.POP_EST)) //.attr("r", (d) => d3.max([7, 30 * Math.sqrt(+d[p] / max)])) .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("fill", "steelblue") .attr("fill-opacity", 0.3) .attr("stroke", "steelblue").nodes() .forEach(function (c, i) { //let hover = country_data[i]; let hover = countries.features[i].properties; let content = `

${hover.NAME}

CountryCode : ${hover.ISO_A2}

ContinentCode : ${hover.CONTINENT}

${parameter } : ${d3.format(",")(hover[p])}

` tippy(c, { content: content, allowHTML: true, theme: "light-border", placement: "top", boundary: "window", display: "flex", }); }); return svg.node(); }32:[{"id":"8d3a99c57c000eebbd7b66163be1377fbf41b36b8968f9d6535c3af6d3203d6acc1fd6633eacdfbe76b03997f53534949b748eba6d72afdaa838dde257571a55","href":"https://static.observableusercontent.com/files/8d3a99c57c000eebbd7b66163be1377fbf41b36b8968f9d6535c3af6d3203d6acc1fd6633eacdfbe76b03997f53534949b748eba6d72afdaa838dde257571a55","name":"countries.csv","type":"text/csv","lastModified":1661471203654.48,"size":17001},{"id":"09880d706153a359d54a941623e4e147116551a924695d0a2121103c62bbbeb8e5f048d3430f98e27a74003810fa1f908b05b84164b4ef70c2ebda07197475e4","href":"https://static.observableusercontent.com/files/09880d706153a359d54a941623e4e147116551a924695d0a2121103c62bbbeb8e5f048d3430f98e27a74003810fa1f908b05b84164b4ef70c2ebda07197475e4","name":"countries.json","type":"application/json","lastModified":1661471137789.909,"size":1068803}] 2f:{"title":"WorldBubbleMap","cells":[{"id":0,"value":"# WorldBubbleMap","pinned":true,"hidden":false,"mode":"md"},{"id":5,"value":"viewof parameter = 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 \n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"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":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"//height\nh = 0.625 * w","pinned":true,"hidden":false,"mode":"ojs"},{"id":36,"value":"//width\nw = width < 1100 ? width : 1100","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"r = d3.scaleSqrt()\n .domain([0, d3.max(countries.features, d => d.properties.POP_EST)])\n .range([0, Math.sqrt(w * h) / 10]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"data = FileAttachment(\"countries.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"//countries = FileAttachment(\"countries.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"country_data = d3.csvParse(await fetch(\"https://raw.githubusercontent.com/SandeshDhungel/datadoctest.github.io/main/countries%401.csv\").then(d => d.text()))","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"map_layer = FileAttachment(\"countries.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"// Convert the TopoJSON to GeoJSON\ncountries = {\n const geo = topojson.feature(map_layer, map_layer.objects.countries);\n geo.features.forEach(feature => {\n if(feature.geometry) {\n feature.centroid = centroid(feature);\n }\n return feature;\n });\n return geo;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":48,"value":"simulation = d3.forceSimulation(countries.features)\n .force(\"x\", d3.forceX(d => {\n if(d.centroid) {\n return projection(d.centroid)[0];\n } else {\n return Math.random() * 100;\n }\n }))\n .force(\"y\", d3.forceY(d => {\n if(d.centroid) {\n return projection(d.centroid)[1];\n } else {\n return Math.random() * 100;\n }\n }))\n .force(\"collide\", d3.forceCollide(d => 1 + r(d.properties.POP_EST)))\n .stop();","pinned":true,"hidden":false,"mode":"ojs"},{"id":46,"value":"// Find the centroid of the largest polygon\ncentroid = (feature) => {\n const geometry = feature.geometry;\n if (geometry.type === \"Polygon\"){\n return d3.geoCentroid(feature);\n }\n else {\n let largestPolygon = {}, largestArea = 0;\n geometry.coordinates.forEach(coordinates => {\n const polygon = { type: \"Polygon\", coordinates },\n area = d3.geoArea(polygon);\n if (area > largestArea) {\n largestPolygon = polygon;\n largestArea = area;\n }\n });\n return d3.geoCentroid(largestPolygon);\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"// d3 geoprojection\npath = d3.geoPath(projection);","pinned":true,"hidden":false,"mode":"ojs"},{"id":40,"value":"// defining projection\nprojection = d3.geoEqualEarth().rotate([-10, 0, 0]).fitSize([w, h], {type: \"Sphere\"});","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"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":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"sign = function() { return Math.random() > 0.5 ? 1 : -1 }","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"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":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"// require tippy function\ntippy = require(\"tippy.js@6\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":50,"value":"//link for tippy\ntippy_style = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"d3 = require(\"d3@6\", \"d3-array@2\", \"d3-force@2\", \"d3-geo@1\", \"d3-scale@3\", \"d3-selection@1\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"import {Legend, Swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}