27:null 28:["$","title",null,{"children":"People | Wealth | Growth | Temperature Population GDP | Observable"}] 2d:T589,### Data Description - The data comes from the years 1974 to 2022. - Used the following data columns to make this report. | Code | Indicator Name | Brief Definition | |---------------------|---------------------------------------------|-------------------------------------------------------------------------------------------------------| | SP.POP.GROW | Population growth (annual %) | Annual population growth rate as a percentage, based on midyear estimates. | | SP.POP.TOTL | Population, total | Total population count based on the de facto definition, including all residents regardless of status.| | NY.GDP.MKTP.CD | GDP (current US$) | Gross domestic product (GDP) at market prices in current US dollars. | | NY.GDP.MKTP.KD.ZG | GDP growth (annual %) | Annual percentage growth rate of GDP at market prices in constant local currency. | | NY.GDP.PCAP.PP.CD | GDP per capita, PPP (current international $)| GDP per capita in current international dollars, adjusted for purchasing power parity. | The below table cell shows the dataset utilized for compiling this report.2e:T1591,#### Technology description on Dashboard ##### Map |Type|Feature|Description| |-----|-----------|-----------| |Indicator|Total Population| Shows where people live across the globe. Big blue bubbles mean more people live there.| |Indicator|GDP in USD| Uses orange bubbles to indicate how much money each country makes. Bigger bubbles show higher GDP.| |Indicator|GDP per Capita|Green bubbles represent money earned per person in each country. Larger bubbles signify more money per person.| |Indicator|Population Growth|Green bubbles indicate how fast the population is growing. The bigger the bubble, the faster the growth.| |Indicator|GDP Growth|Purple bubbles show the rate at which a country's economy is growing. Large bubbles mean rapid growth.| |Code|Projection|Uses "Eckert3" to display the Earth on a flat surface.| |Code|Bubbles|Different sizes and colours represent various data points.| |Code|Interactivity|Tooltips show the name of the country when hovered over.| |Code|Style|Maps are styled with bubble layers for visual data representation and graticules for geographical context.| ##### Bar Chart |Type|Feature|Description| |-----|-----------|-----------| |Style|Bars|Show rank the top 10 countries respect the each indicator| |style|Color|Uses the same colours as the map so it's easy to see changes. | |style|Horizonel bars|Makes it easier to recognize and saves space on the dashboard.| |Code|Size|The chart is set to be 1000 pixels wide and 250 pixels tall.| |Code|Title| It dynamically displays the title based on the selected indicator and year.| |Code|Bars| The chart uses horizontal bars to represent the data, with the length indicating the value.| |Code|Colors| Bars change colour if they match a certain condition (like being the user's country).| |Code|Sorting| Countries are sorted by the value of the indicator, showing the top 10.| ##### Color Utilization in Map and Bar-Chart |Indicator|Main Color|Secondary Color| |---|---|---|---| |Total Population Map| Azure Blue |Pastel Red | |GDP in USD Map|Vivid Orange | Fresh Green | |GDP per Capita|Medium Turquoise | Light Green Cyan | |Population Growth|Teal Green |Soft Orange| |GDP Growth|Plum Purple|Mustard Yellow| ***Note: When a country name is selected inside the map and it's also on the bar chart, it will change to a second colour code to stand out.*** ##### TreeMap |Type|Feature|Description| |-----|-----------|-----------| |Style|Colors|Mulit colour has been used since that gives easy observation ability for the reader.| |Style|Rectangular|Countries as coloured rectangles proportionate to a specific indicator's value.| |Code|Path|It creates hierarchy paths for countries using their codes, replacing periods with slashes.| |Code|Label|Displays the last part of the country code as the visible label on the treemap.| |Code|Grouping|Uses the first part of the country code to group rectangles and assign colour schemes.| |Code|Value|Sets the area size of each rectangle according to the data value of the indicator.| |Code|Title| Provides a hover-over text with the indicator's title, country name, and value formatted as readable text.| |Code|Dimensions|The treemap is created with a width of 1000 pixels and a height of 500 pixels.| #### Observations **People**: The graph shows significant **population concentration** in Asia, particularly in the East, South, and Southeast regions, starting from 1973. There are larger circles there, indicating a higher number of people compared to other parts of the world. In terms of **Population Growth**, it is noticeable that growth continues in Asia. **India surpassed China** in total population numbers in 2022, taking the top spot, which China had held since 1973. Europe shows a **stagnation in population growth** compared to other regions. Conversely, African countries have experienced a **sharp and steady increase** in both total population and growth rates. **Wealth**: The map demonstrates the **dominance of the USA** in GDP, maintaining the number one position throughout the time range displayed. In the 1970s, Europe and Japan had sizable GDPs compared to the rest of the world. However, post-1992, there was a **rapid increase in GDP** in Asian countries, with China showing exceptional growth. **Wealth per Person**: The GDP per capita indicator reveals drastic changes in wealth distribution from 1990 to 2022. Initially, European countries, North America, Australia, and New Zealand had higher numbers than other countries, except for smaller nations like Brunei and Japan. However, this changed dramatically as more Asian countries, especially **Singapore and Qatar**, improved their GDP per capita at a much faster pace. **Growth**: Looking at **population growth rates**, African countries and some in South America show **significant increases**. In contrast, European countries have much more **stagnant growth rates**. Furthermore, from the perspective of GDP growth rate, African and Asian countries show **high spikes in growth rates** compared to their European and North American counterparts. Many Asian countries have managed to maintain a **higher GDP growth rate** over the last few years up to 2022, more consistently than others worldwide. Additionally, details like the top 10 countries for each indicator are provided under the **bar chart** to give more in-depth information to the reader. The **treemap** highlights the disparities among countries concerning these indicators, giving users a quick understanding of the differences.2f:T59e,{ // Prepare the data const topCountriesByGDP = Array.from( new Map( final .filter((d) => !isNaN(+d.gdp)) .sort((a, b) => d3.descending(+a.gdp, +b.gdp)) .map((d) => [d.country, d]) ).values() ) .slice(0, 10) .map((d) => d.country); const dataByCountry = d3 .groups( final, (d) => d.country, (d) => d.year ) .filter(([country]) => topCountriesByGDP.includes(country)) .map(([country, years]) => { return { country, years: years.map(([year, [data]]) => ({ year, gdp: +data.gdp })) }; }); // Create the traces for the plot const traces = dataByCountry.map(({ country, years }) => ({ type: "scatter", mode: "lines", name: country, x: years.map((d) => d.year), y: years.map((d) => d.gdp), text: years.map((d) => `GDP: ${d.gdp.toLocaleString()}`) })); // Define the layout for the plot const layout = { title: "Top 10 Countries by GDP Over Time", xaxis: { title: "Year", type: "date" }, yaxis: { title: "GDP (current US$)", autorange: true }, hovermode: "closest" }; // Creating a div container for the Plotly plot const div = html`

