2c:null 2d:["$","title",null,{"children":"China Leads But Europe Follows | D3 Work | Observable"}] 32:Tc07,{ // svg: const width = 900, height = 525, // margins containing axes, labels: margin = { top: 50, right: 150, bottom: 0, left: 125 }; const svg = d3.create("svg").attr("width", width).attr("height", height); const canvas = html`

${svg.node()}

`; // Set x-scale const xScale = d3 .scaleLinear() .domain([0, d3.max(data, (d) => d.n)]) .range([margin.left, width - margin.right]); // Set y-scale const yScale = d3 .scaleBand() .domain(data.map((d) => d.country)) .range([margin.top, height - margin.bottom]) .paddingOuter(0.2) .paddingInner(0.4); // Format x-axis & label text const xAxis = d3 .axisTop(xScale) .ticks(3) .tickFormat((d) => d) .tickSize(-height); // Format y-axis & label text const yAxis = d3.axisLeft(yScale).tickSizeOuter(0); // draw x-axis const xAxisGroup = svg .append("g") .attr("class", "x-axis") .attr("transform", `translate(0,${margin.top})`) .call(xAxis); // add axis label xAxisGroup .append("text") .attr("dx", width - margin.right) .attr("dy", "-20") .text("Number of World Heritage Sites") .attr("text-anchor", "end") .attr("fill", "#686D76") .attr("class", "axis-label"); // draw y-axis svg .append("g") .attr("class", "y-axis") .attr("transform", `translate(${margin.left},0)`) .call(yAxis) // nudge country names (y-axis) over .selectAll("text") .attr("transform", `translate(3, 0)`); // draw bars svg .selectAll("rect") .data(data) .join("rect") .attr("x", margin.left) .attr("y", (d) => yScale(d.country)) .attr("width", (d) => xScale(d.n) - margin.left) .attr("height", yScale.bandwidth()) .attr("fill", (d) => (d.region == "Europe/N America" ? "#be95c4" : "#ddd")) .attr("stroke", (d) => newShade(d.region == "Europe/N America" ? "#be95c4" : "#dddddd", -50) ) .attr("stroke-width", 1); // mexico svg .append("text") .attr("x", width / 1.7) .attr("y", height / 3.2) .text("Mexico is categorized under") .attr("font-size", "0.7rem") .attr("fill", "#333") .attr("font-weight", 400) .append("tspan") .attr("x", width / 1.7) .attr("dy", 12) .text("Latin America and the Caribbean"); return canvas; }33:T80e,data = [ { country: "China", n: 56, region: "Asia/Pacific" }, { country: "Italy", n: 52, region: "Europe/N America" }, { country: "Spain", n: 46, region: "Europe/N America" }, { country: "France", n: 45, region: "Europe/N America" }, { country: "Germany", n: 42, region: "Europe/N America" }, { country: "India", n: 41, region: "Asia/Pacific" }, { country: "Mexico", n: 35, region: "Latin America" }, { country: "United Kingdom", n: 31, region: "Europe/N America" }, { country: "Russia", n: 27, region: "Europe/N America" }, { country: "Iran", n: 26, region: "Asia/Pacific" }, { country: "Japan", n: 24, region: "Asia/Pacific" }, { country: "United States", n: 23, region: "Europe/N America" }, { country: "Brazil", n: 22, region: "Latin America" }, { country: "Türkiye", n: 21, region: "Asia/Pacific" }, { country: "Australia", n: 20, region: "Asia/Pacific" }, { country: "Canada", n: 20, region: "Europe/N America" }, { country: "Greece", n: 19, region: "Europe/N America" }, { country: "Portugal", n: 16, region: "Europe/N America" }, { country: "South Korea", n: 16, region: "Asia/Pacific" }, { country: "Czechia", n: 14, region: "Europe/N America" }, { country: "Poland", n: 13, region: "Europe/N America" }, { country: "Sweden", n: 13, region: "Europe/N America" }, { country: "Peru", n: 12, region: "Latin America" }, { country: "Ethiopia", n: 11, region: "Africa" }, { country: "Belgium", n: 10, region: "Europe/N America" }, { country: "Denmark", n: 10, region: "Europe/N America" }, { country: "Indonesia", n: 10, region: "Asia/Pacific" }, { country: "Netherlands", n: 10, region: "Europe/N America" } ]34:[] 30:{"id":"20f58e4e4a2f9d39","slug":null,"title":"China Leads But Europe Follows","thumbnail":"e83d141e781c1711de2e26af911475a4cb63b76d39a9f642dfb43469b488b85f","access_level":"public","create_time":"$D2024-06-11T13:53:54.471Z","update_time":"$D2025-01-24T05:23:39.718Z","view_time":null,"first_public_time":"$D2025-01-24T05:23:53.053Z","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":264,"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":0,"collection":null,"type":"notebook","body":{"title":"China Leads But Europe Follows","cells":[{"id":0,"value":"# China Leads But Europe Follows","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":191,"value":"\n\nChina may top the list of countries with the most UNESCO World Heritage Sites (56 total), but of the 28 countries with at least 10 sites, 59% are in Europe or North America, followed by Asian and Pacific countries making up 26% of the list.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":38,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"

Source: UNESCO World Heritage ListMade for Data Storytelling Bootcamp

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"----","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"### Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"----","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":153,"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":"$W34","stdlib":"1","titling":"auto"}} 31:"$30:body"