React D3 Starter

A minimal React + D3 starter for building interactive data visualizations.

Files

• index.html — page shell and import map (React + D3 from a CDN).
• index.jsx — mounts the <App /> component.
• App.jsx — loads data.csv and renders the visualization.
• viz.js — D3 render entry point.
• renderCircles.js — draws the circles.
• useContainerDimensions.js — tracks the container size.
• data.csv — sample data.
• styles.css — page styles.

Getting started

Edit App.jsx to change what gets rendered; the preview updates live as you type.

Visualization Ideas

Project brief: "Population Analysis" (no detailed brief was provided). The ideas below frame the project as an exploration of how population size, age structure, mortality, fertility and urbanization differ across countries and regions and change from 1960 onward. They extend the current scatterplot (fertility vs. life expectancy, sized by population, colored by region, with a year slider). All fields come from data/un_wpp_2024.csv.

1. Animated Gapminder Playback

   • Main question: How have countries moved through the fertility/life-expectancy space over time?
   • Data fields: location, region, year, fertility_rate, life_expectancy, total_population.
   • Visual encoding: The existing scatter, with a play button that steps the year, and circle position, area and color transitioning smoothly.
   • Interaction/annotation: Play/pause, speed control, and a large faded year label in the background.
   • Implementation note: Add a setInterval in App.jsx that advances year, and add .transition() on the circles in renderScatter.js.

2. Country Trails

   • Main question: What path did a selected country take over the decades?
   • Data fields: location, year, fertility_rate, life_expectancy.
   • Visual encoding: A connected-scatter line through yearly positions, with a dot at each year and a color gradient by time.
   • Interaction/annotation: Click circles to pin trails, and label decade years.
   • Implementation note: Group the full data by location, then draw a d3.line() for the pinned countries. Keep all years in state.

3. Regional Population Stacked Area

   • Main question: How has each region's share of the population changed?
   • Data fields: region, year, total_population.
   • Visual encoding: A stacked area chart (d3.stack) with the x-axis as year and color by region, with an option to normalize to 100%.
   • Interaction/annotation: A toggle between absolute and share, and a hover that shows the region values for a year.
   • Implementation note: Use d3.rollup to sum by year and region.

4. Population Pyramid by Sex

   • Main question: How balanced are the male and female populations of a country?
   • Data fields: pop_male, pop_female, location, year.
   • Visual encoding: A back-to-back horizontal bar pair for the selected country and year. Because the data has no age bands, this is a two-bar comparison, extended to a small multiple across years.
   • Interaction/annotation: A country dropdown tied to the year slider.
   • Implementation note: Mirror two linear scales around a center axis.

5. Sex Ratio World Map-Free Dot Strip

   • Main question: Which countries have the most skewed male-to-female ratios?
   • Data fields: pop_male, pop_female, region, location.
   • Visual encoding: A strip plot of males per 100 females (derived), with a reference line at 100, one row per region, and beeswarm jitter.
   • Interaction/annotation: Label the outliers, and show a tooltip.
   • Implementation note: Use d3.forceSimulation with a collide force for the beeswarm layout.

6. Median Age Ridgeline by Region

   • Main question: How is the distribution of national median ages shifting?
   • Data fields: median_age, region, year.
   • Visual encoding: Stacked density curves, one per region, using a kernel density estimate.
   • Interaction/annotation: Slider-driven year, with ghost curves for 1960.
   • Implementation note: Filter out null median_age values (they are empty in early rows), and use d3.contourDensity or a custom KDE.

7. Birth vs. Death Rate Natural Increase Plot

   • Main question: Which countries are growing or shrinking naturally?
   • Data fields: birth_rate, death_rate, location, region, total_population.
   • Visual encoding: A scatter with a diagonal y = x line where growth is zero, with the area between the line and each point implying growth. Color by region.
   • Interaction/annotation: Label the shaded regions "growing" and "shrinking".
   • Implementation note: Share the same domain on both axes so the diagonal is truly 45 degrees.

8. Demographic Transition Path

   • Main question: Do countries follow the classic path of falling death rates, then falling birth rates?
   • Data fields: birth_rate, death_rate, year, location.
   • Visual encoding: A connected scatter of birth rate (x) against death rate (y) for a few chosen countries, with a color ramp for year.
   • Interaction/annotation: A multi-select for countries, and arrows at the line ends.
   • Implementation note: Use d3.line().curve(d3.curveCatmullRom).

9. Urbanization vs. Life Expectancy

   • Main question: Is greater urbanization associated with longer lives?
   • Data fields: urban_pct, life_expectancy, region, total_population.
   • Visual encoding: A scatter with a LOESS or linear trend line per region, with size encoding population.
   • Interaction/annotation: Toggle the trend lines on and off, and brush to list the selected countries.
   • Implementation note: Compute the regression with a simple least squares helper, and add d3.brush.

