2c:null 2d:["$","title",null,{"children":"WorldBubbleMap | Chris Schaller | Observable"}] 32:Tac3,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.csv[p] / max)])) .attr("r", d => r(d.properties.csv[p])) .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.csv[p])}

Area Sqkm: ${d3.format(",")(hover.csv['areasqkm'])}
Population: ${d3.format(",")(hover.csv['population'])}
Airports: ${hover.csv['airports']}
GDP Growth Rate: ${d3.format(",")(hover.csv['gdpgrowthrate'])}
Inflation Rate: ${d3.format(",")(hover.csv['inflationrate'])}
Unemployment Rate: ${d3.format(",")(hover.csv['unemploymentrate'])}
Pop. Below Poverty: ${d3.format(",")(hover.csv['popnbelowpoverty'])}
Median Age: ${hover.csv['medianage']}

` tippy(c, { content: content, allowHTML: true, theme: "light-border", placement: "top", boundary: "window", display: "flex", }); }); return svg.node(); }33:[{"id":"8d3a99c57c000eebbd7b66163be1377fbf41b36b8968f9d6535c3af6d3203d6acc1fd6633eacdfbe76b03997f53534949b748eba6d72afdaa838dde257571a55","href":"https://static.observableusercontent.com/files/8d3a99c57c000eebbd7b66163be1377fbf41b36b8968f9d6535c3af6d3203d6acc1fd6633eacdfbe76b03997f53534949b748eba6d72afdaa838dde257571a55","name":"countries.csv","type":"text/csv","lastModified":1661709218606.459,"size":17001},{"id":"09880d706153a359d54a941623e4e147116551a924695d0a2121103c62bbbeb8e5f048d3430f98e27a74003810fa1f908b05b84164b4ef70c2ebda07197475e4","href":"https://static.observableusercontent.com/files/09880d706153a359d54a941623e4e147116551a924695d0a2121103c62bbbeb8e5f048d3430f98e27a74003810fa1f908b05b84164b4ef70c2ebda07197475e4","name":"countries.json","type":"application/json","lastModified":1661709218606.459,"size":1068803}] 30:{"id":"3364334babb6ac1b","slug":"worldbubblemap","title":"WorldBubbleMap","thumbnail":"6540436e872303370ec80db9198acdd69b771bb3affa9a0ea64ce63e223ee03e","access_level":"public","create_time":"$D2022-08-28T17:53:38.606Z","update_time":"$D2022-08-28T17:53:38.606Z","view_time":null,"first_public_time":"$D2022-08-28T17:54:29.895Z","has_unpublished_edits":null,"fork":{"id":"b99ae30e87c73512","slug":"worldbubblemap-force","title":"WorldBubbleMap","owner":{"id":"520ce4770f3d4765","login":"sandeshdhungel","name":"flammenz"}},"stars":3,"starred":false,"owner":{"type":"team","id":"989ab374c96b32a3","login":"chrisschaller","name":"Chris Schaller","avatar_url":"https://avatars-next.observableusercontent.com/8c1398107955320d28aaf4ddc25f3260c04a723efefd0a7b90521da289521430","tier":"starter_2024","bio":""},"version":228,"publish_version":228,"role":null,"authored":false,"authors":[{"type":"individual","id":"7370595d97a72716","login":"chrisschaller","name":"Chris Schaller","avatar_url":"https://avatars-next.observableusercontent.com/8c1398107955320d28aaf4ddc25f3260c04a723efefd0a7b90521da289521430","tier":null,"bio":""}],"members":[{"type":"individual","id":"7370595d97a72716","login":"chrisschaller","name":"Chris Schaller","avatar_url":"https://avatars-next.observableusercontent.com/8c1398107955320d28aaf4ddc25f3260c04a723efefd0a7b90521da289521430","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"WorldBubbleMap","cells":[{"id":0,"value":"# WorldBubbleMap","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"//height\nh = 0.625 * w","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"//width\nw = width < 1100 ? width : 1100","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"factors = {\n return {\n areasqkm: 15,\n population: 100,\n airports: 100,\n gdpgrowthrate: 40,\n inflationrate: 300,\n unemploymentrate: 100,\n popnbelowpoverty: 100,\n medianage: 50\n};\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"r = d3.scaleSqrt()\n //.domain([0, d3.max(countries.features, d => d.properties.POP_EST)])\n .domain([0, d3.max(countries.features, feature => feature.properties.csv[parameter.toLowerCase().replace(\" \", \"\")])])\n .range([0, Math.sqrt(w * h) / factors[parameter.toLowerCase().replace(\" \", \"\")]]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"data = FileAttachment(\"countries.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"//countries = FileAttachment(\"countries.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"map_layer = FileAttachment(\"countries.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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 let code = feature.properties.ISO_A2;\n let cData = country_data.find(x => x.CountryCode === code);\n feature.properties.csv = cData ?? {\n areasqkm: \"\",\n population: \"\",\n airports: \"\",\n gdpgrowthrate: \"\",\n inflationrate: \"\",\n unemploymentrate: \"\",\n popnbelowpoverty: \"\",\n medianage: \"\"\n};\n return feature;\n });\n return geo;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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 .force(\"collide\", d3.forceCollide(d => 1 + r(d.properties.csv[parameter.toLowerCase().replace(\" \", \"\")])))\n .stop();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"// d3 geoprojection\npath = d3.geoPath(projection);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"// defining projection\nprojection = d3.geoEqualEarth().rotate([-10, 0, 0]).fitSize([w, h], {type: \"Sphere\"});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"sign = function() { return Math.random() > 0.5 ? 1 : -1 }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"// require tippy function\ntippy = require(\"tippy.js@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"//link for tippy\ntippy_style = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"import {Legend, Swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"