2b:null 2c:["$","title",null,{"children":"World Bubble Map | flammenz | Observable"}] 31:T57f,viewof parameter = Inputs.select(new Map([ ["Area (Sq. Km)", "areasqkm"],["Population", "population"], ["Airports", "airports"],["Median Age","medianage"], ["Inflation Rate", "inflationrate"],["GDP Growthrate","gdpgrowthrate"],["Unemployment Rate","unemploymentrate"],["Popnbelow Poverty","popnbelowpoverty"], ["Gold Reserves","Goldtonnes"],["GDP", "gdpdollar"],["Electr prod (bil kwh)", "Electrprodbilkwh"],["Electricpowerconsumption", "Electricpowerconsumption"],["Tax revenue","Taxrevenue"],["Total tax rate","Totaltaxrate"],["dry natural gas production (bcf)","drynaturalgasproductionbcf"],["dry natural gas consumption (bcf)","drynaturalgasconsumptionbcf"],["dry natural gas imports (bcf)","drynaturalgasimportsbcf"],["dry natural gas exports (bcf)","drynaturalgasexportsbcf"],["Electricity production, 2019","Electricityproduction2019"],["Electricity consumption, 2019","Electricityconsumption2019"],["Oil production, 2019","Oilproduction2019"],["Oil consumption, 2014","Oilconsumption2014"],["Renewable power generation, 2020","Renewablepowergeneration2020"],["Renewable power capacity, 2020","Renewablepowercapacity2020"],["Military defence spending 2020","Militarydefencespending2020"],["Electricity imports (bil. kwH), 2020","ElectricityimportsbilkwH2020"],["Electricity exports (bil. kwH), 2020","ElectricityexportsbilkwH2020"] ]), { value: "Area (Sq. Km)", label: "Parameter to show:" }) 32:T860,map = { for (let i = 0; i < 200; i++){ simulation.tick(); } //var svg = d3.create("svg").attr("width", w).attr("height", h); const svg = d3.create("svg") .attr("width", width) .attr("height", h) .attr("overflow", "visible"); var map = svg.append("g"); var myColor = d3.scaleOrdinal() .domain(["EU", "AF", "AN", "AS", "SA","NA","OC"]) .range(d3.schemeCategory10); var p = parameter//.toLowerCase().replace(" ", ""); var bubbles = svg.append("g"); svg.call(d3.zoom() .extent([[0, 0], [width, h]]) .scaleExtent([-8, 8]) //.translateExtent([[-width,-h],[width * 2, h * 2]]) .on("zoom", zoomed)); function zoomed({transform}) { bubbles.attr("transform", transform); } bubbles .selectAll("circles") .data(country1.features) .enter().append("circle") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", d => r(d.properties[parameter])) .style("fill", function (d) { return myColor(d.properties.ContinentCode); } ) .style("opacity", "10") .attr("stroke", "black") .style("stroke-width", "2px") .on("pointerenter", function () { d3.select(this) .attr("stroke", "blue") .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 = countries2.features[i].properties; let hover = country1.features[i].properties; let content = `

${hover.CountryName}

CountryCode : ${hover.CountryCode}

ContinentCode : ${hover.ContinentCode}

${[p] } : ${d3.format(",d")(hover[p])}

` tippy(c, { content: content, allowHTML: true, theme: "light-border" }); }); return svg.node(); }33:T7fb,usermap = { for (let i = 0; i < 200; i++){ simulation1.tick(); } const svg = d3.create("svg") .attr("width", width) .attr("height", h) .attr("overflow", "visible"); var usermap = svg.append("g"); var myColor = d3.scaleOrdinal() .domain(["Europe", "Africa", "Antartica", "Asia", "South America","North America","Oceania"]) .range(d3.schemeAccent); var p1 = userparameter var bubble = svg.append("g"); // Zoom is not working svg.call(d3.zoom() .extent([[0, 0], [width, h]]) .scaleExtent([-8, 8]) // .translateExtent([[-width,-h],[width * 2, h * 2]]) .on("zoom", zoomed)); function zoomed({transform}) { bubble.attr("transform", transform); } /*let country_group = svg.append("g"); country_group .selectAll("path") .data(countries.features) .join("path") .attr("d", path) .attr("fill", "#eee") .attr("stroke", "black")*/ bubble .selectAll("circle") .data(countries.features) .enter().append("circle") .attr("r", d => r1(d.properties.csv[p1])) .attr("cx", d => d.x) .attr("cy", d => d.y) // .attr("fill", "steelblue") .style("fill", function (d) { return myColor(d.properties.CONTINENT); } ) .style("opacity", "10") .attr("stroke", "black") .style("stroke-width", "2px") .nodes() .forEach(function (c, i) { let hover = countries.features[i].properties; let content = `

${hover.NAME}

CountryCode : ${hover.ISO_A2}

Continent : ${hover.CONTINENT}

${userparameter } : ${d3.format(",")(hover.csv[p1])}

` tippy(c, { content: content, allowHTML: true, theme: "light-border", placement: "top", boundary: "window", display: "flex", }); }); return svg.node(); }34:[{"id":"0fd4ba25545a1a72ee6ce5cef789d74586e5823351f4df896ea7a831526c49d4d70de2a9d0f3b60bd9fa59c455910b459c699c1a43fc66099e3525117f0d0703","href":"https://static.observableusercontent.com/files/0fd4ba25545a1a72ee6ce5cef789d74586e5823351f4df896ea7a831526c49d4d70de2a9d0f3b60bd9fa59c455910b459c699c1a43fc66099e3525117f0d0703","name":"testfinal(1).geojson","type":"application/geo+json","lastModified":1662155303250.022,"size":253834},{"id":"dcde11294994f1ec3150001979b84002406afdae6d8320f07edbae31d5a2e6562848365f236f688495d844d29c8d2919ecde9eae440bdb5fa1cff40305beffa3","href":"https://static.observableusercontent.com/files/dcde11294994f1ec3150001979b84002406afdae6d8320f07edbae31d5a2e6562848365f236f688495d844d29c8d2919ecde9eae440bdb5fa1cff40305beffa3","name":"dummytest@1.csv","type":"text/csv","lastModified":1662729513724.49,"size":10137},{"id":"d9fb8af68b7996c2de82fda4845ccfead99f879a979ade8412fda086d53d52b54eafd490d5cc0198fe61224e9ccab9dff5a972fd5d9b94adf20b1ff4d433d866","href":"https://static.observableusercontent.com/files/d9fb8af68b7996c2de82fda4845ccfead99f879a979ade8412fda086d53d52b54eafd490d5cc0198fe61224e9ccab9dff5a972fd5d9b94adf20b1ff4d433d866","name":"trame@2.json","type":"application/json","lastModified":1662738599553.344,"size":5194219}] 2f:{"id":"1045d5973e68a669","slug":"testbubblecluster","title":"World Bubble Map","thumbnail":"29fb9d6e640227582c94ee4570f58f680e3890d02b5843553476e31c5d95adfc","access_level":"unlisted","create_time":"$D2022-08-29T16:55:10.873Z","update_time":"$D2022-09-28T10:38:18.450Z","view_time":null,"first_public_time":null,"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":1131,"publish_version":1131,"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":3,"collection":null,"type":"notebook","body":{"title":"World Bubble Map","cells":[{"id":0,"value":"# World Bubble Map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"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})*/\nviewof selected = swatchesInput({\n color: d3.scaleOrdinal(\n [\"Europe : EU\", \"Africa : AF\", \"Antartica : AN\", \"Asia : AS\", \"South America : SA\", \"North America : NA\", \"Oceania : OC\"],\n d3.schemeCategory10\n )\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":697,"value":"/*viewof userparameter = Inputs.select(new Map([\n [\"Area (Sq. Km)\", \"areasqkm\"],[\"Population\", \"population\"], [\"Airports\", \"airports\"],[\"Gold in tonnes\",\"Goldtonnes\"],[\"GDP in dollar\",\"gdpdollar\"]\n ]), {\n value: \"Area (Sq. Km)\",\n label: \"User Parameter to show:\"\n})*/\nviewof userparameter = Inputs.select(names, { label: \"Parameters\"})\n//viewof userparameter = Inputs.select((d => d.properties.csv), {label: \"Sport\", sort: true, unique: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":731,"value":" /* Swatches(d3.scaleOrdinal([\"Europe : EU\", \"Africa : AF\", \"Antartica : AN\", \"Asia : AS\", \"South America : SA\", \"North America : NA\", \"Oceania : OC\"], d3.schemeSet2), {\n columns: \"180px\"\n})*/\nviewof selected1 = swatchesInput({\n color: d3.scaleOrdinal(\n [\"Europe : EU\", \"Africa : AF\", \"Antartica : AN\", \"Asia : AS\", \"South America : SA\", \"North America : NA\", \"Oceania : OC\"],\n d3.schemeAccent\n )\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":790,"value":"# 'Here is the code used for map !!'","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":681,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":675,"value":"# 'Upload your own data to plot bubbles !!'","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":837,"value":"### 'Test the map by using my Dummy data --> Can be found in File Attachments on your right -->>!!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":668,"value":"viewof csvfile = Inputs.file({label: \"CSV file\", accept: \".csv\", required: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":671,"value":"data = csvfile.csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":895,"value":"\n### 'Enter your parameter names here to generate automated Dropdown Menu!!'","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":886,"value":"names =[\"areasqkm\",\"airports\",\"population\",\"gdpdollar\",\"Goldtonnes\",\"myname\",\"a\",\"b\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":513,"value":"factors = {\n return {\n areasqkm: 10,\n population: 10,\n airports: 10,\n gdpgrowthrate: 40,\n inflationrate: 15,\n unemploymentrate: 35,\n popnbelowpoverty: 50,\n medianage: 50,\n gdpdollar :15,\n Electricpowerconsumption : 30,\n Taxrevenue: 30,\n Totaltaxrate: 30,\n Goldtonnes: 10,\n Electrprodbilkwh: 15,\n drynaturalgasproductionbcf: 15,\n drynaturalgasconsumptionbcf: 15,\n drynaturalgasimportsbcf: 15,\n drynaturalgasexportsbcf: 15,\n Electricityproduction2019: 10,\n Electricityconsumption2019: 10,\n ElectricityimportsbilkwH2020: 20,\n ElectricityexportsbilkwH2020: 20,\n Oilproduction2019: 15,\n Oilconsumption2014: 15,\n Renewablepowergeneration2020: 10,\n Renewablepowercapacity2020: 10,\n Militarydefencespending2020: 10\n};\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"//height\nh = 0.625 * w\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"//width\nw = width < 1100 ? width : 1100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"r = d3.scaleSqrt()\n // .domain([0, d3.max(countries2.features, d => d.properties.population)])\n//.domain([0, d3.max(countries2.features, d => d.properties[parameter])])\n.domain([0, d3.max(country1.features, d => d.properties[parameter])])\n\n // .range([0, Math.sqrt(w * h) / 10]);\n.range([0, Math.sqrt(w * h) / factors[parameter/*.toLowerCase().replace(\" \", \"\")*/]]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":683,"value":"r1 = d3.scaleSqrt()\n \n .domain([0, d3.max(countries.features, feature => feature.properties.csv[userparameter])])\n .range([0, Math.sqrt(w * h) / 10]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"//simulation = d3.forceSimulation(countries2.features)\nsimulation = d3.forceSimulation(country1.features)\n .force(\"x\", d3.forceX(d => {\n if(d.geometry.coordinates) {\n return projection(d.geometry.coordinates)[0];\n } else {\n return Math.random() * 100;\n }\n }))\n .force(\"y\", d3.forceY(d => {\n if(d.geometry.coordinates) {\n return projection(d.geometry.coordinates)[1];\n } else {\n return Math.random() * 100;\n }\n }))\n .force(\"collide\", d3.forceCollide(d => 1 + r(d.properties[parameter])))//r(d.properties.population)))\n .stop();\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":685,"value":"simulation1 = d3.forceSimulation(countries.features)\n .force(\"x\", d3.forceX(d => {\n if(d.centroid) {\n return projection(d.centroid)[0];\n } else {\n return Math.random() * 100;\n }\n }))\n .force(\"y\", d3.forceY(d => {\n if(d.centroid) {\n return projection(d.centroid)[1];\n } else {\n return Math.random() * 100;\n }\n }))\n //.force(\"collide\", d3.forceCollide(d => 1 + r(d.properties.POP_EST)))\n .force(\"collide\", d3.forceCollide(d => 1 + r1(d.properties.csv[userparameter])))\n .stop();\n\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"// d3 geoprojection\npath = d3.geoPath(projection);\n//path = d3.geoPath().projection(projection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"// defining projection\nprojection = d3.geoEqualEarth().rotate([-10, 0, 0]).fitSize([w, h], {type: \"Sphere\"});\n//projection = d3.geoEqualEarth().rotate([-10, 0])\n//projection = d3.geoNaturalEarth1().fitSize([w + 20, h], countries)\n//projection = d3.geoEquirectangular()\n//projection = d3.geoEquirectangular().center([0, 20]);\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"sign = function() { return Math.random() > 0.5 ? 1 : -1 }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"// require tippy function\ntippy = require(\"tippy.js@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"//link for tippy\ntippy_style = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"//d3 = require(\"d3@6\", \"d3-array@2\", \"d3-force@2\", \"d3-geo@1\", \"d3-scale@3\", \"d3-selection@1\");\nd3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"//import {Legend, Swatches} from \"@d3/color-legend\"\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":606,"value":"country1 = FileAttachment(\"testfinal(1).geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1028,"value":"countrybsp = FileAttachment(\"testfinal(1).geojson\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1006,"value":"map_layer = FileAttachment(\"trame@2.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":996,"value":"dummytest1 = FileAttachment(\"dummytest@1.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":691,"value":"// Convert the TopoJSON to GeoJSON\ncountries = {\n const geo = topojson.feature(map_layer, map_layer.objects.countries);\n geo.features.forEach(feature => {\n if(feature.geometry) {\n // feature.centroid = centroid(feature);\n feature.centroid= centroid(feature);\n \n }\n let code = feature.properties.ISO_A2;\n let cData = data.find(x => x.CountryCode === code);\n feature.properties.csv = cData ?? {\n\n};\n return feature;\n });\n return geo;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":707,"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1082,"value":"import { swatchesInput } from \"@clhenrick/color-swatches-input\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1090,"value":"//import {embed} from \"@observablehq/auto-resizing-embed\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"