31:T10bc,map = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const plot = svg.append("g").attr("class", "plot"); svg .append("text") .attr("class", "header") .attr("x", margin.left) .attr("y", 20) .attr("dy", "1em") .attr("text-anchor", "start") .style("fill", py_colors.grey) .style("font-size", width / 40) .style("font-weight", 400) .style("text-transform", "uppercase") .html("Python Developers Survey ") .append("tspan") .attr("font-weight", 700) .text("2021"); svg .append("text") .attr("class", "header") .attr("x", margin.left) .attr("y", 70) .attr("dy", "1em") .attr("text-anchor", "start") .style("fill", py_colors.grey) .style("font-size", `${width / 45}px`) .style("font-weight", 700) .html(d3.format(".0%")(country_spicified_ratio)) .append("tspan") .attr("font-weight", 400) .text( " of the " + _sharing_data_outside.length + " participants specified the country they lived in" ); const plotWorld = plot .append("g") .attr("class", "world_map") .attr("transform", "translate(0," + margin.top + ")"); const plotBubbles = plot .append("g") .attr("class", "bubbles") .attr("transform", "translate(0," + margin.top + ")") .attr("id", "bubbles"); // countries plotWorld .selectAll(".country") .data(countries.features) //geometry for the countries .enter() .append("path") .attr("class", "country") .attr("d", geoPath) .style("stroke", py_colors.grey) .style("fill", py_colors.shandy) .style("stroke-width", 0.5) .style("stroke-linejoin", "round"); // bubbles plotBubbles .selectAll(".bubbles") .data(data) .enter() .append("circle") .attr("class", "bubbles") .attr("cx", (d) => myProjection([d.lon, d.lat])[0]) .attr("cy", (d) => myProjection([d.lon, d.lat])[1]) .attr("r", (d) => scaleRadiusWorld(d["count"])) .style("stroke-width", 1.3) .style("stroke", py_colors.grey) .style("fill", py_colors.azure) .style("mix-blend-mode", "multiply") .style("fill-opacity", 0.8) .nodes() .forEach(function (c, i) { //let hover = country_data[i]; let hover = data[i]; let content = `

${hover.name}

Python Developers : ${hover.count}

Share of Python Devs : ${d3.format(".1%")( hover.countshare )}