`; // Rendering the plot in the div container Plotly.newPlot(div, traces, layout); // Returning the div as the cell's DOM element return div; }30:T66e,**Chart Description:** - The chart shows the GDP (Gross Domestic Product) trends of the top 10 countries from 1980 to after 2020. - Each line represents a different country's GDP over time. - Countries like the United States and China show a significant increase in GDP, especially in recent years. - Other countries like Brazil, France, and India also display growth, but at a more moderate pace. - The lines cross at various points, indicating changes in their economic positions relative to each other. **Code and Technology Explanation:** - The chart is generated using `Plotly`, a plotting library that creates interactive charts. - `d3` is used for data manipulation, such as filtering and sorting the GDP data. - JavaScript is used to filter out non-numerical values and sort countries based on their GDP. - A `Map` object is utilized to get unique country entries and then sliced to the top 10 countries by GDP. - `d3.groups` is used to organize the data by country and year. - The layout and styling of the chart are defined using `Plotly`'s layout configuration. - Hover interactions are enabled to display GDP data for specific years when a user moves the cursor over a line. **Appearance and Style Perspective:** - The chart uses a line graph format, which is ideal for showing changes over time. - Different colors are used for each country's line, making it easy to distinguish between them. - The chart has a clear title and labeled axes, with the X-axis representing the year and the Y-axis showing the GDP in current US dollars. - The interactive nature of the chart allows for a more detailed exploration of the data on hover.31:Tf22,Trend = { const Plotly = await require("https://cdn.plot.ly/plotly-latest.min.js"); // Helper function to create checkbox inputs const createCheckbox = (name, checked) => { const label = document.createElement("label"); label.innerText = name; const checkbox = document.createElement("input"); checkbox.type = "checkbox"; checkbox.checked = checked; checkbox.onchange = updateChart; label.appendChild(checkbox); return label; }; // Create country selection dropdowns and attribute checkboxes const countrySelections = ["USA", "IND", "DEU", "GBR"]; const attributeSelections = [ "gdp", "population", "populationgrowth", "gdpgrowth", "gdppercapitappp" ]; const countrySelectElements = countrySelections.map((country) => { const select = document.createElement("select"); final.forEach((d) => { if (!select.querySelector(`option[value="${d.countrycode}"]`)) { const option = new Option( d.country, d.countrycode, country === d.countrycode, country === d.countrycode ); select.appendChild(option); } }); select.onchange = updateChart; return select; }); const attributeCheckboxes = attributeSelections.map((attribute) => createCheckbox(attribute, true) ); // Create year range input const yearRangeInput = document.createElement("input"); yearRangeInput.type = "range"; yearRangeInput.min = 1973; yearRangeInput.max = 2023; yearRangeInput.value = 1973; yearRangeInput.step = 1; yearRangeInput.oninput = updateChart; // Zoom and pan settings const zoomSettings = { responsive: true, scrollZoom: true // Enable scroll zoom }; // Chart container const chartContainer = document.createElement("div"); chartContainer.style.width = "100%"; chartContainer.style.height = "600px"; // Function to update the chart function updateChart() { const selectedCountries = countrySelectElements.map( (select) => select.value ); const selectedAttributes = attributeCheckboxes .map((checkbox) => checkbox.querySelector("input").checked ? checkbox.innerText : null ) .filter(Boolean); const selectedYear = yearRangeInput.value; const traces = []; final .filter( (d) => selectedCountries.includes(d.countrycode) && d.year >= selectedYear ) .forEach((d) => { selectedAttributes.forEach((attribute) => { const trace = traces.find( (trace) => trace.name === `${d.country} - ${attribute}` ); if (trace) { trace.x.push(d.year); trace.y.push(d[attribute]); } else { traces.push({ x: [d.year], y: [d[attribute]], type: "scatter", mode: "lines", name: `${d.country} - ${attribute}` }); } }); }); const layout = { title: `Attribute Trends for ${selectedCountries.join(", ")} (1973-2023)`, xaxis: { title: "Year", autorange: true }, yaxis: { title: "Value", autorange: true }, margin: { l: 50, r: 50, b: 50, t: 50, pad: 4 }, hovermode: "closest" }; Plotly.newPlot(chartContainer, traces, layout, zoomSettings); } // Initial chart rendering updateChart(); // Assemble the UI const uiContainer = document.createElement("div"); countrySelectElements.forEach((select) => uiContainer.appendChild(select)); attributeCheckboxes.forEach((checkbox) => uiContainer.appendChild(checkbox)); uiContainer.appendChild(yearRangeInput); // Append the UI and chart container to the output const container = document.createElement("div"); container.appendChild(uiContainer); container.appendChild(chartContainer); return container; }32:T720,|Code and Technology Explanation| |---| |The chart is created using Plotly, a JavaScript library, which allows for interactive and complex visualizations.| |The JavaScript code sets up interactive controls like checkboxes for selecting attributes to display and dropdowns for choosing countries.| |The year range is adjustable via a slider, allowing the viewer to focus on specific timeframes.| |A zoom feature is enabled, permitting users to zoom in and out for a detailed or broader view of the data trends.| |Plotly dynamically updates the chart based on user interactions, providing a responsive experience.| |The style of the chart is designed to be clear and informative, with the ability to hover over points for detailed data values.| ##### Observation - The default view of the line chart generates the data from 4 countries (USA, UK, Germany and India) on each attribute to demonstrate how this chart can be used. - The chart compares the GDP, population, population growth, GDP growth, and GDP per capita PPP (Purchasing Power Parity) trends for the USA, India, Germany (DEU), and the UK (GBR) from 1973 to 2023. - Each country's trend is indicated by a different line, with unique colours and symbols for easy identification. - The lines show how these attributes have changed over time, with the USA's GDP rising significantly, India's population growth being notable, and Germany and the UK showing more moderate trends. ##### Aim the interactive chart The main consideration is given for building this interactive chart for setting up a user-friendly interface that interacts with the plotted data, enhancing the usability of the chart for analysis by the reader and comparing different countries as they wish to get a better idea of each country and their trends in terms of the people, wealth and growth.33:[{"id":"1d80b2975964ef287c06bbe40855acb4afc467d9f9079086b13dbd9d5e89078aef13925bdf5eefd446758d50adc7c4c9faf949ffd43b1c7951046a61cb22f0ec","href":"https://static.observableusercontent.com/files/1d80b2975964ef287c06bbe40855acb4afc467d9f9079086b13dbd9d5e89078aef13925bdf5eefd446758d50adc7c4c9faf949ffd43b1c7951046a61cb22f0ec","name":"final@1.csv","type":"text/csv","lastModified":1711341732605.299,"size":741685},{"id":"890df102d43820c396d49d31a6b09e0d868ff9a9f39d04f3d925e897785eeb9d6b193b8d693a405de0cb8ae9b98f8559f532eda9b4919201976d91b31820639f","href":"https://static.observableusercontent.com/files/890df102d43820c396d49d31a6b09e0d868ff9a9f39d04f3d925e897785eeb9d6b193b8d693a405de0cb8ae9b98f8559f532eda9b4919201976d91b31820639f","name":"world.json","type":"application/json","lastModified":1711341732605.299,"size":254454}] 2b:{"id":"fdcf56eb7ab12673","slug":null,"title":"People | Wealth | Growth","thumbnail":"1d459f8b848d8c27f61b619cc98d64aac2611a581e16eb4a91c791f9fd7fa5ea","access_level":"public","create_time":"$D2024-03-25T04:42:12.605Z","update_time":"$D2024-03-30T17:46:37.719Z","view_time":null,"first_public_time":"$D2024-03-25T04:42:12.605Z","has_unpublished_edits":null,"fork":{"id":"222ed3d6800a439c","slug":null,"title":"People | Wealth | Growth","owner":{"id":"d4f4f094fddec257","login":"temperature-population-gdp","name":"Temperature Population GDP"}},"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":769,"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"},{"type":"team","id":"d4f4f094fddec257","login":"temperature-population-gdp","name":"Temperature Population GDP","avatar_url":"https://avatars-next.observableusercontent.com/16b1335db2a59f9136df9bf90561fbf61b8240311697e4a8fd032fa6b6d1f5e7","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"People | Wealth | Growth","cells":[{"id":240,"value":"# People | Wealth | Growth\n## What makes a country wealthy? \n- How do the population size and growth affect the GDP and its growth? \n- How do different countries compare in terms of these indicators?\n- The content reveals the patterns and relationships between population distribution, GDP levels, and GDP growth across the world.\n###### Utilized: The World Bank - Databank - World Development Indicators Database (1973 - 2022)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":243,"value":"$2d","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":444,"value":"final","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":437,"value":"### Recognizing the way people, wealth, and growth spread across the world.\n#### Step 1: Let's explore the World","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":473,"value":"*** The following three interactive maps act like time-travel stories, showing people and growth.***\n\nUse the **dropdown** and **slider** on the dashboard to see changes in different attributes on population, wealth, and growth on the maps.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":52,"value":"// Drop-Down Menu Configuration\nviewof form = Inputs.form(\n [\n Inputs.range([1973, 2022], {\n label: \"Year\", //\n step: 1,\n value: 2022, // \n title: \"Select a year\" // Tooltip for additional guidance\n }),\n Inputs.select(\n new Map([\n [\"Total Population\", \"population\"],\n [\"GDP (current US$)\", \"gdp\"],\n [\"GDP per capita, PPP (current international $)\", \"gdppercapitappp\"],\n [\"Population growth (annual %)\", \"populationgrowth\"],\n [\"GDP growth (annual %)\", \"gdpgrowth\"]\n ]),\n {\n label: \"Indicator\", // Clear label for accessibility\n title: \"Choose an Indicator\" // Tooltip for additional guidance\n }\n )\n ],\n {\n template: (inputs) => htl.html`

