2b:null 2c:["$","title",null,{"children":"WorldBubbleMap | flammenz | Observable"}] 31:Te9f,map = { // 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); // 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.Following code is to 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((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)); 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("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 color .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}

${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 div.node(); return svg.node(); }32:T79a,chart = { replay; 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 chart = 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); } }); // const nodes = pack().leaves(); var p = cluster.toLowerCase().replace(" ", ""); var max = d3.max(country_data.map((z) => +z[p])); var bubble_group = svg.append("g"); var filtered_data = data.filter((z) => centroid_map.has(z.CountryName)); const nodes = pack().leaves(); const simulation = d3.forceSimulation(nodes) .force("x", d3.forceX(width / 2).strength(0.01)) .force("y", d3.forceY(height / 2).strength(0.01)) .force("cluster", forceCluster()) .force("collide", forceCollide()); //const svg = d3.select(DOM.svg(width, height)); const node = svg.append("g") //const bubble_group = svg.append("g") //bubble_group .selectAll("circle") .data(nodes) //.data(filtered_data) .join("circle") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("fill", d => color(d.data.group)) // .attr("fill", function (d) { return myColor(d.ContinentCode); } ) .call(drag(simulation)); node.transition() // bubble_group.transitiom() .delay((d, i) => Math.random() * 500) .duration(750) .attrTween("r", d => { const i = d3.interpolate(0, d.r); return t => d.r = i(t); }); simulation.on("tick", () => { node // bubble_group .attr("cx", d => d.x) .attr("cy", d => d.y); }); invalidation.then(() => simulation.stop()); return svg.node(); }33:[{"id":"ac3b5d49f1f47548b5851792af3419f06f4b115d8b8b9b587882cb11781c0cf4f03d8f212792e10509bcb1e6fb4c562464d4619c28c38e501da0e8919405e8af","href":"https://static.observableusercontent.com/files/ac3b5d49f1f47548b5851792af3419f06f4b115d8b8b9b587882cb11781c0cf4f03d8f212792e10509bcb1e6fb4c562464d4619c28c38e501da0e8919405e8af","name":"countries@1.csv","type":"text/csv","lastModified":1660752945729.621,"size":17188},{"id":"09880d706153a359d54a941623e4e147116551a924695d0a2121103c62bbbeb8e5f048d3430f98e27a74003810fa1f908b05b84164b4ef70c2ebda07197475e4","href":"https://static.observableusercontent.com/files/09880d706153a359d54a941623e4e147116551a924695d0a2121103c62bbbeb8e5f048d3430f98e27a74003810fa1f908b05b84164b4ef70c2ebda07197475e4","name":"countries.json","type":"application/json","lastModified":1660752945729.621,"size":1068803}] 2f:{"id":"098397a85353bff1","slug":"worldbublecluster","title":"WorldBubbleMap","thumbnail":"d4f210d68e1332b48900714a47e718327157cd6e342864348bd4609cca8635f7","access_level":"public","create_time":"$D2022-08-17T16:15:45.729Z","update_time":"$D2022-09-20T23:10:36.385Z","view_time":null,"first_public_time":"$D2022-08-17T16:36:47.204Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"520ce4770f3d4765","login":"sandeshdhungel","name":"flammenz","avatar_url":"https://avatars-next.observableusercontent.com/3a0479ac49e86a97a09ab6b92baf793644800d56de6abde3b9a374a02a5be889","tier":"starter_2024"},"version":716,"publish_version":716,"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":{"title":"WorldBubbleMap","cells":[{"id":0,"value":"# WorldBubbleMap","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$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})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"viewof cluster = 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})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":572,"value":"viewof replay = html`