Skip to main content
SimilarExport ZIP
100%

Fork of React & D3 Starter

✓ Published0🌍 Public
Rrevanthdasari10@gmail.com
Last edited Mar 29, 2026
Created on Mar 29, 2026
Forked from React & D3 Starter

This example demonstrates population growth in India from 1960 to 2020 with a blue area chart and a three-pixel-wide line overlay. Built with React and D3 v7, the chart uses `d3.scaleLinear` for both axes and `d3.area` to generate the filled path. SVG rendering is used, with axes created via `d3.axisBottom` and `d3.axisLeft`, and standard D3 selectors append the visualization to the root element. The data is a small inline array of year-population pairs.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of React & D3 Starter

A line chart depicts China's population from 1950 to 2020, using five data points with a smooth monotone curve. The chart renders as SVG, built with React and D3 v7. It uses `d3.line`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to create the visualization, which includes labeled axes, a title, and tick formatting. The y-axis displays population values, while the x-axis shows years.

Rrevanthdasari10@gmail.com
87% match
Loading thumbnail…

Fork of React & D3 Starter

A pie chart displays population figures for China, India, the USA, Indonesia, and an aggregated "Others" category in millions. Built with React and D3 v7, the visualization uses `d3.pie()` and `d3.arc()` to generate SVG paths, with a categorical color scale from `d3.schemeTableau10`. A manually positioned SVG legend lists each country name with its corresponding population value. The chart renders entirely through direct DOM manipulation via `d3.select` within a React application.

Rrevanthdasari10@gmail.com
83% match
Loading thumbnail…

Fork of area chart

This example displays India’s population over time as a filled area chart. It loads CSV data from a GitHub gist and renders an SVG with D3 v7, using `d3.area`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft` to draw the path and labeled axes. The chart encodes years on the x-axis and population values on the y-axis, with a steelblue fill.

Nnaveen.dodda4321@gmail.com
83% match
Loading thumbnail…

Fork of Fork of React & D3 Starter

This example shows a reusable scatter plot built with React and D3.js, displaying country-level data with land area on the x-axis and population on the y-axis. The chart renders a single SVG with circles for data points, labeled axes for both scales, and a hardcoded x-axis label. The code defines a custom `scatterPlot` function that uses D3's `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` APIs, along with the `join` operator to create incremental SVG elements within a React environment.

Rrevanthdasari10@gmail.com
82% match
Loading thumbnail…

Fork of Activity 6

This example shows a horizontal bar chart of 2020 population estimates for 30 countries, using a React-based SVG rendering approach. The visualization ranks countries by population, with bars colored green and labeled axes showing country names and population values in billions. The code uses React components for layout, d3.js scaleBand and scaleLinear for positioning, and d3.csv to load the dataset from a GitHub-hosted CSV file. Tooltips provide formatted population values on hover, while the chart includes custom axis components and a Poppins font styling from Google Fonts.

Vvidyagangasani@my.unt.edu
82% match
Loading thumbnail…

Fork of React & D3 Starter

This example shows a world population map where individual countries are shaded with a blue sequential color scale, and hovering over a country reveals its name and population in millions via a tooltip. It renders a Natural Earth projection using `d3.geoPath` and `d3.geoNaturalEarth1`, with geographic data loaded from TopoJSON via `topojson.feature` and country names from a TSV file. The code uses `d3.scaleSequential` with `d3.interpolateBlues` to map population values to fill colors, and SVG paths for country boundaries.

Ppvvaishnavi93@gmail.com
81% match
Loading thumbnail…

Refactoring initial Gapminder Population Growth in React and D3

This example visualizes Gapminder population growth data, plotting total population against year for each country as circles with tooltips showing country names. Built with React and D3 v5, it uses `scaleLinear` for both axes, `scaleOrdinal` for color encoding, and `format` to abbreviate population labels. The SVG rendering includes custom `AxisBottom` and `AxisLeft` components that generate ticks, while `Marks` generates circles with D3’s `interpolateRainbow` color scheme. The data is loaded asynchronously from a CSV via `useData` and D3’s `csv` parser.

Llakalia@wpi.edu
81% match
Loading thumbnail…

Fork of Fork of Activity 7

This is a horizontal bar chart showing the population of 20 countries in 2020, rendered as SVG elements within a React application. The chart uses D3 version 5 scales (`d3.scaleBand` and `d3.scaleLinear`) to map country names and population values to positions and lengths. Data is loaded from a CSV file via a custom `useData` hook, with tick marks styled blue and a green fill for each bar. Tooltips display the formatted population value on hover.

MManideeprenikindi
81% match