2a:null 2b:["$","title",null,{"children":"Hello World Map | Keval Parekh | Observable"}] 30:T1d28,mapofHellos = { //svg variables const width = 720; const height = 360; //create SVG artboard const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); //black background const bg = svg .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", height) .attr("fill", "#000"); //creating arrays for sorting countries based on their regions const asianCountries = []; const africanCountries = []; const europeanCountries = []; const americanCountries = []; const oceaniaCountries = []; //colour codes for different countries based on regions const asiaColour = "red"; const europeColour = "orange"; const americasColour = "yellow"; const africaColour = "green"; const oceaniaColour = "violet"; //sorting asian countries function sortAsianCountries() { for (let i = 0; i < countrycontinent.length; i++) { for (let j = 0; j < helloDataset.length; j++) { if ( countrycontinent[i].code_2.toLowerCase() == helloDataset[j].code && countrycontinent[i].continent == "Asia" ) { asianCountries.push(helloDataset[j]); } } } //drawing asian countries for (let i = 0; i < asianCountries.length; i++) { const xPosition = (parseFloat(asianCountries[i].long) + 180) * 2; const yPosition = height - (parseFloat(asianCountries[i].lat) + 90) * 2; //create circles for each country svg .append("circle") .attr("cx", xPosition) .attr("cy", yPosition) .attr("r", 2) .attr("fill", "none") .attr("stroke", asiaColour) .attr("stroke-width", 1); //create hello text for each country svg .append("text") .attr("x", xPosition) .attr("y", yPosition) .text(asianCountries[i].hello) .attr("fill", asiaColour) .attr("font-family", "Proxima Nova") .attr("font-size", "10px"); //re-setting x & y coordinates xPosition == 0; yPosition == 0; } } //sorting african countries function sortAfricanCountries() { for (let i = 0; i < countrycontinent.length; i++) { for (let j = 0; j < helloDataset.length; j++) { if ( countrycontinent[i].code_2.toLowerCase() == helloDataset[j].code && countrycontinent[i].continent == "Africa" ) { africanCountries.push(helloDataset[j]); } } } //drawing african countries for (let i = 0; i < africanCountries.length; i++) { const xPosition = (parseFloat(africanCountries[i].long) + 180) * 2; const yPosition = height - (parseFloat(africanCountries[i].lat) + 90) * 2; //create circles for each country svg .append("circle") .attr("cx", xPosition) .attr("cy", yPosition) .attr("r", 2) .attr("fill", "none") .attr("stroke", africaColour) .attr("stroke-width", 1); //create hello text for each country svg .append("text") .attr("x", xPosition) .attr("y", yPosition) .text(africanCountries[i].hello) .attr("fill", africaColour) .attr("font-family", "Proxima Nova") .attr("font-size", "10px"); //re-setting x & y coordinates xPosition == 0; yPosition == 0; } } //sorting european countries function sortEuropeanCountries() { for (let a = 0; a < countrycontinent.length; a++) { for (let b = 0; b < helloDataset.length; b++) { if ( countrycontinent[a].code_2.toLowerCase() == helloDataset[b].code && countrycontinent[a].continent == "Europe" ) { europeanCountries.push(helloDataset[b]); } } } //drawing european countries for (let i = 0; i < europeanCountries.length; i++) { const xPosition = (parseFloat(europeanCountries[i].long) + 180) * 2; const yPosition = height - (parseFloat(europeanCountries[i].lat) + 90) * 2; //create circles for each country svg .append("circle") .attr("cx", xPosition) .attr("cy", yPosition) .attr("r", 2) .attr("fill", "none") .attr("stroke", europeColour) .attr("stroke-width", 1); //create hello text for each country svg .append("text") .attr("x", xPosition) .attr("y", yPosition) .text(europeanCountries[i].hello) .attr("fill", europeColour) .attr("font-family", "Proxima Nova") .attr("font-size", "10px"); //re-setting x & y coordinates xPosition == 0; yPosition == 0; } } //sorting american countries function sortAmericanCountries() { for (let a = 0; a < countrycontinent.length; a++) { for (let b = 0; b < helloDataset.length; b++) { if ( countrycontinent[a].code_2.toLowerCase() == helloDataset[b].code && countrycontinent[a].continent == "Americas" ) { americanCountries.push(helloDataset[b]); } } } //drawing american countries for (let i = 0; i < americanCountries.length; i++) { const xPosition = (parseFloat(americanCountries[i].long) + 180) * 2; const yPosition = height - (parseFloat(americanCountries[i].lat) + 90) * 2; //create circles for each country svg .append("circle") .attr("cx", xPosition) .attr("cy", yPosition) .attr("r", 2) .attr("fill", "none") .attr("stroke", americasColour) .attr("stroke-width", 1); //create hello text for each country svg .append("text") .attr("x", xPosition) .attr("y", yPosition) .text(americanCountries[i].hello) .attr("fill", americasColour) .attr("font-family", "Proxima Nova") .attr("font-size", "10px"); //re-setting x & y coordinates xPosition == 0; yPosition == 0; } } //sorting oceania countries function sortOceaniaCountries() { for (let l = 0; l < countrycontinent.length; l++) { for (let m = 0; m < helloDataset.length; m++) { if ( countrycontinent[l].code_2.toLowerCase() == helloDataset[m].code && countrycontinent[l].continent == "Oceania" ) { oceaniaCountries.push(helloDataset[m]); } } } //drawing oceania countries for (let i = 0; i < oceaniaCountries.length; i++) { const xPosition = (parseFloat(oceaniaCountries[i].long) + 180) * 2; const yPosition = height - (parseFloat(oceaniaCountries[i].lat) + 90) * 2; //create circles for each country svg .append("circle") .attr("cx", xPosition) .attr("cy", yPosition) .attr("r", 2) .attr("fill", "none") .attr("stroke", oceaniaColour) .attr("stroke-width", 1); //create hello text for each country svg .append("text") .attr("x", xPosition) .attr("y", yPosition) .text(oceaniaCountries[i].hello) .attr("fill", oceaniaColour) .attr("font-family", "Proxima Nova") .attr("font-size", "10px"); //re-setting x & y coordinates xPosition == 0; yPosition == 0; } } sortAsianCountries(); sortAfricanCountries(); sortEuropeanCountries(); sortAmericanCountries(); sortOceaniaCountries(); return svg.node(); }31:[{"id":"5a4d4a63e91df4013dd46a3aeb1a85bf3afaa95d1159f3ce52607c7c8271c4795bfe755fe85fa6df9f99134408286817b167cc6b9d3c2244b97c41fa7d94af56","href":"https://static.observableusercontent.com/files/5a4d4a63e91df4013dd46a3aeb1a85bf3afaa95d1159f3ce52607c7c8271c4795bfe755fe85fa6df9f99134408286817b167cc6b9d3c2244b97c41fa7d94af56","name":"countryContinent.csv","type":"text/csv","lastModified":1663772945574.195,"size":16313}] 2e:{"id":"5c9ed8769623e04c","slug":"hello-world-map-challenge","title":"Hello World Map","thumbnail":"0c95a509d28aee8baf27752c261024b24583968b488cca16e47073faf57bcc32","access_level":"public","create_time":"$D2022-09-20T05:32:17.527Z","update_time":"$D2022-09-22T21:59:48.731Z","view_time":null,"first_public_time":"$D2022-09-21T16:48:34.659Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"c13ce79fb895c9f0","login":"kepa","name":"Keval Parekh","avatar_url":"https://avatars-next.observableusercontent.com/e31a2357c656070894ec980152d78bc1b9f52d2d352f117622056297dd13ec89","tier":"starter_2024"},"version":228,"publish_version":228,"role":null,"authored":false,"authors":[{"type":"individual","id":"1f1c0408c5c585a9","login":"kepa","name":"Keval Parekh","avatar_url":"https://avatars-next.observableusercontent.com/e31a2357c656070894ec980152d78bc1b9f52d2d352f117622056297dd13ec89","tier":null}],"members":[{"type":"individual","id":"1f1c0408c5c585a9","login":"kepa","name":"Keval Parekh","avatar_url":"https://avatars-next.observableusercontent.com/e31a2357c656070894ec980152d78bc1b9f52d2d352f117622056297dd13ec89","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Hello World Map","cells":[{"id":0,"value":"# Hello World Map","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":40,"value":"import {helloDataset} from \"@zachpino/week-4-intro-to-javascript-for-visualization\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"# Sorting countries based on regions\n\nI wanted to sort countries based on their regions/continents. So, I attached one more data source which I found on Kaggle (https://www.kaggle.com/datasets/statchaitya/country-to-continent). ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":99,"value":"countrycontinent = FileAttachment(\"countryContinent.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1"}} 2f:"$2e:body"