Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
SSanjayRamaSwamyAdla@my.unt.edu
Last edited Mar 30, 2026
Created on Mar 30, 2026

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.

AI-generated description
MIT Licensed

Similar vizzes

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

Fork of Reusable D3 Scatter Plot

This example shows a reusable scatter plot mapping study Hours on the x-axis against test Score on the y-axis, with five data points plotted as black circles. The visualization is built using D3 v6 modules including `scaleLinear`, `axisBottom`, `axisLeft`, and `extent`, all wrapped in a custom `scatterPlot` factory function that accepts configurable setters for width, height, data, and accessor functions. The SVG rendering includes labeled axes for Hours and Score, with margins and a fixed 800×500 canvas, while the page uses the Share Tech font from Google Fonts. The code demonstrates a modular pattern where `index.js` supplies a small hardcoded dataset and applies the reusable chart via `svg.call(plot)`.

YYash Raj Mathur
87% match
Loading thumbnail…

Fork of React & D3 Starter

This example demonstrates a simple scatter plot of age versus salary for four sample data points, using circles positioned by linear scales. It renders to an SVG element with D3 v7 for the data-driven graphics and axes. The code also includes a React component that displays a "Hello D3 & React" message, showing integration between the two. The chart is static, with axes generated via `d3.axisBottom` and `d3.axisLeft`, and margins applied within the 600x400 viewport.

Ppavanireddy03sai@gmail.com
86% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This gallery example demonstrates a reusable scatter plot showing the relationship between study hours and test scores across five data points. The visualization uses d3.scaleLinear to map data domains to pixel coordinates, with axisBottom and axisLeft generating the labeled x- and y-axes. Data points render as black circles via SVG path elements appended through the join pattern. The code separates the chart logic into a scatterPlot.js module, exposing chainable setter methods such as .width and .xValue for configuration. The index.js file initializes the visualization by importing necessary D3 functions and calling the plot on an SVG container with fixed dimensions.

Ggayathrisaxena23@gmail.com
86% 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
85% 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
85% match
Loading thumbnail…

Fork of Fork of Fork of React & D3 Starter

This example shows an area chart of values over time, using a small inline dataset of five ordered day-value pairs. Rendered as an SVG, the chart fills the space beneath a line that connects the data points, which are scaled along linear x and y axes. The code creates the visualization using D3 v7 API calls like `d3.select`, `d3.scaleLinear`, `d3.extent`, `d3.max`, `d3.area`, and `d3.axisBottom`/`d3.axisLeft`. It includes labeled axes for "Days" and "Values" and uses a light blue fill to represent the area under the curve.

SSanjayRamaSwamyAdla@my.unt.edu
85% match