Skip to main content
SimilarExport ZIP
100%

Fork of React & D3 Starter

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

A scatterplot visualizes the relationship between exercise hours and productivity scores for 100 individuals. The SVG chart uses blue circles to represent each data point, with exercise hours on the x-axis and productivity scores on the y-axis. The code loads health_productivity_100.csv using `d3.csv`, then applies `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for tick marks, and dashed gridlines. The chart includes a cursive title and axis labels rendered with D3's SVG text elements.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of React & D3 Starter

This pie chart shows the distribution of exercise levels across 100 individuals, categorizing weekly exercise hours into low, medium, and high groups. The code uses d3.csv to load lifestyle data, d3.pie and d3.arc to generate the slices, and d3.scaleOrdinal for the color scheme. SVG elements render the chart with percentage labels positioned via labelArc centroids, alongside a legend displaying category counts. The visualization applies d3.js v7, featuring a clean white background, shadow effects, and cursive typography throughout.

Kkarthikpavan1198@gmail.com
85% match
Loading thumbnail…

Fork of React & D3 Starter

This example visualizes daily fitness activity trends over 150 days, comparing steps walked, calories burned, and active minutes as multi-line charts within a single SVG. Using React 19 and D3 v7, it parses CSV data with `d3.csv`, scales values with `d3.scaleLinear`, generates paths with `d3.line`, and renders `d3.axisBottom` and `d3.axisLeft` axes. The visualization includes a title, legend, and styled background, with active minutes scaled 100x for visibility.

Kkarthikpavan1198@gmail.com
83% match
Loading thumbnail…

Fork of React & D3 Starter

This scatter plot visualizes the relationship between student study hours and exam marks, with a summary showing total students and averages. It uses D3 v7’s `d3.csv` to load data, `scaleLinear` for axes, and `d3.axisBottom`/`axisLeft` for the coordinate system. The React wrapper (index.jsx) renders an SVG, while the standalone HTML version draws semitransparent steelblue circles for each student. Data comes from a raw GitHub CSV file hosted by the author, and the chart includes axis labels for hours and marks.

YYash Raj Mathur
83% match
Loading thumbnail…

Fork of React & D3 Starter

This visualization combines bars and lines to compare daily fitness metrics—calories burned, steps walked, and active minutes—across 150 days. It shows all three trends on a single SVG chart, with steps scaled down to fit the axis. The code uses D3 v7 APIs such as `scaleBand`, `scaleLinear`, `axisLeft`, and `d3.line` to render the chart, while React handles the page setup. Data comes from a CSV file loaded via `d3.csv`, and the rendering uses SVG elements like `rect` and `path`.

Kkarthikpavan1198@gmail.com
82% match
Loading thumbnail…

Fork of React & D3 Starter

This scatterplot visualizes the relationship between study hours and GPA, with each data point represented as a steel-blue circle. The visualization loads a CSV file, converts the study hours and GPA columns to numeric values, and maps them to x and y coordinates using `d3.scaleLinear` functions. It relies on the D3.js library through a React component, drawing the circles directly to an SVG canvas via methods like `d3.select`, `d3.csv`, and `.append`. The x-axis spans zero to twelve hours, while the y-axis covers zero to four for GPA.

Kkoushika.3002@gmail.com
81% 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
81% 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
80% match
Loading thumbnail…

Fork of React & D3 Starter

This visualization shows a scatter plot displaying the relationship between signups and revenue across 100 data points from a CSV dataset. The chart uses SVG rendering with D3 v7, featuring a reusable `scatterPlot` function that handles scales, axes, grid lines, and point rendering. The code employs `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to construct the visualization, with a white background, cursive font styling, and blue semi-transparent circles at a fixed radius of 5 pixels.

Kkarthikpavan1198@gmail.com
80% match