Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Aditya - Reusing D3 chart as React components

Public visualization

Aditya - Reusing D3 chart as React components

0 stars1🌍 Public
AAditya Bhattacharya
Last edited May 5, 2022
Created on May 5, 2022

This example demonstrates how to reuse a D3 chart as a React component, displaying a connected scatter plot of time-series data. The visualization renders a line with circular points on an SVG canvas using d3.scaleTime, d3.scaleLinear, d3.line, and d3.axisBottom/axisLeft. It reads data from a CSV file hosted on GitHub, parsing dates with d3.timeParse. The React component returns a div that D3 selects, appends an SVG to, and populates with axes, a line, and circles, showing a practical pattern for integrating D3 into a React application.

AI-generated description

A program that shows the top 10 most populous countries as a pathetic bar chart with no axes.

Data: United Nations World Population Prospects 2019.

Comments

Sign in to join the discussion.

MIT Licensed