25:["$","title",null,{"children":"Titans of Industry | HHlH's Workspace | Observable"}] 49:T6f5,titleCard1 = titleCard({ title: "Which Nations Harbor the Wealthiest?", subtitle: "An Interactive Color-Coded Mapping of Billionaires Worldwide.", extra: html`

Hover on a country to see counts, double-click for more detailed information, and press 'esc' to go back to the world map.

`, width: 1 }); 4a:T1dab,graph = { // Initialize the SVG dimensions const width = 960; const height = 600; // Create a SVG element and appends it to the DOM. const svg = d3.select(DOM.svg(width, height)); const g = svg.append("g"); // Set the panning and zooming limits const panningLimit = [[-100, 0], [width + 100, height]]; const zoom = d3.zoom() .scaleExtent([1, 8]) .translateExtent(panningLimit) .on("zoom", (event) => { g.attr("transform", event.transform); }); svg.call(zoom); // Create a container for the list of billionaires const listContainer = d3.create("div") .style("width", "200px") .style("height", "500px") .style("overflow", "auto") .style("border", "1px solid #ccc") .style("padding", "10px") .style("display", "none"); // Create a tooltip for displaying country-specific information const tooltip = d3.select("body").append("div") .attr("class", "tooltip") .style("position", "absolute") .style("visibility", "hidden") .style("background", "#f9f9f9") .style("border", "1px solid #e0e0e0") .style("border-radius", "5px") .style("padding", "10px") .style("font-family", "Arial, sans-serif") .style("font-size", "14px") .style("box-shadow", "2px 2px 6px 0px rgba(0,0,0,0.3)") .style("font-weight", "bold") .style("text-align", "center"); // Add two span elements within the tooltip for text and count tooltip.selectAll("span") .data(["text", "count"]) .enter().append("span") .style("display", "block") .style("margin-top", "8px"); // Function to display the tooltip on mouseover function showTooltip(event, d) { const countryName = d.properties.name; const count = new_billionaires_counts.get(countryName) || 0; let text = `${countryName}
Number of billionaires: ${count}
Double click to see more information`; tooltip.html(text) .style("visibility", "visible") .style("left", (event.pageX + 10) + "px") .style("top", (event.pageY - 10) + "px"); } // Function to hide the tooltip on mouseout function hideTooltip() { tooltip.style("visibility", "hidden"); } let max = 0; // Select and display the map data with interactive features g.selectAll("path") .data(topojson.feature(world, world.objects.countries).features) .enter().append("path") .attr("d", path) .style("fill", d => { const value = new_billionaires_counts.get(d.properties.name) || 0; max = Math.max(max, value); return colorScale(value); }) .style("stroke", "black") .on("mouseover", showTooltip) .on("mouseout", hideTooltip) .on("dblclick", function(event, d) { tooltip.style("visibility", "hidden"); const clickedCountryName = d.properties.name; const billionairesInCountry = billionaires_map_counts.get(clickedCountryName) || 0; updateBillionairesList(billionairesInCountry); g.selectAll("path").remove(); g.append("path") .datum(d) .attr("d", path) .style("fill", d => { const value = new_billionaires_counts.get(d.properties.name) || 0; return colorScale(value); }) .style("stroke", "black"); listContainer.style("display", "block"); // Event listener for the 'Escape' key d3.select("body").on("keydown", (event) => { if (event.key === "Escape") { listContainer.style("display", "none"); g.selectAll("path").remove(); svg.call(zoom); // Rebind the country data to path elements and re-apply attributes and styles g.selectAll("path") .data(topojson.feature(world, world.objects.countries).features) .enter().append("path") .attr("d", path) .style("fill", d => { const value = new_billionaires_counts.get(d.properties.name) || 0; return colorScale(value); }) .style("stroke", "black") .on("mouseover", showTooltip) .on("mouseout", hideTooltip) .on("dblclick", function(event, d) { tooltip.style("visibility", "hidden"); const clickedCountryName = d.properties.name; const billionairesInCountry = billionaires_map_counts.get(clickedCountryName) || 0; updateBillionairesList(billionairesInCountry); g.selectAll("path").remove(); g.append("path") .datum(d) .attr("d", path) .style("fill", d => { const value = new_billionaires_counts.get(d.properties.name) || 0; return colorScale(value); }) .style("stroke", "black"); listContainer.style("display", "block"); }); } }); }); // Function to update the list of billionaires based on the selected country function updateBillionairesList(billionaires) { // List update logic based on the billionaires data listContainer.selectAll("div").remove(); if (!billionaires || billionaires.length === 0) { listContainer.append("div") .text("Be the first one to pave the way!") .style("padding", "20px 20px 10px 20px"); listContainer.append("div") .text("Press 'esc' to go back") .style("padding", "10px 20px 20px 20px") .style("color", "grey") .style("font-size", "14px"); } else { const billionairesDiv = listContainer.selectAll("div") .data(billionaires, d => d.name); billionairesDiv.enter() .append("div") .merge(billionairesDiv) .style("padding", "20px") .style("border-bottom", "1px solid #ddd") .html(d => `

${d.name}

Rank: ${d.rank}

Worth: $${d.worth/1000}B

Gender: ${d.gender}

Age: ${d.age}

Industry: ${d.industry}

`); billionairesDiv.exit().remove(); listContainer.style("overflow", "auto"); // Addition of a title for the list container const titleContainer = listContainer.insert("div", ":first-child") .style("font-size", "24px") .style("font-weight", "bold"); titleContainer.append("span") .text("Billionaires List") .style("color", "black") .append("br"); titleContainer.append("span") .text("Press 'esc' to go back") .style("font-size", "14px") .style("color", "grey"); titleContainer.style("position", "sticky") .style("top", "0") .style("background", "white"); } } // Append a color legend to the SVG const legend = svg.append("g") .attr("transform", `translate(${width - 450}, 400)`); if (max === 1) { legend.append(() => color_legend1); } else if (max === 2){ legend.append(() => color_legend2); } else if (max === 3) { legend.append(() => color_legend3); } else if (max === 4) { legend.append(() => color_legend4); } else { legend.append(() => color_legend); } // Create a main container for the visualization with a white background and flex display const container = d3.create("div") .style("display", "flex") .style("background-color", "white"); // Append the SVG and list container to the main container container.append(() => svg.node()); container.append(() => listContainer.node()); // Return the main container for display return container.node(); }4b:[{"id":"a939eeecd18bdfe947cc339e43810b0ca32b2be733731159dc2ef82d0e47585c64100741c0d956cee5a5ab6e4e96f31a53ddf757596273f11d4f0f5f52c99501","href":"https://static.observableusercontent.com/files/a939eeecd18bdfe947cc339e43810b0ca32b2be733731159dc2ef82d0e47585c64100741c0d956cee5a5ab6e4e96f31a53ddf757596273f11d4f0f5f52c99501","name":"billionaires_rename_countries.csv","type":"text/csv","lastModified":1698624238271.766,"size":64434}] 29:{"id":"469f911c4d76319d","slug":null,"title":"Titans of Industry","thumbnail":"f146b84ffca9c29575470e9269c40c6d1ad1f72cabead3533bc0de7700958b7f","access_level":"public","create_time":"$D2023-10-26T22:30:18.508Z","update_time":"$D2023-11-26T22:28:02.554Z","view_time":null,"first_public_time":"$D2023-10-31T17:48:46.204Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"6cbabaf9fdd99332","login":"hhlh-ws","name":"HHlH's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/b6741292f2752b82ec5a454f2d0ebd0fc84b1b022d550eae5c89f72ba7f47950","tier":"starter_2024","bio":"","following":false},"version":508,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"abb2a9c963066f4f","login":"hhlh","name":"Lin","avatar_url":"https://avatars-next.observableusercontent.com/d0b25f99e994497d92833350c84e57776677ceb129a73fc590864edbe3df1033","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"abb2a9c963066f4f","login":"hhlh","name":"Lin","avatar_url":"https://avatars-next.observableusercontent.com/d0b25f99e994497d92833350c84e57776677ceb129a73fc590864edbe3df1033","tier":null,"role":"editor"},{"type":"team","id":"6cbabaf9fdd99332","login":"hhlh-ws","name":"HHlH's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/b6741292f2752b82ec5a454f2d0ebd0fc84b1b022d550eae5c89f72ba7f47950","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":9,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Titans of Industry","cells":[{"id":0,"value":"# Titans of Industry","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"// A wide selection of color legends\nimport {legend} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"// A slider with two ends and adjustable offsets\nimport {offsetInterval} from \"@mootari/offset-slider\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"// Visualisation title cards for the Trase front-end.\nimport {titleCard} from \"@trase/title-card\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"// Parse CSV file\nbillionaires_maps = d3.csvParse(await FileAttachment('billionaires_rename_countries.csv').text())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"// Store variables\nbillionaires_maps_selection = billionaires_maps.map(d => ({\n country: d.country,\n country_coordinates: [d.latitude_country, d.longitude_country],\n rank: d.rank,\n worth: d.finalWorth,\n name: d.personName,\n industry: d.industries,\n gender: d.gender,\n age: d.age\n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"// Offsets for ranks\nranks = [1, 10, 50, 100, 200, 300, 400, 500];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"// Offsets for ages\nages = [30, 40, 50, 60, 70, 80, 90, 100]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"// Get all unique industries\nuniqueIndustries = new Set(billionaires_maps.flatMap(d => \n Array.isArray(d.industries) ? d.industries : [d.industries]\n));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"// Sort all unique industries alphabetically (also include 'All' for all industries)\nindustries = ['All', ...uniqueIndustries].sort();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"// Display industries\nviewof industry = DOM.select(industries);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"// Filter map based on the chosen industry\nbillionaires_maps_filtered = industry === \"All\" ?\n billionaires_maps_selection :\n billionaires_maps_selection.filter(d => d.industry === industry)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"// Filter map based on the chosen gender\nbillionaires_maps_filtered_Gender = gender === 'All' ?\n billionaires_maps_filtered:\n billionaires_maps_filtered.filter(d => d.gender === genderMap.get(gender))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"// Filter map based on the chosen rank and age ranges\nbillionaires_maps_filtered_rank_age = billionaires_maps_filtered_Gender.filter(d => \n d.rank >= rank_range[0] && d.rank <= rank_range[1] &&\n d.age >= age_range[0] && d.age <= age_range[1]\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"// Group billionaires by country\nbillionaires_map_counts = d3.group(billionaires_maps_filtered_rank_age, d => d.country)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"// Creates a map with countries as keys and a single-element array containing the count of billionaires as values\nnew_billionaires_counts = new Map([...billionaires_map_counts].map(([key, value]) => [key, [value.length]]));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"// Creates a map with countries as keys and the count of billionaires as numeric values\nbillionaires_counts = new Map([...billionaires_map_counts].map(([key, value]) => [key, value.length]));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"colorScale = d3.scaleSequential()\n .domain([0, d3.max(billionaires_counts.values())])\n .interpolator(d3.interpolateBlues);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"// Legend for the color scale \"colorScale\" with a title \"Billionaires Count per Country\".\ncolor_legend = legend({\n color: colorScale,\n title: \"Billionaires Count per Country\",\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":470,"value":"colorScale1 = d3.scaleSequential()\n .domain([0, 1])\n .interpolator(d3.interpolateBlues);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":469,"value":"color_legend1 = legend({\n color: colorScale1,\n title: \"Billionaires Count per Country\",\n tickValues: [0, 1],\n tickFormat: d3.format(\".0f\")\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"value":"colorScale2 = d3.scaleSequential()\n .domain([0, 2])\n .interpolator(d3.interpolateBlues);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"color_legend2 = legend({\n color: colorScale2,\n title: \"Billionaires Count per Country\",\n tickValues: [0, 1, 2],\n tickFormat: d3.format(\".0f\")\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":466,"value":"colorScale3 = d3.scaleSequential()\n .domain([0, 3])\n .interpolator(d3.interpolateBlues);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"color_legend3 = legend({\n color: colorScale3,\n title: \"Billionaires Count per Country\",\n tickValues: [0, 1, 2, 3],\n tickFormat: d3.format(\".0f\")\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":464,"value":"colorScale4 = d3.scaleSequential()\n .domain([0, 4])\n .interpolator(d3.interpolateBlues);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"color_legend4 = legend({\n color: colorScale4,\n title: \"Billionaires Count per Country\",\n tickValues: [0, 1, 2, 3, 4],\n tickFormat: d3.format(\".0f\")\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"// Loading a JSON file containing world atlas data\nworld = d3.json(\"https://cdn.jsdelivr.net/npm/world-atlas@2/countries-50m.json\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"// Convert the TopoJSON data into a GeoJSON feature collection\ncountries = topojson.feature(world, world.objects.countries)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"// Natural Earth projection\nprojection = d3.geoNaturalEarth1()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"// Convert geographic data into SVG path elements that can be rendered on a map\npath = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"// Display genders with a default value of 'All'\nviewof gender = Inputs.radio([\"All\", \"Male\", \"Female\"], {\n value:\"All\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"// Maps full strings of genders to respective abbreviations\ngenderMap = new Map(Object.entries({\n 'Male': 'M',\n 'Female': 'F', \n 'All': 'All'\n}));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"// Displays the offset slider for rank\nviewof rank_range = offsetInterval(ranks, {\n formatValue: rank => rank.toString(),\n value: [ranks[0], ranks[ranks.length - 1]], // default to full range\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"// Displays the offset slider for age\nviewof age_range = offsetInterval(ages, {\n formatValue: ages => ages.toString(),\n value: [ages[0], ages[ages.length - 1]], // default to full range\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"chart = htl.html`\n${titleCard1} \n${graph}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4b","stdlib":"1"}} 24:null