Skip to main content
SimilarExport ZIP
100%

Fork of Reusable D3 Scatter Plot

✓ Published0🌍 Public
Ssaiabhishekmunnangi@gmail.com
Last edited Oct 26, 2025
Created on Oct 25, 2025

This scatter plot shows the relationship between author followers and engagement for a social media misinformation dataset. It uses the D3.js v7 library to load CSV data and render an SVG visualization. The reusable `scatterPlot()` component builds the chart with `d3.scaleLinear` for axes, `d3.extent` for domains, and `d3.axisBottom`/`d3.axisLeft` for tick marks. Circles represent individual posts, with labeled axes for author follower counts and engagement levels.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of D3 Starter

The visualization is a scatter plot that shows the relationship between an author's number of followers and their post engagement, using data from the `social_media_activity.csv` file. Each point represents an author, with the x-axis mapping follower counts and the y-axis mapping engagement levels. The chart is rendered as an SVG using D3 v7, with data loaded via `d3.csv` and scales created with `d3.scaleLinear`. Axes are drawn using `d3.axisBottom` and `d3.axisLeft`, and the points are styled with a fixed radius, fill color, and opacity.

Yyazneshpara2@gmail.com
81% match
Loading thumbnail…

Fork of Fork of Fork of Reusable D3 Scatter Plot

This reusable scatter plot, written with D3 version 6, displays a set of numeric x/y data points as steelblue circles. The example fetches its data from a JSON file hosted in a GitHub gist, then maps the raw values to numbers. It builds an SVG canvas and uses `d3.scaleLinear` with `d3.extent` to compute the axes, which are rendered with `d3.axisBottom` and `d3.axisLeft`. The chart includes labeled X and Y axes, with the plotting logic encapsulated in a function for reuse.

Bbhargavinalamothu@gmail.com
77% match
Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This example demonstrates a reusable D3.js scatter plot that visualizes Amazon book data, plotting petal width against average rating. It uses the d3.csv function to load and parse the dataset, then employs d3.scaleLinear, d3.axisBottom, and d3.axisLeft to render the axes and circles for each data point. The plot updates its x-axis and circle positions every two seconds by cycling through different numeric columns, driven by setInterval and the scatterPlot function’s configurable accessor methods. The visualization relies on D3 v7 (and v6 in package.json) with SVG rendering and animation.

BBALAJI MANDAVA
77% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example visualizes the relationship between student population and student-to-staff ratio in a scatter plot, with each circle representing a university. It loads CSV data from a GitHub URL, parses it, and maps the selected columns to x and y positions using D3’s `scaleLinear`. The chart uses `axisBottom` and `axisLeft` for axes, while circle colors come from `scaleOrdinal` (though the color mapping is static to species names not present in this dataset). The reusable `scatterPlot` function encapsulates the chart’s configuration, and SVG rendering is used throughout.

Ssagamreddy929@gmail.com
77% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This fork of a reusable D3 scatter plot displays tree measurements—leaf width, trunk diameter, leaf length, and height—as colored circles, with species mapped to blue, red, green, or yellow. Built with D3 v6.7.0, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render axes and SVG circles. Every two seconds, the plot cycles the x-axis variable among the four measurement columns, animating the data points’ positions. The data is loaded from a CSV file via `d3.csv` and parses numeric fields before plotting.

Sshreyasribearelly@gmail.com
77% match
Loading thumbnail…

Fork of Reusable Scatter plot Activity 8

This reusable D3.js scatter plot displays the relationship between two quantitative variables as circles positioned by linear scales, with labeled axes and a custom margin. The chart is fully configurable through a modular API that lets users specify width, height, data, x/y value accessors, margin, and radius. It relies on `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to compute domains and render axes, while binding data to SVG circle elements. The visualization loads its dataset from an external CSV file using `d3.csv`.

Ggolisanthoshi2000@gmail.com
77% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This interactive scatter plot cycles through three blood-related measurements from a medical dataset, displaying a different x-axis variable every two seconds. The visualization uses D3 v6 with a reusable chart module that maps data points to circles, scaling positions with linear axes. It animates by calling a custom `scatterPlot` function with different accessor functions, updating the chart in place. The plot reads CSV data from a remote gist, and the axes are rendered with `axisLeft` and `axisBottom`. The circular markers transition smoothly between states, demonstrating a flexible, data-driven approach to multi-variable exploration.

Hharichandanamone21@gmail.com
77% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example presents a fork of a reusable D3 scatter plot built in React with SVG rendering. It displays two scatter plots from cricket statistics: Runs versus Strike Rate and Wickets versus Balls Faced, with each point colored by match type (T20, ODI, or Test) using d3.scaleOrdinal and including interactive tooltips via appended title elements. Data is loaded as CSV using d3-fetch and processed with d3.axisBottom, d3.axisLeft, d3.extent, and d3.scaleLinear for scales and axes. The source data comes from a gist hosted on GitHub, rendered through React’s useEffect and useState hooks.

Ssdarsi2404@gmail.com
77% match