30:Te30,map = { // We're going to draw the map on the following SVG. let svg = d3.create("svg").attr("width", w).attr("height", h); let div =d3.create("div").style("width", `${w}px`).style("height", `${h}px`); let map = svg.append("g"); // Draw the graticule // a network of lines representing meridians and parallels, on which a map or plan can be represented. svg .append("path") .attr("d", path(d3.geoGraticule10())) .attr("fill", "none") .attr("stroke", "#333") .attr("stroke-width", 0.4); // Draw the countries let country_group = svg.append("g"); country_group .selectAll("path") .data(countries.features) //.join("path") //Replaced .join("path") with enter() .append("path") .enter() .append("path") .attr("d", path) //.attr("data-pop", (d) => console.log(d.properties.POP_EST)) .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(); countries.features.forEach(function (c) { let 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(" ", ""); let max = d3.max(data.map((o) => +o[p])); let 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)); bubble_group .selectAll("circle") //.data(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", "black") .attr("stroke", "black") .attr("stroke-opacity", 0.5) .attr("fill-opacity", 0.5) .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":"f6922ccba86bc78db1dbb74ff5720a1129d20322626d8c8591ae7c8bb8dc86ee2a5fc4e8bce9d86f8ed7b97f7d71c95a9573871c4fa1f6028ab6649de55a728b","href":"https://static.observableusercontent.com/files/f6922ccba86bc78db1dbb74ff5720a1129d20322626d8c8591ae7c8bb8dc86ee2a5fc4e8bce9d86f8ed7b97f7d71c95a9573871c4fa1f6028ab6649de55a728b","name":"countries.json","type":"application/json","lastModified":1658188572749.721,"size":658980},{"id":"ac3b5d49f1f47548b5851792af3419f06f4b115d8b8b9b587882cb11781c0cf4f03d8f212792e10509bcb1e6fb4c562464d4619c28c38e501da0e8919405e8af","href":"https://static.observableusercontent.com/files/ac3b5d49f1f47548b5851792af3419f06f4b115d8b8b9b587882cb11781c0cf4f03d8f212792e10509bcb1e6fb4c562464d4619c28c38e501da0e8919405e8af","name":"countries@1.csv","type":"text/csv","lastModified":1658345598909.652,"size":17188}] 2e:{"title":"Bubble Map","cells":[{"id":124,"value":"md`# Bubble Map`","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":408,"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})","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"path = d3.geoPath().projection(projection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":155,"value":"projection = d3.geoNaturalEarth1().fitSize([w + 20, h], countries)","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"h = 0.625 * w","pinned":false,"hidden":false,"mode":"ojs"},{"id":159,"value":"w = width < 1100 ? width : 1100","pinned":false,"hidden":false,"mode":"ojs"},{"id":515,"value":"function 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}","pinned":true,"hidden":false,"mode":"ojs"},{"id":517,"value":"tippy = require(\"tippy.js@6\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":519,"value":"tippy_style = html`","pinned":false,"hidden":false,"mode":"html"},{"id":162,"value":"// Convert the TopoJSON to GeoJSON\ncountries = topojson.feature(map_layer, map_layer.objects.countries)","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"map_layer = FileAttachment(\"countries.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":492,"value":"data= FileAttachment(\"countries@1.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":471,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":473,"value":"md`## Sandbox Area`","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"population = data.map(function(country) { return +country.population; })","pinned":true,"hidden":false,"mode":"ojs"},{"id":87,"value":"airports = data.map(function(country) { return +country.airports; })","pinned":true,"hidden":false,"mode":"ojs"},{"id":97,"value":"median_age = data.map(function(country) { return +country.medianage; })","pinned":true,"hidden":false,"mode":"ojs"},{"id":525,"value":"gdpgrowthrate = data.map(function(country) { return +country.gdpgrowthrate; })","pinned":true,"hidden":false,"mode":"ojs"},{"id":527,"value":"inflationrate = data.map(function(country) { return +country.inflationrate; })","pinned":true,"hidden":false,"mode":"ojs"},{"id":529,"value":"unemploymentrate = data.map(function(country) { return +country.unemploymentrate; })","pinned":true,"hidden":false,"mode":"ojs"},{"id":531,"value":"popnbelowpoverty = data.map(function(country) { return +country.popnbelowpoverty; })","pinned":true,"hidden":false,"mode":"ojs"},{"id":101,"value":"meanpopulation = d3.mean(population)","pinned":true,"hidden":false,"mode":"ojs"},{"id":99,"value":"meanairports = d3.mean(airports)","pinned":true,"hidden":false,"mode":"ojs"},{"id":103,"value":"meanmedianage = d3.mean(median_age)","pinned":true,"hidden":false,"mode":"ojs"},{"id":533,"value":"meangdpgrowthrate = d3.mean(gdpgrowthrate)","pinned":true,"hidden":false,"mode":"ojs"},{"id":535,"value":"meaninflationrate = d3.mean(inflationrate)","pinned":true,"hidden":false,"mode":"ojs"},{"id":539,"value":"meanunemploymentrate = d3.mean(unemploymentrate)","pinned":true,"hidden":false,"mode":"ojs"},{"id":537,"value":"meanpopnbelowpoverty = d3.mean(popnbelowpoverty)","pinned":true,"hidden":false,"mode":"ojs"},{"id":105,"value":"airportsExtent = d3.extent(airports)","pinned":true,"hidden":false,"mode":"ojs"},{"id":107,"value":"populationExtent = d3.extent(population)","pinned":true,"hidden":false,"mode":"ojs"},{"id":109,"value":"medianageExtent = d3.extent(median_age)","pinned":true,"hidden":false,"mode":"ojs"},{"id":541,"value":"gdpgrowthrateExtent = d3.extent(gdpgrowthrate)","pinned":true,"hidden":false,"mode":"ojs"},{"id":543,"value":"inflationrateExtent = d3.extent(inflationrate)","pinned":true,"hidden":false,"mode":"ojs"},{"id":545,"value":"unemploymentrateExtent = d3.extent(unemploymentrate)","pinned":true,"hidden":false,"mode":"ojs"},{"id":549,"value":"popnbelowpovertyExtent = d3.extent(popnbelowpoverty)","pinned":true,"hidden":false,"mode":"ojs"},{"id":502,"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"}],"files":"$W31","stdlib":"1","titling":"auto"}