Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Fork of Reusable D3 Scatter Plot

✓ Published1🌍 Public
Bbhargavinalamothu@gmail.com
Last edited Apr 1, 2025
Created on Apr 1, 2025

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Reusable Canvas

A reusable scatter plot displays the relationship between two numeric variables from a CSV file, with steel-blue semi-transparent circles plotted against labeled axes. Built with D3 v6, the example demonstrates a modular architecture where the `scatterPlot` function encapsulates the chart logic, while `branding.js` handles data loading via `d3.csv` and passes parsed values to the plot. The SVG canvas resizes to 80% of the window width, and the plot is instantiated with configurable accessors for x and y values, margins, and point radius.

Ssrividyamadas@gmail.com
85% match
Loading thumbnail…

Fork of Fork of Fork of Reusable D3 Scatter Plot

This example shows a scatter plot of sleep duration against age, with each circle representing a person’s data point. The visualization uses D3.js v6 to load a CSV dataset, apply linear scales, and render axes with labels. Circles are drawn with an SVG selection join, while the chart is built as a reusable function with configurable properties for width, height, data, margins, and radius. The plot is sized to fill the browser window and updates its dimensions accordingly.

Bbhargavinalamothu@gmail.com
85% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example shows a row of twenty circles evenly spaced across the screen, all centered vertically. The visualization uses D3.js version 6.7.0 to bind an array of data points to SVG circle elements, setting each circle’s x-coordinate, y-coordinate, and radius based on the data. The code pulls data from a simple generated array via `d3.range`, and positions the circles using the `select`, `selectAll`, and `join` methods. The page is styled with a hidden overflow and a custom Google font, though the dataset referenced in the README is not actually loaded in the running code.

Kkhalil-ryu
84% 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
84% match
Loading thumbnail…

Reusable Scatter Plot in

This reusable scatter plot displays sample data points as steelblue circles, with x and y positions mapped through linear D3 scales. The visualization constructs axes using d3.axisBottom and d3.axisLeft, applied to an SVG container with configured margins. The d3.v7 code encapsulates the chart creation in a `createScatterPlot` function, which binds data via `selectAll().data().enter().append()` and renders the SVG output with hardcoded example values.

Ssaipaidipalli
84% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example presents a reusable D3 scatter plot that visualizes tech product data, mapping price, rating, sales volume, and customer reviews. The plot automatically cycles through these attributes every two seconds, updating the x-axis and data points. It uses D3’s `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `scaleOrdinal` APIs for axes and color. Implemented as a configurable chart function, it demonstrates a reusable pattern with `.join()` for creating and updating SVG circles and legend items, with data loaded from a CSV file.

AAmrit Adhikari
84% match
Loading thumbnail…

Fork of reusable scatter plot

A reusable scatter plot cycles every two seconds between horsepower and miles-per-gallon axes for a 20-row car dataset. Built with D3 v6, it uses a reusable chart function with getter-setters for width, margin, and accessor functions. The SVG renders axes, labels, and steelblue circles with hover tooltips via appended title elements, while a setInterval reassigns xValue and yValue to flip the variables. The chart removes and recreates the SVG on each update, producing an animated axis-switching visualization.

119h61a05c9@cvsr.ac.in
83% match
Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This visualization combines a scatter plot with line charts to explore university rankings, plotting countries on a shared x-axis band scale and metrics like research environment, quality, and industry impact on a y-axis from 0 to 100. It renders red circles for student-to-staff ratios alongside steelblue line paths per university, using the D3 v6 APIs `scaleBand`, `scaleLinear`, `line`, `axisBottom`, and `axisLeft`. The data comes from a CSV of University Ranks, fetched via `d3.csv` and parsed with custom numeric conversions. The reusable `scatterPlot` module demonstrates a configurable chart factory pattern with setters for width, height, and value accessors.

Vvinodreddysagam929@gmail.com
83% match