Fork of ICE-6 Scatter Plot

100%

Fork of ICE-6 Scatter Plot

✓ Published0🌍 Public

Last edited Jun 25, 2022

Created on Jun 25, 2022

This interactive scatter plot lets users explore the relationship between any two variables from the auto-mpg dataset by switching columns via dropdown menus. Rendered as an SVG with D3 v5, the visualization uses `scaleLinear` for axes and `dropdownMenu` to bind selections to x and y coordinates. The code parses numeric fields with `+d.mpg` and updates the plot dynamically through callbacks, demonstrating reusable D3 components for data-driven comparisons.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Ice-6 Scatterplot

This interactive scatterplot visualizes the auto-mpg dataset, with dropdown menus allowing users to select which columns to plot on the x and y axes. The visualization renders data points as semi-transparent red circles that animate from the center outward to their positions over two seconds, staggered by index. Built with D3 v5, the example uses `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.extent` to construct scales and axes, while a custom dropdown menu component and SVG transitions handle interactivity and rendering.

RRevanthGrreddy

90% match

Loading thumbnail…

ICE-6 Scatter Plot

This interactive scatter plot explores relationships between numeric attributes of cars from the auto-mpg dataset, such as horsepower, weight, and acceleration. Users select which columns appear on the x- and y-axes via two dropdown menus built with a reusable `dropdownMenu` function. The plot is rendered as SVG using D3 v5 scales, axes, and a custom `scatterPlot` module, with circles sized at a radius of 10 pixels. The code demonstrates a modular pattern for combining menu-driven selection with d3’s `csv` data loading and linear scaling.

RRevanthGrreddy

89% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This visualization presents a scatter plot of the Auto MPG dataset, allowing users to interactively select which data columns map to the X and Y axes through dropdown menus. Rendered using D3.js (v5) with SVG and animation, the plot encodes car characteristics like horsepower, weight, and acceleration. The code implements a reusable `dropdownMenu` component and a `scatterPlot` module that leverages `scaleLinear`, `axisLeft`, `axisBottom`, and `transition().duration()` for animated point movement. Data is loaded as CSV from the UCI Machine Learning Repository.

PPenguin-jpg

85% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes the Auto MPG dataset from UCI, letting users explore relationships between car attributes via dropdown menus. The D3 v5 code uses `d3.csv` to load data and `d3.scaleLinear` with axis generators to render SVG axes and circles. The `dropdownMenu` module updates selections, while `scatterPlot` animates points using `transition().duration()` when axes change. The example demonstrates dynamic data-driven visualization with user-controlled encodings.

YYedrup

85% match

Loading thumbnail…

Fork of Scatter plot with menus

This interactive scatterplot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying relationships between different car attributes. Users can choose which two numeric columns to compare using dropdown menus built with the custom `dropdownmenu` function. The D3 v5 code uses `scaleLinear`, `axisBottom`, and `axisLeft` to render the plot, with animated circle transitions via `transition().duration(1000)`. Data is loaded with `csv`, and all numeric fields are converted to numbers before plotting.

SSwapna1915

85% match

Loading thumbnail…

Fork of Scatter Plots with Menus

This interactive scatter plot lets users explore the auto-mpg dataset by selecting which columns to plot on the x- and y-axes via dropdown menus. The chart renders as an SVG with axes and gridlines, and circles animate into position using D3 transitions with staggered delays. The implementation uses d3.scaleLinear, d3.extent, d3.axisBottom, and d3.axisLeft, with a custom dropDownMenu component managing the select elements.

MMajaha21

85% match

Loading thumbnail…

Fork of Fork of Scatter Plot with Menus

This interactive scatter plot from a fork of a D3 v5 example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, with each point representing a car. Users select which numeric columns map to the x and y axes via two dropdown menus, built with a custom `dropdownMenu` function that manipulates HTML `select` elements. The `scatterPlot` module uses `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.extent` to render the SVG axes and circles, while `d3.transition` animates the points over two seconds whenever the axis selection changes.

HHaileabGH

85% match

Loading thumbnail…

Interactive Scatter Plot

This interactive scatter plot lets users explore relationships between numeric columns of the auto-mpg dataset by selecting which variables appear on the x- and y-axes via dropdown menus. Built with D3 v6, it uses `scaleLinear`, `axisLeft`, and `axisBottom` to render axes, while SVG circles animate from the center to their positions using a staggered `transition().duration()` delay. The chart updates dynamically when selections change, with data parsed from CSV and styled with semi-transparent red points.

OOleg

85% match