Data Reading & Shaping
This interactive scatterplot uses D3 v4 to visualize changes in global health and wealth over time. It reads nation-by-nation data for income per capita, population, and life expectancy from a JSON file, then shapes it for each year. A button increments the displayed year, updating the circles’ positions and sizes. The x-axis uses a log scale for income, the y-axis a linear scale for life expectancy, and circle area encodes population. Color maps each country to its geographic region via an ordinal scale. Animated transitions (implied by the update pattern) redraw the bubbles as the year advances, with a tooltip for details. The SVG chart includes labeled axes and a fixed color legend derived from region data. The dataset was loaded with d3.v4.
---
Please write your concise description here:
**Note**: Do not include any markdown formatting in the description, such as #hashtags or asterisks. Write as a plain-text description, to be displayed in a gallery. Keep it under 180 words.
**Note 2**: make sure to include the following in the description:
- the source of the data
- how the data is loaded
- the number of rows in the dataset
- the type of data (categorical or numerical or temporal) in each column
- any data shaping that is done
- the visualization type (bar, line, pie, scatterplot, etc.)
- the mapping of visual encodings to columns
- what happens when the button is clicked
The data is from a gist by author ElaineYu. This can be an excellent submission to the "Data Reading & Shaping" gallery if it weren't for the missing data and the broken animation. Please focus on these two issues (no text or visual improvements needed).
Also, be concise. Focus on factual description.
**IMPORTANT: Be careful!** Provide **either** the code **or** a concise description, not both. The result should be entirely in JSON format with no extra whitespace or punctuation. Ensure valid JSON. Must include keys: title, author, source, license, d3Version, originalCode, renderedExample, demonstrating, method, explanation, runnable, code. Ensure code is formatted as a JSON string with escaped characters.
For the renderedExample key, provide URL. For the d3Version key, provide d3.v4. For the "rendering" key in metadata use: "svg, animation".
For code key, include a runnable HTML snippet, with the complete content of index.html.
The title should be exactly the one in the file.
A "short description" for the gallery should include the following
1. a catchy lead
2. an explanation of data and viz
3. a link to the code, with text "code"
4. mention about the way the data was reshaped.
5. acknowledgement: "Visualization type: bubble chart. Data: Gapminder."
Also mention the known "counter" that shows the currently displayed year as a
counter on the interface.
Add the following phrase if possible: "written in D3.js".
Keep the text between 50 and 100 words. Use plain text. Do not include Markdown formatting or code. Do not include any introductory or concluding phrases. Do not surround the text in quotes.
This example shows how to read and shape tabular data with D3.js before rendering it as an animated bubble chart. Each bubble is a nation, positioned by income and life expectancy, with size encoding population. A button advances the year, updating the visualization through D3’s data join. The bubbles are colored by region, and a custom tooltip provides details on hover. The code demonstrates how to load, transform, and bind multidimensional data to SVG elements, while animation highlights how the data changes over time.