\n ${inputs}\n

` // Layout designed for clarity and spacing\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"viewof map = bertin.draw({\n params: {\n projection: \"Eckert3\",\n width: 800\n },\n layers: [\n {\n type: \"bubble\",\n geojson: geodata,\n viewof: true,\n values: indicator,\n fill: (feature) =>\n feature.properties[indicator] < 0\n ? accessor.get(indicator).col2\n : accessor.get(indicator).col,\n fill: accessor.get(indicator).col,\n k: 30,\n fixmax: accessor.get(indicator).max,\n size: [accessor.get(indicator).min, accessor.get(indicator).max],\n leg_x: 50,\n leg_y: 250,\n leg_round: -2,\n leg_title: `${accessor.get(indicator).title} in ${year}`,\n tooltip: \"$NAMEen\"\n },\n { geojson: geodata, fill: \"white\", fillOpacity: 0.3, stroke: \"none\" },\n { type: \"graticule\" },\n { type: \"outline\" }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":704,"value":"// Drop-Down Menu Configuration\nviewof form1 = Inputs.form(\n [\n Inputs.range([1973, 2022], {\n label: \"Year\", //\n step: 1,\n value: 2022, //\n title: \"Select a year\" // Tooltip for additional guidance\n }),\n Inputs.select(\n new Map([\n [\"Total Population\", \"population\"],\n [\"GDP (current US$)\", \"gdp\"],\n [\"GDP per capita, PPP (current international $)\", \"gdppercapitappp\"],\n [\"Population growth (annual %)\", \"populationgrowth\"],\n [\"GDP growth (annual %)\", \"gdpgrowth\"]\n ]),\n {\n label: \"Indicator\", // Clear label for accessibility\n title: \"Choose an Indicator\" // Tooltip for additional guidance\n }\n )\n ],\n {\n template: (inputs) => htl.html`

