30:T10e5, map = { // We're going to draw the map on the following SVG. var svg = d3.create("svg").attr("width", w).attr("height", h); // let svg = d3.create("svg").attr("width", w).attr("height", h); var div = d3.create("div").style("width", `${w}px`).style("height", `${h}px`); //let div =d3.create("div").style("width", `${w}px`).style("height", `${h}px`); // let svg = div.append("svg").attr("width", w).attr("height", h); var map = svg.append("g"); // let map = svg.append("g"); var myColor = d3.scaleOrdinal() .domain(["EU", "AF", "AC", "AS", "SA"]) .range(d3.schemeSet1); // collission // 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"); // let 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); // Compute the centroids and associate those results with a country identifier //let centroid_map = new Map(); var centroid_map = new Map(); countries.features.forEach(function (c) { // let centroid = path.centroid(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. // let p = parameter.toLowerCase().replace(" ", ""); var p = parameter.toLowerCase().replace(" ", ""); //let max = d3.max(country_data.map((o) => +o[p])); var max = d3.max(country_data.map((o) => +o[p])); //let bubble_group = svg.append("g"); var bubble_group = svg.append("g"); // Use the same data to plot the circles and generate the hover //let filtered_data = data.filter((o) => centroid_map.has(o.CountryName)); var filtered_data = data.filter((o) => centroid_map.has(o.CountryName)); bubble_group .selectAll("circle") //.data(country_data.filter((o) => centroid_map.has(o.CountryName))) .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", 0.5) .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", 0.5); }) .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(); } 31:[{"id":"09880d706153a359d54a941623e4e147116551a924695d0a2121103c62bbbeb8e5f048d3430f98e27a74003810fa1f908b05b84164b4ef70c2ebda07197475e4","href":"https://static.observableusercontent.com/files/09880d706153a359d54a941623e4e147116551a924695d0a2121103c62bbbeb8e5f048d3430f98e27a74003810fa1f908b05b84164b4ef70c2ebda07197475e4","name":"countries@1.json","type":"application/json","lastModified":1658336417112.499,"size":1068803},{"id":"ac3b5d49f1f47548b5851792af3419f06f4b115d8b8b9b587882cb11781c0cf4f03d8f212792e10509bcb1e6fb4c562464d4619c28c38e501da0e8919405e8af","href":"https://static.observableusercontent.com/files/ac3b5d49f1f47548b5851792af3419f06f4b115d8b8b9b587882cb11781c0cf4f03d8f212792e10509bcb1e6fb4c562464d4619c28c38e501da0e8919405e8af","name":"countries@4.csv","type":"text/csv","lastModified":1658355008864.364,"size":17188}] 2e:{"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"},{"id":138,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":151,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":763,"value":"tippy_style = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":765,"value":"tippy = require(\"tippy.js@6\")","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":593,"value":"## Code","pinned":false,"hidden":false,"mode":"md"},{"id":153,"value":"path = d3.geoPath().projection(projection)","pinned":true,"hidden":false,"mode":"ojs"},{"id":155,"value":"projection = d3.geoNaturalEarth1().fitSize([w + 20, h], countries)","pinned":true,"hidden":false,"mode":"ojs"},{"id":157,"value":"h = 0.625 * w","pinned":true,"hidden":false,"mode":"ojs"},{"id":159,"value":"w = width < 1200 ? width : 1200","pinned":true,"hidden":false,"mode":"ojs"},{"id":162,"value":"// Convert the TopoJSON to GeoJSON\ncountries = topojson.feature(map_data, map_data.objects.countries)","pinned":true,"hidden":false,"mode":"ojs"},{"id":164,"value":"map_data = FileAttachment(\"countries@1.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":604,"value":"data = FileAttachment(\"countries@4.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":890,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":899,"value":"colors = [\"#2c7bb6\", \"#00a6ca\",\"#00ccbc\",\"#90eb9d\",\"#ffff8c\",\"#f9d057\",\"#f29e2e\",\"#e76818\",\"#d7191c\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":894,"value":"sign = function() { return Math.random() > 0.5 ? 1 : -1 }","pinned":true,"hidden":false,"mode":"ojs"},{"id":606,"value":"airports = data.map(function(country) { return +country.airports; })","pinned":true,"hidden":false,"mode":"ojs"},{"id":676,"value":"meanairports = d3.mean(airports)","pinned":true,"hidden":false,"mode":"ojs"},{"id":688,"value":"airportsExtent = d3.extent(airports)","pinned":true,"hidden":false,"mode":"ojs"},{"id":625,"value":"population = data.map(function(country) { return +country.population; })","pinned":true,"hidden":false,"mode":"ojs"},{"id":680,"value":"meanpopulation = d3.mean(population)","pinned":true,"hidden":false,"mode":"ojs"},{"id":692,"value":"populationExtent = d3.extent(population)\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":627,"value":"medianage = data.map(function(country) { return +country.medianage; })","pinned":true,"hidden":false,"mode":"ojs"},{"id":684,"value":"meanmedianage = d3.mean(medianage)","pinned":true,"hidden":false,"mode":"ojs"},{"id":694,"value":"medianageExtent = d3.extent(medianage)","pinned":true,"hidden":false,"mode":"ojs"},{"id":696,"value":"gdpgrowthrate = data.map(function(country) { return +country.gdpgrowthrate; })","pinned":true,"hidden":false,"mode":"ojs"},{"id":704,"value":"meangdpgrowthrate = d3.mean(gdpgrowthrate)","pinned":true,"hidden":false,"mode":"ojs"},{"id":700,"value":"gdpgrowthrateExtent = d3.extent(gdpgrowthrate)","pinned":true,"hidden":false,"mode":"ojs"},{"id":698,"value":"inflationrate = data.map(function(country) { return +country.inflationrate; })","pinned":true,"hidden":false,"mode":"ojs"},{"id":707,"value":"meaninflationrate = d3.mean(inflationrate)","pinned":true,"hidden":false,"mode":"ojs"},{"id":709,"value":"inflationrateExtent = d3.extent(inflationrate)","pinned":true,"hidden":false,"mode":"ojs"},{"id":717,"value":"unemploymentrate = data.map(function(country) { return +country.unemploymentrate; })","pinned":true,"hidden":false,"mode":"ojs"},{"id":721,"value":"meanunemploymentrate = d3.mean(unemploymentrate)","pinned":true,"hidden":false,"mode":"ojs"},{"id":723,"value":"unemploymentrateExtent = d3.extent(unemploymentrate)","pinned":true,"hidden":false,"mode":"ojs"},{"id":711,"value":"popnbelowpoverty = data.map(function(country) { return +country.popnbelowpoverty; })","pinned":true,"hidden":false,"mode":"ojs"},{"id":713,"value":"meanpopnbelowpoverty = d3.mean(popnbelowpoverty)","pinned":true,"hidden":false,"mode":"ojs"},{"id":715,"value":"popnbelowpovertyExtent = d3.extent(popnbelowpoverty)","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":671,"value":"countries4 = FileAttachment(\"countries@4.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}