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

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of 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.

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
86% match
Loading thumbnail…

Fork of Line Chart

This visualization presents a line chart of population over time for different countries, with the year on the x-axis and current population on the y-axis. The code uses d3.csv to load population data from a GitHub gist, then applies d3.scaleTime and d3.scaleLinear to map the data, and d3.line to generate the path. The SVG rendering includes axis labels and a title, with the line path styled in red via CSS. The example demonstrates a straightforward data-driven chart using D3 v5.

0057SatvikDamera
83% match
Loading thumbnail…

Fork of Fork of Axes with React & D3-achala

This example displays a horizontal bar chart of population data for five countries, including China, India, and the United States, using React and D3. The chart renders as SVG with axes generated by `scaleBand` and `scaleLinear`, showing tick marks and country labels. It loads data from a CSV file using `d3.csv`, but ultimately displays hardcoded values, including a negative population for Pakistan. The visualization uses React hooks like `useState` and `useEffect` to manage the loading state and render the chart.

AAchala237
82% match
Loading thumbnail…

Fork of Fork of Activity6_q1.1

This visualization displays the population of ten countries in the year 2000 as a horizontal bar chart using SVG rendering in React. The code employs d3.scaleBand and d3.scaleLinear from the D3 v5 library to map countries to the y-axis and population values to the x-axis, with formatted tick labels converting numbers to billions. Data is loaded from a CSV file via d3.csv, and the bars include tooltips showing the population value. The chart also features custom axis components and a Poppins font from Google Fonts.

Aabjalshaik02@gmail.com
82% match
Loading thumbnail…

Fork of Activity6_Task1

This is a horizontal bar chart of population data for ten countries in the year 2000, rendered as SVG via React. The visualization uses React hooks (useState, useEffect) and D3 v5 scales including d3.scaleBand and d3.scaleLinear, with components for axes and marks. Data is loaded as CSV from a GitHub URL using d3.csv, with each bar’s width mapped to population via d3.max and tooltips formatted using d3.format. Axes are custom-built with React components, and the chart includes a labeled x-axis showing population in billions.

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

Fork of Rendering data with React & D3

This example shows a horizontal bar chart of the top ten countries by population in 2020, using a combination of React and D3. The chart displays population values as proportional bar widths, with axis ticks and country labels generated from the loaded CSV data. React manages the component state and lifecycle through hooks like `useState` and `useEffect`, while D3’s `scaleBand`, `scaleLinear`, and `max` functions handle scaling and data processing. The visualization renders as SVG, with bars and text elements created declaratively in JSX.

Kkosakase
81% match
Loading thumbnail…

Fork of HTML Starter

A horizontal bar chart displays population figures for ten countries in the year 2000, using yellow bars with green tick labels on a red axis grid. Built with React and D3 v5, the visualization loads CSV data via `d3.csv`, scales values with `d3.scaleBand` and `d3.scaleLinear`, and renders SVG rectangles through reusable components. Axis formatting uses `d3.format` to abbreviate large numbers, and tooltips appear via SVG `<title>` elements.

Ssahithya.voleti@gmail.com
81% match