\n ${inputs}\n

` // Layout designed for clarity and spacing\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"chart2 = Plot.plot({\n width: 1000,\n height: 250,\n title: `Top 10 Counties in the World by ${\n accessor1.get(indicator1).title\n } on ${form1[0]}`,\n marks: [\n Plot.barX(finalyear1, {\n x: indicator1,\n y: \"countrycode\",\n fill: (d) =>\n d.countrycode == map.ISO3\n ? accessor1.get(indicator1).col2\n : accessor1.get(indicator1).col,\n sort: { y: \"x\", reverse: true, limit: 10 },\n // Use the same tooltip mechanism as in viewof map\n hover: (d, n) => {\n // Access the reactive map using viewof map\n const countryName = viewof map.value.get(n.data.countrycode).NAMEen;\n const indicatorValue = n.value;\n return `${countryName}: ${indicatorValue.toLocaleString()}`;\n }\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":708,"value":"// Drop-Down Menu Configuration\nviewof form2 = Inputs.form(\n [\n Inputs.range([1973, 2022], {\n label: \"Year\", //\n step: 1,\n value: 2022, //\n title: \"Select a year\" // Tooltip for additional guidance\n }),\n Inputs.select(\n new Map([\n [\"Total Population\", \"population\"],\n [\"GDP (current US$)\", \"gdp\"],\n [\"GDP per capita, PPP (current international $)\", \"gdppercapitappp\"],\n [\"Population growth (annual %)\", \"populationgrowth\"],\n [\"GDP growth (annual %)\", \"gdpgrowth\"]\n ]),\n {\n label: \"Indicator\", // Clear label for accessibility\n title: \"Choose an Indicator\" // Tooltip for additional guidance\n }\n )\n ],\n {\n template: (inputs) => htl.html`

