27:null 28:["$","title",null,{"children":"Temperature | Population | GDP | Temperature Population GDP | Observable"}] 2d:[{"id":"254a99fef9cfdc739794cf276a25ffce226b9d17d64789497bbed4935f1fda7d621149894d3a06e546f0e5c53beda2580db0166433ff2fac65397af1aa3627ea","href":"https://static.observableusercontent.com/files/254a99fef9cfdc739794cf276a25ffce226b9d17d64789497bbed4935f1fda7d621149894d3a06e546f0e5c53beda2580db0166433ff2fac65397af1aa3627ea","name":"countries-50m.json","type":"application/json","lastModified":1709408272541.673,"size":756420},{"id":"e8bcaac602e22ef728146b7091cde1963f0a077f7cef71acfdec3429651575e62f4624ef20fe66b0ef98616978261c1dcd35588aff6a4ef26fc27e7811014f63","href":"https://static.observableusercontent.com/files/e8bcaac602e22ef728146b7091cde1963f0a077f7cef71acfdec3429651575e62f4624ef20fe66b0ef98616978261c1dcd35588aff6a4ef26fc27e7811014f63","name":"country_code_to_name_mapping.json","type":"application/json","lastModified":1709408318310.728,"size":2953},{"id":"6dc6264e8cd2af736d32c7ee58066b7823b71f22da82fe705cbe074d25ed4345fe63965f4f47ddd176113faaa960e065c1a7f5af4fef9914c12bfd4dfa881cef","href":"https://static.observableusercontent.com/files/6dc6264e8cd2af736d32c7ee58066b7823b71f22da82fe705cbe074d25ed4345fe63965f4f47ddd176113faaa960e065c1a7f5af4fef9914c12bfd4dfa881cef","name":"Land_Surface_Temperature_2000_2022.csv","type":"text/csv","lastModified":1709408318463.702,"size":57004},{"id":"cf6018a03b6aa728540e5ff0a54c747d0db962eace22b3ac371cc0c8a72c2e37176d9ee962168da3f81112316c638a383087104787226c55a6777c6afe7fd043","href":"https://static.observableusercontent.com/files/cf6018a03b6aa728540e5ff0a54c747d0db962eace22b3ac371cc0c8a72c2e37176d9ee962168da3f81112316c638a383087104787226c55a6777c6afe7fd043","name":"GDP_2000_2022.csv","type":"text/csv","lastModified":1709408318490.148,"size":67146},{"id":"5ae41b3368c0878bea9ca71eb18ccd663148fbb6c30161e51b57125053d0e872bd1a6f38a9c3c55acb243fbdda2d7c96b9a24f059961ba398ec3e29cc75094c8","href":"https://static.observableusercontent.com/files/5ae41b3368c0878bea9ca71eb18ccd663148fbb6c30161e51b57125053d0e872bd1a6f38a9c3c55acb243fbdda2d7c96b9a24f059961ba398ec3e29cc75094c8","name":"Population_Total_2000_2022.csv","type":"text/csv","lastModified":1709408318519.019,"size":51197}] 2b:{"id":"ffaff42c36144c5f","slug":null,"title":"Temperature | Population | GDP","thumbnail":"eb613cfd56b9b65802cc035f7094212f3ba679ca0270268e0bed452b9e51e7df","access_level":"public","create_time":"$D2024-03-02T19:37:52.541Z","update_time":"$D2024-03-02T22:40:45.339Z","view_time":null,"first_public_time":"$D2024-03-02T19:37:52.541Z","has_unpublished_edits":null,"fork":{"id":"ece4ff3b84cdefec","slug":null,"title":"Education | Population | Development","owner":{"id":"777026a09975661c","login":"edu-pop","name":"Education and Population"}},"stars":0,"starred":false,"owner":{"type":"team","id":"d4f4f094fddec257","login":"temperature-population-gdp","name":"Temperature Population GDP","avatar_url":"https://avatars-next.observableusercontent.com/16b1335db2a59f9136df9bf90561fbf61b8240311697e4a8fd032fa6b6d1f5e7","tier":"starter_2024"},"version":245,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3b866e9c6e1313d1","login":"hasaranga-jayathilake2","name":"Hasaranga Jayathilake","avatar_url":"https://avatars-next.observableusercontent.com/29ab353cf77ddf2e1135d9b09a524047b2a3e04e01aa59a0272c636bc8cfc5e9","tier":null}],"members":[{"type":"individual","id":"3b866e9c6e1313d1","login":"hasaranga-jayathilake2","name":"Hasaranga Jayathilake","avatar_url":"https://avatars-next.observableusercontent.com/29ab353cf77ddf2e1135d9b09a524047b2a3e04e01aa59a0272c636bc8cfc5e9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Temperature | Population | GDP","cells":[{"id":0,"value":"# Temperature | Population | GDP\n## What’s the Connection?\n### How does temperature influence the size and growth of populations and economies around the world? This content explores the patterns and relationships between temperature variation, population distribution, and GDP levels across different countries. \n###### Powered by: Data from The World Bank - Databank","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":129,"value":"# World Temperature and Population Distribution","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":29,"value":"map = htl.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"projection = d3.geoEqualEarth()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"Many other projections are available. [Browse them here](https://observablehq.com/collection/@d3/d3-geo-projection).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"path = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"height = {\n const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(width, outline)).bounds(outline);\n const dy = Math.ceil(y1 - y0), l = Math.min(Math.ceil(x1 - x0), dy);\n projection.scale(projection.scale() * (l - 1) / l).precision(0.2);\n return dy;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"outline = ({type: \"Sphere\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"graticule = d3.geoGraticule10()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"borders = topojson.mesh(world, world.objects.countries, (a, b) => a !== b)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"// Load and parse the joining file\ncountryCodeToName = FileAttachment(\"country_code_to_name_mapping.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"// Load and parse the temperature data\ntemperatureData = await FileAttachment(\n \"Land_Surface_Temperature_2000_2022.csv\"\n).csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"// Define this in its own cell\nimport { select } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"// Create Dropdown Menus for Year Selection\nviewof selectedYear = select({\n title: \"Select Year\",\n options: [...Array(23).keys()].map((x) => x + 2000), // This will create an array from 2000 to 2022\n value: 2022\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"// Then define your helper functions in their own cells or in the same cell if they're short\nfunction mapCountryCodeToName(code) {\n return countryCodeToName[code];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"function getTemperatureByCountryCodeAndYear(code, year) {\n const temp = temperatureData.find(\n (d) => d[\"Country Code\"] === code && d[year]\n );\n return temp ? parseFloat(temp[year]) : null;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"// Assuming you have an SVG element in your Observable notebook\nsvg = d3.select(DOM.svg(width, height))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"function colorMap(colorScale) {\n svg.selectAll(\"path\").attr(\"fill\", function (d, i) {\n // Assuming the first path is the outline, the second is the graticule, the third is the land, etc.\n // You may need to adjust the logic here based on the specific paths in your SVG\n if (i === 2) {\n // This is a simplification; you'll likely need more logic to match paths to countries\n const countryName = mapCountryCodeToName(d.properties.iso_a3); // Assuming you can derive country codes from your paths\n const temperature = getTemperatureByCountryCodeAndYear(\n countryName,\n selectedYear.value\n );\n return temperature ? colorScale(temperature) : \"#ccc\";\n } else {\n return; // Return nothing to leave the fill as is\n }\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"// Assuming your paths are directly within the SVG and not within a element\nland = svg.selectAll(\"path\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"d3 = require(\"d3@7\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"// Create the Color Scale\ncolorScale = d3\n .scaleSequential(d3.interpolateRdYlBu)\n .domain([\n d3.min(temperatureData, (d) => +d.value),\n d3.max(temperatureData, (d) => +d.value)\n ])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"// You would then call the colorMap function and pass the necessary arguments\n// Make sure that 'land' and 'colorScale' are defined or imported correctly in your notebook\ncolorMap(colorScale)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"# Map 2","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"world = FileAttachment(\"countries-50m.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"map1 = {\n const container = yield htl.html`

`;\n const map = L.map(container).setView([37.774, -122.423], 13);\n L.tileLayer(\"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\", {\n attribution: \"© OpenStreetMap contributors\"\n }).addTo(map);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"# Map 3","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":133,"value":"Plot.plot({\n marks: [\n Plot.barY(alphabet, {x: \"letter\", y: \"frequency\", sort: {x: \"y\", reverse: true}}),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2d","stdlib":"1","titling":"auto"}} 2c:"$2b:body"