Skip to main content
SimilarExport ZIP
100%

Reusable D3 Scatter Plot ice 7

✓ Published0🌍 Public
Ddiwashhumagain@my.unt.edu
Last edited Oct 25, 2025
Created on Oct 25, 2025

An interactive scatter plot visualizes the relationship between GDP and M2 Money Supply for a dataset loaded from a CSV file. The chart uses a reusable function pattern, defined in `scatterPlot.js`, which is configured through getter and setter methods. The visualization is rendered as an SVG using D3's `scaleLinear`, `axisBottom`, and `axisLeft` APIs. The data is parsed to remove commas from numerical values. The plot displays steelblue circles with axes and labels, using the 'Share Tech' font.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

A reusable scatter plot visualizes the ICE.csv dataset with an interactive interface for selecting numeric variables from the data. Built with D3 v7, the chart renders SVG circles and supports dynamic updates when users change X/Y axis selections through dropdown menus. The implementation demonstrates a chainable chart factory pattern with configurable setters, featuring tooltips on hover, a color legend for categorical grouping, and animated transitions between different data encodings. Grid lines, axis labels, and a responsive layout complete the visualization.

Mmaddulanagasanjana@gmail.com
80% match
Loading thumbnail…

Reusable Scatter Plot for ICE-7

A reusable scatter plot displays three numeric attributes—weight, height, and price—from a CSV dataset, letting users switch axes via dropdown menus. Built with D3 v6, it uses `d3.scaleLinear` and `d3.axisBottom`/`d3.axisLeft` to render SVG axes, while `d3.selectAll('circle')` binds data points as steelblue circles. The chart updates by removing and reappending axes and circles on dropdown changes.

NNagasharan Sai Nandyala
80% match
Loading thumbnail…

ICE7-Q1-Reusable-Scatter

A reusable scatter plot displays the relationship between population and GDP for cities in 2023, with population on the x-axis and GDP on the y-axis. The chart is rendered as an SVG using D3 v7, leveraging the `d3.scaleLinear` scales and `d3.axisBottom` and `d3.axisLeft` for axes. Data from the `global_cities_extended.csv` file is loaded with `d3.csv` and filtered to the target year, with points drawn as circles with a fixed radius and opacity.

CCharith Kapuluru
79% match
Loading thumbnail…

ICE - 7 Reusable D3 Scatter Plot

This example shows a reusable scatter plot that displays sales figures over time, with each circle representing a data point. It uses D3.js version 7 to render the visualization as SVG elements, with a band scale on the x-axis for categorical years and a linear scale on the y-axis for continuous sales values. The code leverages `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes, while interactive tooltips appear on mouseover using D3 event handlers. Data is loaded from a CSV file using `d3.csv`, and the plot includes animated transitions for tooltip visibility.

Yyvarshachowdary@gmail.com
79% match
Loading thumbnail…

Ice 7 reusable scatterplot

This reusable D3.js module renders a scatter plot comparing open and close prices from a trading dataset, with each point using blue circles. The chart is created using `d3.scaleLinear` for both axes, with `d3.extent` determining the domain and `d3.axisBottom` and `d3.axisLeft` providing labeled axes. The code exports a configurable `scatterPlot` function that accepts `.x()`, `.y()`, `.width()`, and `.height()` setters, allowing the chart to be re-bound to different data columns. Styling uses a 24px "Share Tech" font.

UUday Kiran
79% match
Loading thumbnail…

3D Scatter Plot - Bonus ICE

A 3D scatter plot displays economic indicators for G20 countries from a CSV dataset, plotting inflation rate, population in millions, and GDP in billions. Each point represents a country, with hover text revealing its name, and duplicate marker traces render the same data with distinct visual styling. The visualization uses Plotly’s `scatter3d` type via `Plotly.newPlot`, while D3’s `csv` function loads and parses the data, with axes explicitly labeled through the layout’s scene configuration.

KKevin Raj
78% match
Loading thumbnail…

Reusable D3 Scatter Plot- ICE7

A scatter plot cycles through four flag and stand measurements from a CSV dataset, updating the x-axis and axis label every few seconds. The visualization uses D3 v6 to render circles colored by a "color" attribute, with red, green, and blue indicated in a legend. It employs reusable scatter plot and scale functions, rendering through SVG with animation for the rotating axes and labels.

Hharika-1929
78% match
Loading thumbnail…

Re-usable Scatter Plot

This reusable scatter plot visualizes the relationship between product quantity and price from a CSV inventory dataset. It uses D3 v6 to load the data, map the numeric fields to linear scales, and render circles with fixed radius on an SVG canvas. The code demonstrates a modular chart-building pattern with explicit margins, axis generation via `d3.axisBottom` and `d3.axisLeft`, and a consistent steelblue fill for all data points. The chart is embedded in a centered, styled layout.

Vvishnupriya eupuri
78% match