Fork of React & D3 Starter

100%

Fork of React & D3 Starter

✓ Published0🌍 Public

Last edited Mar 28, 2026

Created on Mar 28, 2026

This example presents a reusable React-based scatter plot that visualizes the relationship between song duration and popularity from a CSV dataset. The visualization employs D3.js v7 for data processing, linear scaling, and axis generation, while React 19 manages the component structure. The code uses `d3.csv()` to load data, `d3.scaleLinear()` for coordinate mapping, and `d3.axisBottom()` and `d3.axisLeft()` to render axes. All elements are drawn as SVG circles with a steelblue fill, positioned using `cx` and `cy` attributes derived from the scaled data values.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Basic Scatter Plot with React & D3

A scatter plot visualizes the musical characteristics of Spotify's top songs from 2010 to 2019, positioning each track by its danceability and energy scores while sizing circles by popularity. A categorical color scale distinguishes genres, with a legend identifying the ten genre categories. The React app uses D3's `csv` loader to parse song attributes from a local CSV file, then leverages D3's `scaleLinear`, `axisBottom`, and `axisLeft` to construct the chart and its axes.

VVinayak Revankar

86% match

Loading thumbnail…

Fork of React & D3 Starter

This example shows a reusable scatter plot of monthly sales versus profit from a small CSV dataset. The chart renders as SVG circles on linear x- and y-axes, with labeled axes and a title. The code defines a `scatterPlot` function that takes data and scales as props, using `d3.csv` to load the data and `d3.axisBottom` and `d3.axisLeft` to draw the axes. Color is fixed to steelblue, and the plot is built within a React JSX file.

Ppvvaishnavi93@gmail.com

84% match

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of React & D3 Starter

This example shows a reusable scatter plot of study hours versus test scores, with seven data points plotted on a fixed 500×400 SVG canvas. The code uses D3 v7 to create linear scales for both axes, append circles with steelblue fill, and render axis ticks via `d3.axisBottom` and `d3.axisLeft`. It also adds text labels for both axes. The visualization is implemented as a plain JavaScript function called `scatterPlot(container, data)`, which appends the SVG dynamically, while the included React starter demonstrates D3 selection in a `useEffect` hook. The dataset is hardcoded inline.

SSanjayRamaSwamyAdla@my.unt.edu

84% match

Loading thumbnail…

Fork of React & D3 Starter

This example builds a reusable scatter plot comparing monthly Sales and Profit metrics from a CSV dataset. The chart displays eight data points as steelblue circles, with an x-axis for Sales and a y-axis for Profit, using a linear scale for both dimensions. The code leverages D3 v7’s `d3.csv` for data loading, `d3.scaleLinear` for scaling, and `d3.axisBottom`/`d3.axisLeft` for axes. A custom `scatterPlot` function encapsulates the chart logic, allowing flexible reuse with different data mappings and labels, rendered as an SVG.

Ppvvaishnavi93@gmail.com

83% match

Loading thumbnail…

Fork of Fork of Fork of ICE-6: Rendering Marks and Channels with React & D3

This example visualizes the top 20 songs from a Spotify dataset, encoding song tempo on the y-axis and duration on the x-axis with red bars. The React component loads CSV data via d3.csv, then uses d3.scaleBand and d3.scaleLinear to map values to SVG rectangles. Axis ticks are rendered manually with mapped text and line elements, while d3.max computes the domain for the linear scale. The chart uses React hooks (useState, useEffect) to manage async data fetching and conditional rendering for the loading state.

99176371431

83% match

Loading thumbnail…

Fork of React & D3 Starter

This example presents a small dashboard that loads a CSV dataset, displays summary statistics (approximate file size, row count, and column count), and renders a simple bar-chart-like SVG picture. The page uses D3’s `csvParse` to read the data from a GitHub Gist, then updates the HTML stat cards and draws rectangles with `d3.select`’s `.join` API. The SVG bars are based purely on row index, not on data values, making the visualization a generic shape demo. The code is plain JavaScript within an HTML file, using D3 v7.

Ppvvaishnavi93@gmail.com

82% match

Loading thumbnail…

Fork of React & D3 Starter

A simple scatter plot displays ten labeled points from a small CSV dataset, mapping x and y coordinates with linear scales. The visualization demonstrates a modular React and D3 integration where React manages the SVG container and D3 handles the rendering logic. The `viz.js` module uses `d3.scaleLinear` and `d3.extent` to compute scales, while `axes.js` employs `d3.axisLeft` and `d3.axisBottom` for chart axes. Data flows through a custom `useData` hook that loads and parses the CSV with `d3.csv`. The code separates concerns across files, making it a practical starting template for scalable projects.

Tteissierducros

82% match

Loading thumbnail…

Fork of Fork of Fork of Fork of React & D3 Starter

This example shows a reusable scatter plot of study hours versus exam scores, using a compact D3 v7 script embedded in an HTML page. It displays seven data points as steelblue circles on an SVG canvas, with linear scales mapping hours to x-positions and scores to y-positions, plus labeled axes. The code defines a `scatterPlot` function that appends an SVG, computes scales via `d3.scaleLinear`, draws axes with `d3.axisBottom` and `d3.axisLeft`, and binds data using `selectAll().data().enter()`. The repository also includes a separate React component (index.jsx) that uses `useRef` and `useEffect` to integrate D3 selections, though the plot itself runs standalone.

SSanjayRamaSwamyAdla@my.unt.edu

82% match