2c:null 2d:["$","title",null,{"children":"World (Heritage Site) Domination | D3 Work | Observable"}] 32:Tf30,// previously used Natural Earth json but it added a global border => used defunct world map topojson and voila, border gone { // dimensions const width = 959, height = 480; // projection and fit map to svg dimensions const projection = d3.geoNaturalEarth1(); //.fitSize([width, height], land); // path generator: translates topojson coordinates to svg path values const path = d3.geoPath().projection(projection); const svg = d3.create("svg").attr("width", width).attr("height", height); const canvas = html`

${svg.node()}

`; // fill water svg .append("path") .attr("class", "sphere") .attr("d", path({ type: "Sphere" })) //.attr("fill", "rgba(202, 244, 255, 0.25)"); .attr("fill", "#f8f8f8"); // group geographic elements const geoGroup = svg.append("g"); // draw regions geoGroup .selectAll(".regions") .data(land.features) .join("path") .attr("d", path) //.attr("fill", "#f8f8f8") .attr("fill", "white") .attr("stroke", "#aaa") .attr("stroke-width", 0.5) .attr("stroke-opacity", 0.5) .style("filter", "drop-shadow(1px 1px 1px rgb(0.25 0.25 0.25 / 0.12))"); // outlets geoGroup .selectAll("circle") .data(sitesData) .join("circle") .attr("cx", (d) => projection([d.longitude, d.latitude])[0]) .attr("cy", (d) => projection([d.longitude, d.latitude])[1]) .attr("r", 3) .attr("fill", (d) => colorScale(d.category)) .attr("fill-opacity", 0.5) .attr("stroke", "white") .attr("stroke", (d) => d.category == "Mixed" ? "black" : newShade(colorScale(d.category), -50) ) .attr("stroke-width", 1); // annotations // Europe geoGroup .append("text") .attr("x", width / 2 - 110) .attr("y", height / 5) .html(`Europe has 510`) .attr("font-family", "Poppins") .attr("font-size", "0.6rem") .attr("text-anchor", "start") .attr("font-weight", 600) .attr("fill", "#333") .append("tspan") .attr("x", width / 2 - 110) .attr("dy", 10) .text("sites on the list,") .attr("font-weight", 400) .append("tspan") .attr("x", width / 2 - 110) .attr("dy", 10) .text("the most of any") .append("tspan") .attr("x", width / 2 - 110) .attr("dy", 10) .text("continent"); // China // geoGroup // .append("text") // .attr("x", width - 105) // .attr("y", height / 3) // .html(`China has 56`) // .attr("font-family", "Poppins") // .attr("font-size", "0.6rem") // .attr("text-anchor", "start") // .attr("font-weight", 600) // .attr("fill", "#333") // .append("tspan") // .attr("x", width - 105) // .attr("dy", 10) // .text("sites on the") // .attr("font-weight", 400) // .append("tspan") // .attr("x", width - 105) // .attr("dy", 10) // .text("list, more than") // .append("tspan") // .attr("x", width - 105) // .attr("dy", 10) // .text("any other country"); // Africa and Arab States // geoGroup // .append("text") // .attr("x", width / 1.5) // .attr("y", height / 1.8) // .html(`Africa and the Arab States`) // .attr("font-family", "Poppins") // .attr("font-size", "0.6rem") // .attr("text-anchor", "start") // .attr("font-weight", 600) // .attr("fill", "#333") // .append("tspan") // .attr("x", width / 1.5) // .attr("dy", 10) // .text("together have 196 sites") // .attr("font-weight", 400) // .append("tspan") // .attr("x", width / 1.5) // .attr("dy", 10) // .text("(16% of the list)"); return canvas; }33:[{"id":"7c7b299dae92e0656c7e6adf393e152c74bcb782fea456e6d0b54c23edb1257b42e395127d80de2286d3905a8cea46f0dec0d94dd142e3041923343da66a4f91","href":"https://static.observableusercontent.com/files/7c7b299dae92e0656c7e6adf393e152c74bcb782fea456e6d0b54c23edb1257b42e395127d80de2286d3905a8cea46f0dec0d94dd142e3041923343da66a4f91","name":"whsites.json","type":"application/json","lastModified":1718172921000.562,"size":254344},{"id":"88c7319e70fd6af7ed36dff96f6e39837ef2a3f1733770008554268221238bef718ddbb07045a3e2b7a531f96d89877b7468facbaaf1aaee63b3a98b67b9cfbe","href":"https://static.observableusercontent.com/files/88c7319e70fd6af7ed36dff96f6e39837ef2a3f1733770008554268221238bef718ddbb07045a3e2b7a531f96d89877b7468facbaaf1aaee63b3a98b67b9cfbe","name":"land-50m.json","type":"application/json","lastModified":1718172340389.898,"size":545534}] 30:{"id":"8f947e5008f124f5","slug":null,"title":"World (Heritage Site) Domination","thumbnail":"d132322f9d8014291ff1f802be3c953dff2ed7ab70ef971495b7e434608e1ff4","access_level":"public","create_time":"$D2024-06-12T04:54:02.695Z","update_time":"$D2025-01-24T05:21:53.000Z","view_time":null,"first_public_time":"$D2025-01-24T05:22:42.579Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"32fb4af23ff100b0","login":"wsjeche","name":"D3 Work","avatar_url":"https://avatars-next.observableusercontent.com/08ee8f3c2a4a4a92bccc5adb2c0757e65c23cd95049f13fdf573e41c741b2726","tier":"starter_2024"},"version":505,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c7f8a8c8d4026c16","login":"jeche","name":"Jennifer","avatar_url":"https://avatars-next.observableusercontent.com/2c99b0f3c8f49df2fdfe70a529d22c753549f920292875a89064bfb32601f46e","tier":null}],"members":[{"type":"individual","id":"c7f8a8c8d4026c16","login":"jeche","name":"Jennifer","avatar_url":"https://avatars-next.observableusercontent.com/2c99b0f3c8f49df2fdfe70a529d22c753549f920292875a89064bfb32601f46e","tier":null,"role":"editor"},{"type":"team","id":"32fb4af23ff100b0","login":"wsjeche","name":"D3 Work","avatar_url":"https://avatars-next.observableusercontent.com/08ee8f3c2a4a4a92bccc5adb2c0757e65c23cd95049f13fdf573e41c741b2726","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"World (Heritage Site) Domination","cells":[{"id":0,"value":"# World (Heritage Site) Domination","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":329,"value":"When looking at the locations of UNESCO World Heritage sites – color-coded on the map by cultural, natural and both cultural and natural sites – by continent, Europe dominates in sheer number and density. ","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"

Source: UNESCO World Heritage ListMade for Data Storytelling Bootcamp

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":300,"value":"----","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":276,"value":"### Map data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"//worldMap = FileAttachment(\"ne_10m_land.json\").json()\nworldMap = FileAttachment(\"land-50m.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"land = topojson.feature(worldMap, worldMap.objects.land)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"### Point data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":215,"value":"sitesData = FileAttachment(\"whsites.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"### Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":229,"value":"colorScale = d3\n .scaleOrdinal()\n .domain([\"Cultural\", \"Natural\", \"Mixed\"])\n //.range([\"#EE4E4E\", \"#3DB2FF\", \"#775ADA\"])\n // .range([\"#A0DEFF\", \"#FFDB00\", \"#06D001\"])\n .range([\"#A0DEFF\", \"#C39898\", \"#333\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":484,"value":"// get darker or lighter hex color based on input color\n// https://natclark.com/tutorials/javascript-lighten-darken-hex-color/\n\nnewShade = (hexColor, magnitude) => {\n hexColor = hexColor.replace(`#`, ``);\n if (hexColor.length === 6) {\n const decimalColor = parseInt(hexColor, 16);\n let r = (decimalColor >> 16) + magnitude;\n r > 255 && (r = 255);\n r < 0 && (r = 0);\n let g = (decimalColor & 0x0000ff) + magnitude;\n g > 255 && (g = 255);\n g < 0 && (g = 0);\n let b = ((decimalColor >> 8) & 0x00ff) + magnitude;\n b > 255 && (b = 255);\n b < 0 && (b = 0);\n return `#${(g | (b << 8) | (r << 16)).toString(16)}`;\n } else {\n return hexColor;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 31:"$30:body"