`; tippy(c, { content: content, allowHTML: true, theme: tippytheme }); }); let legend_data = [value_domain[1], (value_domain[1] - value_domain[0]) / 2]; let dashstop = 70; const legend = svg .append("g") .attr("class", "header") .attr( "transform", "translate(" + width / 8 + "," + (height * 4.5) / 5 + ")" ) .attr("text-anchor", "middle") .selectAll("g") .data(legend_data) .join("g"); legend .append("circle") .style("stroke-width", 1) .style("stroke", py_colors.grey) .style("fill", colors.mix) .style("fill-opacity", 0.8) .attr("cy", (d) => -scaleRadiusWorld(d)) .attr("r", scaleRadiusWorld); legend .append("line") .attr("x1", (d) => scaleRadiusWorld(d)) .attr("x2", (d) => dashstop) .attr("y1", (d) => -scaleRadiusWorld(d)) .attr("y2", (d) => -scaleRadiusWorld(d)) .attr("stroke", py_colors.grey) .style("stroke-dasharray", "2,2"); legend .append("text") .attr("class", "arc_label") .attr("y", (d, i) => -scaleRadiusWorld(d)) .attr("x", (d, i) => dashstop) //.attr("dy", "1.3em") .text((d) => d3.format(".0f")(d) + " python devs"); svg .append("text") .attr("class", "legend_data") .attr("x", width / 8) .attr("y", (height * 4.5) / 5 + 5) .attr("dy", "1em") .attr("text-anchor", "start") .style("fill", py_colors.grey) .html(" Scale used: " + klabels[k]); svg .append("text") .attr("class", "legend_footer") .attr("x", width - margin.right) .attr("y", height - 10) .style("fill", py_colors.grey) .text(footer); return svg.node(); }32:T607,rename = new Map([ ["Antigua and Barbuda", "Antigua and Barb."], ["Bolivia (Plurinational State of)", "Bolivia"], ["Bosnia and Herzegovina", "Bosnia and Herz."], ["Brunei Darussalam", "Brunei"], ["Central African Republic", "Central African Rep."], ["Cook Islands", "Cook Is."], ["Cote d'Ivoire", "Côte d'Ivoire"], ["Czech Republic", "Czechia"], [("Democratic People's Republic of Korea", "North Korea")], ["Democratic Republic of the Congo", "Dem. Rep. Congo"], ["Dominican Republic", "Dominican Rep."], ["Equatorial Guinea", "Eq. Guinea"], ["Iran (Islamic Republic of)", "Iran"], ["Lao People's Democratic Republic", "Laos"], ["Marshall Islands", "Marshall Is."], ["Micronesia (Federated States of)", "Micronesia"], ["North Macedonia", "Macedonia"], ["Republic of Korea", "South Korea"], ["Republic of Moldova", "Moldova"], ["Republic of the Congo", "Congo"], ["Congo (DRC)", "Dem. Rep. Congo"], ["Russian Federation", "Russia"], ["Saint Kitts and Nevis", "St. Kitts and Nevis"], ["Saint Vincent and the Grenadines", "St. Vin. and Gren."], ["Sao Tome and Principe", "São Tomé and Principe"], ["Solomon Islands", "Solomon Is."], ["South Sudan", "S. Sudan"], ["Swaziland", "eSwatini"], ["Syrian Arab Republic", "Syria"], ["The former Yugoslav Republic of Macedonia", "Macedonia"], // ["Tuvalu", ?], ["United Republic of Tanzania", "Tanzania"], ["United States", "United States of America"], ["Venezuela (Bolivarian Republic of)", "Venezuela"], ["Viet Nam", "Vietnam"] ])33:T476,html` `34:[{"id":"d6478bba95977bfbb1abede0b5bbebe4d2a34e95c9f7c8fb2a6fe9006db3debbca7b035afdb63a1bb9bae9f123c69f8374e8de27b7ff9e5f6e4121b01438cc46","href":"https://static.observableusercontent.com/files/d6478bba95977bfbb1abede0b5bbebe4d2a34e95c9f7c8fb2a6fe9006db3debbca7b035afdb63a1bb9bae9f123c69f8374e8de27b7ff9e5f6e4121b01438cc46","name":"world_map-4.json","type":"application/json","lastModified":1668251809800.761,"size":297875},{"id":"ac3b5d49f1f47548b5851792af3419f06f4b115d8b8b9b587882cb11781c0cf4f03d8f212792e10509bcb1e6fb4c562464d4619c28c38e501da0e8919405e8af","href":"https://static.observableusercontent.com/files/ac3b5d49f1f47548b5851792af3419f06f4b115d8b8b9b587882cb11781c0cf4f03d8f212792e10509bcb1e6fb4c562464d4619c28c38e501da0e8919405e8af","name":"countries-4.csv","type":"text/csv","lastModified":1668265087718.515,"size":17188},{"id":"0a95445b64ce1c4185221fb5ea24217f4b7663328bd3b326462c089718cd0cc4c080911088e4dd354b1f30807f7ca9b2aee5cff07afdeb354120b55c9b73dc61","href":"https://static.observableusercontent.com/files/0a95445b64ce1c4185221fb5ea24217f4b7663328bd3b326462c089718cd0cc4c080911088e4dd354b1f30807f7ca9b2aee5cff07afdeb354120b55c9b73dc61","name":"2021_sharing_data_outside.csv","type":"text/csv","lastModified":1668253391948.057,"size":28202908}] 2f:{"title":"Python Developers Survey 2021 - Map with Bubbles","cells":[{"id":0,"value":"# Python Developers Survey 2021 - Map with Bubbles\n\nVery much inspired by https://observablehq.com/@irenedelatorre/zoom-to-map-via-transform\n\nData from: https://lp.jetbrains.com/python-developers-survey-2021/\n\nInteraction from https://observablehq.com/@sjengle/interactivity\n\nCool explanation on why to use SQRT scale for circles https://benclinkinbeard.com/d3tips/log-and-power-scales/\n\nYou can change the scale to distort the information.\n\n#30DayMapChallenge 2022 - *scales*","pinned":false,"hidden":false,"mode":"md"},{"id":49,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":467,"value":"viewof k = Inputs.radio(\n new Map([\n [\"Sqrt\", 0.5],\n [\"Linear\", 1],\n [\"All the same\", 0]\n ]),\n {\n value: 0.5,\n label: html`Scale`,\n format: ([name, value]) => `${name} (${value})`\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":495,"value":"klabels = ({ 0.5: \"Sqrt\", 1: \"Linear\", 0: \"All the same\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"footer = \"Source: JetBrains - Python Developers Survey 2021 | #30DayMapChallenge scales | @terezaif\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"## Interactivity\n\nTo learn more on how to do interactive bubbly things https://observablehq.com/@sjengle/interactivity","pinned":false,"hidden":false,"mode":"md"},{"id":239,"value":"bubbles = d3.select(map).select(\"g#bubbles\").selectAll(\"circle\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":243,"value":"highlight = {\n const svg = d3.select(map);\n\n // used to test out interactivity in this cell\n const status = html`highlight: none`;\n\n // event.namespace allows us to add multiple functions for one event\n // only needed in examples like this where some events trigger multiple functions\n bubbles.on(\"mouseover.highlight\", function (d) {\n d3.select(this)\n .raise() // bring to front\n .style(\"stroke\", py_colors.sunglow)\n .style(\"stroke-width\", 3)\n .style(\"fill\", py_colors.lapislazuli);\n // show what we interacted with\n d3.select(status).text(\"highlighted\");\n });\n\n bubbles.on(\"mouseout.highlight\", function (d) {\n d3.select(this)\n .style(\"stroke\", py_colors.grey)\n .style(\"stroke-width\", 1.2)\n .style(\"fill\", py_colors.azure);\n d3.select(status).text(\"highlight: none\");\n });\n\n return status;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"## Bubble Radius Scales","pinned":false,"hidden":false,"mode":"md"},{"id":86,"value":"value_domain = d3.extent(intellij2021, (d) => d[\"count\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":88,"value":"scaleMaxRadiusWorld = d3\n .scaleLinear()\n .domain([320, 480, 600, 700])\n .range([5, 7, 8, 15])","pinned":true,"hidden":false,"mode":"ojs"},{"id":90,"value":"scaleMinRadiusWorld = d3\n .scaleLinear()\n .domain([320, 480, 600, 700])\n .range([0.5, 0.5, 1, 1])","pinned":true,"hidden":false,"mode":"ojs"},{"id":92,"value":"maxRWorld = scaleMaxRadiusWorld(width)","pinned":true,"hidden":false,"mode":"ojs"},{"id":94,"value":"minRWorld = scaleMinRadiusWorld(width)","pinned":true,"hidden":false,"mode":"ojs"},{"id":96,"value":"scaleRadiusWorld = d3\n .scalePow()\n .exponent(k)\n .domain(value_domain)\n .range([minRWorld, maxRWorld])","pinned":true,"hidden":false,"mode":"ojs"},{"id":711,"value":"tippytheme = \"light-border\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":213,"value":"tippy_style = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":215,"value":"tippy = require(\"tippy.js@6\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"## Map Scales","pinned":false,"hidden":false,"mode":"md"},{"id":41,"value":"height = (width * 2) / 3.3","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"devices_breaks = [320, 560, 1024]","pinned":true,"hidden":false,"mode":"ojs"},{"id":306,"value":"margin = ({ top: 50, bottom: 30, left: 30, right: 30 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"scaleScaleMap = d3.scaleLinear().domain(devices_breaks).range([50, 90, 150])","pinned":true,"hidden":false,"mode":"ojs"},{"id":43,"value":"scaleMap = scaleScaleMap(width)","pinned":true,"hidden":false,"mode":"ojs"},{"id":45,"value":"myProjection = projections\n .geoRobinson()\n .center([0, 0])\n .scale(scaleMap)\n .translate([width / 2, height / 2])","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"geoPath = d3.geoPath().projection(myProjection)","pinned":true,"hidden":false,"mode":"ojs"},{"id":53,"value":"py_colors = ({\n grey: \"#646464\",\n sunglow: \"#FFD43B\",\n shandy: \"#FFE873\",\n lapislazuli: \"#306998\",\n azure: \"#4B8BBE\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"## Data","pinned":false,"hidden":false,"mode":"md"},{"id":69,"value":"Inputs.table(_sharing_data_outside)","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"_sharing_data_outside.filter(function (d) {\n return d[\"country.live\"] != null;\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"pythondevcountries = d3\n .flatRollup(\n _sharing_data_outside.filter(function (d) {\n return d[\"country.live\"] != null && d[\"country.live\"] != \"Other country\";\n }),\n (v) => v.length,\n (d) => d[\"country.live\"]\n )\n .map(([Country, Count]) => ({ Country, Count }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":405,"value":"country_spicified_ratio = total_respondends / _sharing_data_outside.length","pinned":true,"hidden":false,"mode":"ojs"},{"id":75,"value":"total_respondends = d3.sum(pythondevcountries, (d) => d.Count)","pinned":true,"hidden":false,"mode":"ojs"},{"id":184,"value":"List of countries to be renamed as the format is not .. standard.. or matching the other countries file","pinned":false,"hidden":false,"mode":"md"},{"id":77,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"intellij2021 = pythondevcountries.map((d) => ({\n name: rename.get(d.Country) || d.Country,\n count: +d.Count,\n countshare: +d.Count / total_respondends\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"data = intellij2021.map((d) => ({\n name: d.name,\n count: +d.count,\n countshare: +d.countshare,\n lat: countriesInfo.find((o) => o.CountryName === d.name).CenterLatitude,\n lon: countriesInfo.find((o) => o.CountryName === d.name).CenterLongitude,\n population: countriesInfo.find((o) => o.CountryName === d.name).population\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"data about countries.. for example the centroid","pinned":false,"hidden":false,"mode":"md"},{"id":166,"value":"countriesInfo = FileAttachment(\"countries-4.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":194,"value":"data from the survey","pinned":false,"hidden":false,"mode":"md"},{"id":66,"value":"_sharing_data_outside = FileAttachment(\"2021_sharing_data_outside.csv\").csv({\n typed: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"## Shapefiles","pinned":false,"hidden":false,"mode":"md"},{"id":22,"value":"countries = topojson.feature(world, world.objects.world_map)","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"World topojson with countries","pinned":false,"hidden":false,"mode":"md"},{"id":12,"value":"world = FileAttachment(\"world_map-4.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"## Libraries","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"Import D3 projections. We want to use the Robinson projection https://github.com/d3/d3-geo-projection#geoRobinson","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"projections = require(\"d3-geo@1\", \"d3-geo-projection@2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":331,"value":"colors = ({\n background: \"#d8d6a4\",\n textcolor: \"#864e1b\",\n light: \"#aabba3\",\n dark: \"#cc7420\",\n mix: \"#799368\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":308,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":422,"value":"import { slider } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}