10. Urban Share Slope Chart

    • Main question: Which countries urbanized fastest between two years?
    • Data fields: urban_pct, location, year.
    • Visual encoding: A slope chart with two vertical axes (start year and end year) and lines colored by change.
    • Interaction/annotation: Pick the start and end years, and highlight a line on hover.
    • Implementation note: Filter to the top N countries by population to limit clutter.

11. Life Expectancy Small Multiples by Subregion

    • Main question: How do the trajectories differ within each subregion?
    • Data fields: subregion, location, year, life_expectancy.
    • Visual encoding: A grid of small line charts with one thin line per country and the subregion median in bold.
    • Interaction/annotation: A shared y-axis, with hover highlighting a country across panels.
    • Implementation note: Use d3.group by subregion, and render one <g> per panel.

12. Life Expectancy Heatmap Over Time

    • Main question: Where and when did life expectancy leap or stall?
    • Data fields: location, year, life_expectancy, region.
    • Visual encoding: A heatmap with rows as countries (sorted by region and then value) and columns as years, using a sequential color scale.
    • Interaction/annotation: Hover for the exact value, and click a row to bring up the country detail.
    • Implementation note: Use canvas if there are many rows, and d3.scaleSequential(d3.interpolateViridis).

13. Fertility Rate Bump Chart

    • Main question: How has the fertility ranking of the most populous countries changed?
    • Data fields: location, year, fertility_rate, total_population.
    • Visual encoding: A bump chart of ranks across selected years, using the top 15 countries by population.
    • Interaction/annotation: Hover to highlight one country's line.
    • Implementation note: Compute ranks per year with d3.rank or by sorting.

14. Population Treemap

    • Main question: How is the world's population split by region, subregion and country?
    • Data fields: region, subregion, location, total_population, year.
    • Visual encoding: A treemap with area for population and color by region.
    • Interaction/annotation: Click to zoom into a region, and use the year slider to animate.
    • Implementation note: Build the hierarchy with d3.rollup or d3.hierarchy, and lay out with d3.treemap.

15. Population Growth Rate Diverging Bars

    • Main question: Which countries grew or shrank the most between two years?
    • Data fields: location, year, total_population.
    • Visual encoding: Horizontal diverging bars of percent change, with color for sign.
    • Interaction/annotation: Two year pickers, plus a top/bottom N control.
    • Implementation note: Compute the change per location from rows for the two years, and sort.

16. Fertility Distribution Histogram with Replacement Line

    • Main question: How many countries are below the replacement level of about 2.1?
    • Data fields: fertility_rate, year, region.
    • Visual encoding: A stacked histogram colored by region, with a vertical reference line at 2.1.
    • Interaction/annotation: Animate with the year slider, and annotate the count below replacement.
    • Implementation note: Fix the bin thresholds with d3.bin so the bars move consistently between years.

17. Parallel Coordinates Profile

    • Main question: What combinations of indicators characterize different countries?
    • Data fields: fertility_rate, life_expectancy, median_age, urban_pct, birth_rate, death_rate.
    • Visual encoding: Parallel axes with lines colored by region.
    • Interaction/annotation: Brushing on each axis to filter lines.
    • Implementation note: Use one scaleLinear per axis, and drop rows with missing values.

18. Correlation Matrix of Indicators

    • Main question: Which indicators move together, and has that changed over time?
    • Data fields: all numeric fields, including median_age, birth_rate, death_rate, life_expectancy, fertility_rate, urban_pct.
    • Visual encoding: A matrix of Pearson r with a diverging color scale and the value as text in each cell.
    • Interaction/annotation: Slider-driven year, and click a cell to open its scatter.
    • Implementation note: Compute pairwise correlations on complete rows only.

19. Linked Scatter and Detail Panel

    • Main question: What does a single country's full profile look like?
    • Data fields: location, year, total_population, life_expectancy, fertility_rate, urban_pct, median_age.
    • Visual encoding: The existing scatter plus a side panel of sparklines for the selected country, with a marker for the current year.
    • Interaction/annotation: Click a circle to select it, and highlight the selected country across all views.
    • Implementation note: Lift a selected state into App.jsx and pass it to the render functions.

20. Region Legend Filter with Small Population Bars

    • Main question: How do regions compare in the scatter, and how large is each one?
    • Data fields: region, total_population, fertility_rate, life_expectancy.
    • Visual encoding: An interactive legend whose items include a bar sized by regional population, with the scatter dimmed by region.
    • Interaction/annotation: Click a legend item to isolate that region, and shift-click to select several.
    • Implementation note: Keep a Set of active regions in state and change the circle opacity accordingly.