2d:["$","title",null,{"children":"Mutliple bubble maps for CSV data | flammenz | Observable"}] 32:Tde5, map = { // We're going to draw 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", "AC", "AS", "SA"]) .range(d3.schemeSet1); // Draw the graticule svg .append("path") .attr("d", path(d3.geoGraticule10())) .attr("fill", "none") .attr("stroke", "#333") .attr("stroke-width", 0.4); // Draw the countries var country_group = svg.append("g"); country_group .selectAll("path") .data(countries.features) .join("path") .attr("d", path) .attr("fill", "#eee") .attr("stroke", "black") .attr("stroke-width", 1); 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); } }); // The names of the countries in one file don't necessarily agree with // the names in the other. You can manually set the centroid for a // name in the CSV file to the value in the GEO file as follows: centroid_map.set( "United States", centroid_map.get("United States of America") ); centroid_map.set("Cote d Ivorie", centroid_map.get("Côte d'Ivoire")); // Draw the bubbles. var p = parameter.toLowerCase().replace(" ", ""); var max = d3.max(country_data.map((o) => +o[p])); var bubble_group = svg.append("g"); // Use the same data to plot the circles and generate the hover var filtered_data = data.filter((o) => centroid_map.has(o.CountryName)); 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("r", (d) => 20 * 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", "red") .style("stroke-width", "2px") //mousehover color .on("pointerenter", function () { d3.select(this) .attr("stroke", "red") .attr("stroke-width", 1.5) .attr("stroke-opacity", 1); }) .on("pointerleave", function () { d3.select(this) .attr("stroke", "#600") .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}

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

`; tippy(c, { content: content, allowHTML: true, theme: "light-border" }); }); svg.call( d3 .zoom() .extent([ [0, 0], [w, h] ]) .translateExtent([ [0, 0], [w, h] ]) .scaleExtent([1, 6]) .duration(500) .on("zoom", function (evt) { map.attr("transform", evt.transform); }) ); return svg.node(); } 33:[{"id":"09880d706153a359d54a941623e4e147116551a924695d0a2121103c62bbbeb8e5f048d3430f98e27a74003810fa1f908b05b84164b4ef70c2ebda07197475e4","href":"https://static.observableusercontent.com/files/09880d706153a359d54a941623e4e147116551a924695d0a2121103c62bbbeb8e5f048d3430f98e27a74003810fa1f908b05b84164b4ef70c2ebda07197475e4","name":"countries@1.json","type":"application/json","lastModified":1658583858624.271,"size":1068803},{"id":"ac3b5d49f1f47548b5851792af3419f06f4b115d8b8b9b587882cb11781c0cf4f03d8f212792e10509bcb1e6fb4c562464d4619c28c38e501da0e8919405e8af","href":"https://static.observableusercontent.com/files/ac3b5d49f1f47548b5851792af3419f06f4b115d8b8b9b587882cb11781c0cf4f03d8f212792e10509bcb1e6fb4c562464d4619c28c38e501da0e8919405e8af","name":"countries@4.csv","type":"text/csv","lastModified":1658583858624.271,"size":17188}] 30:{"id":"e162bdeae1ecb17e","slug":"trial","title":"Mutliple bubble maps for CSV data","thumbnail":"bace014ce8b57d147a9c66322bbf4fd84e2e54ed9aae8aeca74a06c93fb3cc85","access_level":"unlisted","create_time":"$D2022-07-23T13:44:18.624Z","update_time":"$D2022-08-07T17:47:35.103Z","view_time":null,"first_public_time":"$D2022-07-23T13:55:25.226Z","has_unpublished_edits":null,"fork":{"id":"f44394e24a153a4a","slug":"onlyprobe","title":"Mutliple bubble maps for CSV data","owner":{"id":"520ce4770f3d4765","login":"sandeshdhungel","name":"flammenz"}},"stars":2,"starred":false,"owner":{"type":"team","id":"520ce4770f3d4765","login":"sandeshdhungel","name":"flammenz","avatar_url":"https://avatars-next.observableusercontent.com/3a0479ac49e86a97a09ab6b92baf793644800d56de6abde3b9a374a02a5be889","tier":"starter_2024"},"version":936,"publish_version":936,"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":"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":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Mutliple bubble maps for CSV data","cells":[{"id":124,"value":"md`# Mutliple bubble maps for CSV data\n\nA response to [this forum question](https://talk.observablehq.com/t/multiple-bubblemaps-on-button-click-same-code-different-datas/6819/15).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":564,"value":"viewof parameter = Inputs.radio([\"Population\", \"Airports\", \"Median Age\",\"Gdp Growthrate\",\"Inflation Rate\",\"Unemployment Rate\",\"PopnBelow Poverty\"], {\n value: \"Population\",\n label: \"Parameter to show:\"\n})\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":760,"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":763,"value":"tippy_style = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":765,"value":"tippy = require(\"tippy.js@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":590,"value":"## Country names\n\nThis little tool allows you to explore the differences between the names in one file and the other. If you've got a country name that's in the GEO file but not in the CSV file, you should still be able to plot the bubble if you can identify corresponding CSV name. For example \"United States\" in one file but \"United States of America\" in the other. You then use the `centroid_map` in the code defining `map` above. You might try Congo as an example that's kind of obvious n the map.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":538,"value":"viewof swap = Inputs.radio(\n [\n \"Show countries in GEO file but not in CSV file\",\n \"Show countries in CSV file but not in GEO file\"\n ],\n { value: \"Show countries in GEO file but not in CSV file\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":529,"value":"{\n let geo_country_names = countries.features\n .map((c) => c.properties.NAME)\n .sort();\n let csv_country_names = country_data.map((o) => o.CountryName).sort();\n let names1, names2;\n if (swap == \"Show countries in GEO file but not in CSV file\") {\n names1 = geo_country_names;\n names2 = csv_country_names;\n } else {\n names1 = csv_country_names;\n names2 = geo_country_names;\n }\n let names_to_show = names1.filter((c) => !names2.includes(c));\n names_to_show = names_to_show.map((name) => ({\n name: name\n }));\n\n return Inputs.table(names_to_show);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":593,"value":"## Code","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":153,"value":"path = d3.geoPath().projection(projection)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"projection = d3.geoNaturalEarth1().fitSize([w + 20, h], countries)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"h = 0.625 * w","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"w = width < 1200 ? width : 1200","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"// Convert the TopoJSON to GeoJSON\ncountries = topojson.feature(map_data, map_data.objects.countries)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"map_data = FileAttachment(\"countries@1.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":604,"value":"data = FileAttachment(\"countries@4.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":890,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":913,"value":"forceCollide","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":906,"value":"import {forceCollide} from \"@d3/clustered-bubbles\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":919,"value":"forceCluster","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":917,"value":"import {forceCluster} from \"@d3/clustered-bubbles\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":892,"value":"nodes = d3.range(200).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":899,"value":"colors = [\"#2c7bb6\", \"#00a6ca\",\"#00ccbc\",\"#90eb9d\",\"#ffff8c\",\"#f9d057\",\"#f29e2e\",\"#e76818\",\"#d7191c\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":894,"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":606,"value":"airports = data.map(function(country) { return +country.airports; })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":676,"value":"meanairports = d3.mean(airports)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":688,"value":"airportsExtent = d3.extent(airports)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":625,"value":"population = data.map(function(country) { return +country.population; })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":680,"value":"meanpopulation = d3.mean(population)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":692,"value":"populationExtent = d3.extent(population)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":627,"value":"medianage = data.map(function(country) { return +country.medianage; })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":684,"value":"meanmedianage = d3.mean(medianage)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":694,"value":"medianageExtent = d3.extent(medianage)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":696,"value":"gdpgrowthrate = data.map(function(country) { return +country.gdpgrowthrate; })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":704,"value":"meangdpgrowthrate = d3.mean(gdpgrowthrate)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":700,"value":"gdpgrowthrateExtent = d3.extent(gdpgrowthrate)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":698,"value":"inflationrate = data.map(function(country) { return +country.inflationrate; })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":707,"value":"meaninflationrate = d3.mean(inflationrate)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":709,"value":"inflationrateExtent = d3.extent(inflationrate)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":717,"value":"unemploymentrate = data.map(function(country) { return +country.unemploymentrate; })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":721,"value":"meanunemploymentrate = d3.mean(unemploymentrate)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":723,"value":"unemploymentrateExtent = d3.extent(unemploymentrate)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":711,"value":"popnbelowpoverty = data.map(function(country) { return +country.popnbelowpoverty; })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":713,"value":"meanpopnbelowpoverty = d3.mean(popnbelowpoverty)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":715,"value":"popnbelowpovertyExtent = d3.extent(popnbelowpoverty)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"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":671,"value":"countries4 = FileAttachment(\"countries@4.csv\").csv()","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" 2c:E{"digest":"NEXT_REDIRECT;replace;/@sandeshdhungel/trial;307;"}