\n ${inputs}\n

` // Layout designed for clarity and spacing\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":543,"value":"### World from the Tree Map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":261,"value":"TreeMap = Treemap(finalyear2, {\n path: (d) => d.countrycode.replaceAll(\".\", \"/\"), // 'countrycode' has periods to replace\n label: (d) => d.countrycode.split(\".\").pop(), // The last part of the 'countrycode' after splitting by period\n group: (d) => d.countrycode.split(\".\")[0], // The second part of the 'countrycode' for grouping colors\n value: (d) => d[indicator2], // The value used for the area of each rectangle, based on the indicator\n title: (d, n) =>\n [\n accessor2.get(indicator2).title,\n n.data.country,\n n.value.toLocaleString()\n ].join(\"\\n\"), // Hover text showing title of indicator countrycode and formatted value\n width: 1000,\n height: 500\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":469,"value":"$2e","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":313,"value":"#### Step 2 - Analyzing the Relationships","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":346,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":586,"value":"$30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":588,"value":"#### Step 3 - Learn by Yourself: Understanding How Countries Differ and How Various Economic Indicators Relate to Each Other","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":373,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":570,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":434,"value":"### Reference\n\n- Plotly Technologies Inc. (2024). Plotly.js. https://cdn.plot.ly/plotly-latest.min.js\n- Color Oracle. (2020). Color Oracle. https://colororacle.org/\n- Munzner, T. (2014). Visualization analysis and design (1st ed.). A K Peters/CRC Press. https://doi.org/10.1201/b17511\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":0,"value":"### Data Import","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"final = FileAttachment(\"final@1.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"world = FileAttachment(\"world.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"### Bertin Menu Configuration","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":26,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":30,"value":"year = form[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":728,"value":"year1 = form1[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":732,"value":"year2 = form2[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"indicator = form[1]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":736,"value":"indicator1 = form1[1]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":740,"value":"indicator2 = form2[1]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"accessor = new Map([\n [\n \"population\",\n {\n col: \"#4a90e2\",\n col2: \"#ff6b6b\",\n max: d3.max(final.map((d) => +d.population)),\n title: \"Population\"\n }\n ],\n [\n \"gdp\",\n {\n col: \"#f5a623\",\n col2: \"#7ed321\",\n max: d3.max(final.map((d) => +d.gdp)),\n title: \"GDP - USD\"\n }\n ],\n [\n \"gdppercapitappp\",\n {\n col: \"#50e3c2\",\n col2: \"#b8a9c9\",\n max: d3.max(final.map((d) => +d.gdppercapitappp)),\n title: \"GDP per Capita - USD\"\n }\n ],\n [\n \"populationgrowth\",\n {\n col: \"#008080\",\n col2: \" #FFA07A\",\n max: d3.max(final.map((d) => +d.populationgrowth)),\n title: \"Population Growth %\"\n }\n ],\n [\n \"gdpgrowth\",\n {\n col: \" #8E4585\",\n col2: \"#FFD700\",\n max: d3.max(final.map((d) => +d.gdpgrowth)),\n title: \"GDP growth %\"\n }\n ]\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":721,"value":"accessor1 = new Map([\n [\n \"population\",\n {\n col: \"#4a90e2\",\n col2: \"#ff6b6b\",\n max: d3.max(final.map((d) => +d.population)),\n title: \"Population\"\n }\n ],\n [\n \"gdp\",\n {\n col: \"#f5a623\",\n col2: \"#7ed321\",\n max: d3.max(final.map((d) => +d.gdp)),\n title: \"GDP - USD\"\n }\n ],\n [\n \"gdppercapitappp\",\n {\n col: \"#50e3c2\",\n col2: \"#b8a9c9\",\n max: d3.max(final.map((d) => +d.gdppercapitappp)),\n title: \"GDP per Capita - USD\"\n }\n ],\n [\n \"populationgrowth\",\n {\n col: \"#008080\",\n col2: \" #FFA07A\",\n max: d3.max(final.map((d) => +d.populationgrowth)),\n title: \"Population Growth %\"\n }\n ],\n [\n \"gdpgrowth\",\n {\n col: \" #8E4585\",\n col2: \"#FFD700\",\n max: d3.max(final.map((d) => +d.gdpgrowth)),\n title: \"GDP growth %\"\n }\n ]\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":722,"value":"accessor2 = new Map([\n [\n \"population\",\n {\n col: \"#4a90e2\",\n col2: \"#ff6b6b\",\n max: d3.max(final.map((d) => +d.population)),\n title: \"Population\"\n }\n ],\n [\n \"gdp\",\n {\n col: \"#f5a623\",\n col2: \"#7ed321\",\n max: d3.max(final.map((d) => +d.gdp)),\n title: \"GDP - USD\"\n }\n ],\n [\n \"gdppercapitappp\",\n {\n col: \"#50e3c2\",\n col2: \"#b8a9c9\",\n max: d3.max(final.map((d) => +d.gdppercapitappp)),\n title: \"GDP per Capita - USD\"\n }\n ],\n [\n \"populationgrowth\",\n {\n col: \"#008080\",\n col2: \" #FFA07A\",\n max: d3.max(final.map((d) => +d.populationgrowth)),\n title: \"Population Growth %\"\n }\n ],\n [\n \"gdpgrowth\",\n {\n col: \" #8E4585\",\n col2: \"#FFD700\",\n max: d3.max(final.map((d) => +d.gdpgrowth)),\n title: \"GDP growth %\"\n }\n ]\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"### Embedding Bertin with Map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":512,"value":"import { Plot } from \"@observablehq/plot\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"bertin = require(\"bertin@1.5.5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"finalyear = final.filter((d) => d.year == form[0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":693,"value":"finalyear1 = final.filter((d) => d.year == form1[0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":694,"value":"finalyear2 = final.filter((d) => d.year == form2[0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"geodata = bertin.merge(world, \"ISO3\", finalyear, \"countrycode\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":712,"value":"geodata1 = bertin.merge(world, \"ISO3\", finalyear1, \"countrycode\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":714,"value":"geodata2 = bertin.merge(world, \"ISO3\", finalyear2, \"countrycode\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"import {Treemap} from \"@d3/treemap\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"transformedData = d3.groups(final, d => d.countrycode).map(([countrycode, values]) => {\n values.sort((a, b) => d3.ascending(a.year, b.year));\n return {countrycode, values};\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"Plotly = require ('https://cdn.plot.ly/plotly-latest.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2c:"$2b:body"