31:Tbf0,map = { for (let i = 0; i < 250; i++){ simulation.tick(); } // Drawing the map on the following SVG. var svg = d3.create("svg").attr("width", w).attr("height", h); var div = d3.create("div").style("width", `${w}px`).style("height", `${h}px`); 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); } }); // Draw the bubbles. 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); } bubble_group .selectAll("circle") .data(filtered_data) .join("circle") .attr("cx", (d) => centroid_map.get(d.CountryName)[0]) .attr("cy", (d) => centroid_map.get(d.CountryName)[1]) //.attr("cx", (d) => (d.CenterLongitude,d.CenterLatitude[0])) //.attr("cy", (d) => (d.CenterLongitude,d.CenterLatitude[1])) //.attr("r", (d) => 20 * Math.sqrt(+d[p] / max)) .attr("r", (d) => d3.max([7, 30 * Math.sqrt(+d[p] / max)])) .attr("fill", "blue") .attr("stroke", "black") .attr("stroke-width", 0.5) .attr("stroke-opacity", 0.5) .attr("fill-opacity", 1) .style("fill", function (d) { return myColor(d.ContinentCode); } ) .style("opacity", "10") .attr("stroke", "black") .style("stroke-width", "2px") // mousehover .on("pointerenter", function () { d3.select(this) .attr("stroke", "white") .attr("stroke-width", 1.5) .attr("stroke-opacity", 1); }) .on("pointerleave", function () { d3.select(this) .attr("stroke", "red") .attr("stroke-width", 0.5) .attr("stroke-opacity", 0.5) .attr("fill-opacity", 1); }) .nodes() .forEach(function (c, i) { //let hover = country_data[i]; let hover = filtered_data[i]; let content = `

${hover.CountryName}

CountryCode : ${hover.CountryCode}

ContinentCode : ${hover.ContinentCode}

${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":"ac3b5d49f1f47548b5851792af3419f06f4b115d8b8b9b587882cb11781c0cf4f03d8f212792e10509bcb1e6fb4c562464d4619c28c38e501da0e8919405e8af","href":"https://static.observableusercontent.com/files/ac3b5d49f1f47548b5851792af3419f06f4b115d8b8b9b587882cb11781c0cf4f03d8f212792e10509bcb1e6fb4c562464d4619c28c38e501da0e8919405e8af","name":"countries@1.csv","type":"text/csv","lastModified":1661184533073.161,"size":17188},{"id":"09880d706153a359d54a941623e4e147116551a924695d0a2121103c62bbbeb8e5f048d3430f98e27a74003810fa1f908b05b84164b4ef70c2ebda07197475e4","href":"https://static.observableusercontent.com/files/09880d706153a359d54a941623e4e147116551a924695d0a2121103c62bbbeb8e5f048d3430f98e27a74003810fa1f908b05b84164b4ef70c2ebda07197475e4","name":"countries.json","type":"application/json","lastModified":1661184533073.161,"size":1068803}] 2f:{"title":"WorldBubbleMap","cells":[{"id":0,"value":"# WorldBubbleMap","pinned":false,"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":false,"hidden":false,"mode":"ojs"},{"id":300,"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":7,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":961,"value":"/*countryd = {\n const topo = await FileAttachment(\"countries.json\").json();\n const geo = topojson.feature(topo, topo.countries);\n geo.features.forEach(feature => {\n feature.centroid = centroid(feature);\n return feature;\n });\n return geo;\n}*/","pinned":true,"hidden":false,"mode":"ojs"},{"id":935,"value":"simulation = d3.forceSimulation(country_data)\n .force(\"x\", d3.forceX(d => projection(d.CenterLongitude)[0]))\n .force(\"y\", d3.forceY(d => projection(d.CenterLatitude)[1]))\n .force(\"collide\", d3.forceCollide(d => 1 + r(d.population)))\n .stop();","pinned":true,"hidden":false,"mode":"ojs"},{"id":948,"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":938,"value":"r = d3.scaleSqrt()\n .domain([0, d3.max(country_data, d => d.population)])\n .range([0, Math.sqrt(width * h) / 10])","pinned":true,"hidden":false,"mode":"ojs"},{"id":969,"value":"topojson = require(\"topojson-client@3\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"// d3 geoprojection\npath = d3.geoPath().projection(projection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"// defining projection\n//projection = d3.geoNaturalEarth1().fitSize([w + 20, h], countries)\nprojection = d3.geoEqualEarth()\n .rotate([-10, 0, 0])\n .fitSize([width, h], { type: \"Sphere\" });\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"//height\nh = 0.625 * w","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"//width\nw = width < 1100 ? width : 1100","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"// Convert the TopoJSON to GeoJSON\ncountries = topojson.feature(map_layer, map_layer.objects.countries)","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"map_layer = FileAttachment(\"countries.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"data= FileAttachment(\"countries@1.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"country_data = d3.csvParse(await fetch(\"https://raw.githubusercontent.com/SandeshDhungel/datadoc/main/countries.csv\").then(d => d.text()))","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"countries1 = FileAttachment(\"countries@1.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"areasqkm = data.map(function(country) { return +country.areasqkm; })","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"population = data.map(function(country) { return +country.population; })","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"airports = data.map(function(country) { return +country.airports; })","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"medianage = data.map(function(country) { return +country.medianage; })","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"gdpgrowthrate = data.map(function(country) { return +country.gdpgrowthrate; })","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"inflationrate = data.map(function(country) { return +country.inflationrate; })","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"unemploymentrate = data.map(function(country) { return +country.unemploymentrate; })","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"popnbelowpoverty = data.map(function(country) { return +country.popnbelowpoverty; })","pinned":true,"hidden":false,"mode":"ojs"},{"id":117,"value":"meanareasqkm = d3.mean(areasqkm)","pinned":true,"hidden":false,"mode":"ojs"},{"id":115,"value":"meanpopulation = d3.mean(population)","pinned":true,"hidden":false,"mode":"ojs"},{"id":113,"value":"meanairports = d3.mean(airports)","pinned":true,"hidden":false,"mode":"ojs"},{"id":119,"value":"meanmedianage = d3.mean(medianage)","pinned":true,"hidden":false,"mode":"ojs"},{"id":121,"value":"meangdpgrowthrate = d3.mean(gdpgrowthrate)","pinned":true,"hidden":false,"mode":"ojs"},{"id":123,"value":"meaninflationrate = d3.mean(inflationrate)","pinned":true,"hidden":false,"mode":"ojs"},{"id":125,"value":"meanunemploymentrate = d3.mean(unemploymentrate)","pinned":true,"hidden":false,"mode":"ojs"},{"id":143,"value":"meanpopnbelowpoverty = d3.mean(popnbelowpoverty)","pinned":true,"hidden":false,"mode":"ojs"},{"id":129,"value":"areasqkmExtent = d3.extent(areasqkm)","pinned":true,"hidden":false,"mode":"ojs"},{"id":127,"value":"populationExtent = d3.extent(population)","pinned":true,"hidden":false,"mode":"ojs"},{"id":131,"value":"airportsExtent = d3.extent(airports)","pinned":true,"hidden":false,"mode":"ojs"},{"id":133,"value":"medianageExtent = d3.extent(medianage)","pinned":true,"hidden":false,"mode":"ojs"},{"id":135,"value":"gdpgrowthrateExtent = d3.extent(gdpgrowthrate)","pinned":true,"hidden":false,"mode":"ojs"},{"id":137,"value":"inflationrateExtent = d3.extent(inflationrate)","pinned":true,"hidden":false,"mode":"ojs"},{"id":139,"value":"unemploymentrateExtent = d3.extent(unemploymentrate)","pinned":true,"hidden":false,"mode":"ojs"},{"id":145,"value":"popnbelowpovertyExtent = d3.extent(popnbelowpoverty)","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"//link for tippy\ntippy_style = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"// require tippy function\ntippy = require(\"tippy.js@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"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"},{"id":62,"value":"sign = function() { return Math.random() > 0.5 ? 1 : -1 }","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"colors = [\"#2c7bb6\", \"#00a6ca\",\"#00ccbc\",\"#90eb9d\",\"#ffff8c\",\"#f9d057\",\"#f29e2e\",\"#e76818\",\"#d7191c\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"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"},{"id":105,"value":"// importing collide but has not actually worked in my case\nimport {forceCollide} from \"@d3/clustered-bubbles\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"// importing cluster but has not actually worked in my case\nimport {forceCluster} from \"@d3/clustered-bubbles\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":311,"value":"import {Legend, Swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}