Skip to main content
SimilarExport ZIP
100%

Fork of Scatter Plot with Color Menu

✓ Published0🌍 Public
Xxychen0612.cs09@nycu.edu.tw
Last edited Sep 21, 2023
Created on Sep 21, 2023

This fork of a scatter plot expands the original by adding a color attribute selection menu alongside the existing X and Y column pickers. The visualization displays the classic auto-mpg dataset, with each point colored by its origin using a categorical color scale. The app uses d3.scaleLinear for axes, d3.scaleOrdinal for colors, and d3.axisBottom and d3.axisLeft for tick marks. All three dropdown menus are rendered with a custom dropdownMenu function, and circles animate into position over two seconds using d3 transitions.

AI-generated description

A modification of the original Scatter Plot with Menus showing the addition of a color attribute selector menu.

MIT Licensed

Similar vizzes

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

Fork of Scatter Plot with Menus

A scatter plot displays car data from the UCI Auto MPG dataset, with dropdown menus letting users choose which numeric columns map to the X and Y axes. The visualization uses D3 v5 with `scaleLinear`, `axisLeft`, and `axisBottom` for scales and axes, while a custom `dropdownMenu` component handles option selection. SVG circles render each data point with animated transitions via `transition().duration()` and staggered `delay()` per point, creating a cascading effect when the axis variables change.

Wwzhang88
88% match
Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot displays the Auto MPG dataset from the UCI Machine Learning Repository, with dropdown menus letting users choose which numeric columns map to the X and Y axes. It uses D3 v5’s `scaleLinear`, `axisBottom`, `axisLeft`, and `csv` loader to render SVG circles with a staggered 2-second transition when axes change. The component-based code separates menu creation (`dropdownMenu`) from the chart drawing (`scatterPlot`), with axis labels updating alongside the data.

YYue Ma
88% match
Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes car attributes from the UCI Auto MPG dataset, with dropdown menus letting users choose which columns to map to the x- and y-axes. The visualization uses d3.scaleLinear and d3.axisBottom/axisLeft to render axes, while circles animate into position via d3 transitions. The code implements a custom dropdownMenu component and a scatterPlot function that updates axes and data points when menu selections change, rendering as SVG.

NNYCUBK201
87% match
Loading thumbnail…

Fork of Scatter Plot with Menus

This scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying car attributes as red, semi-transparent circles. Two dropdown menus let the user select which data columns map to the X and Y axes. The visualization uses d3.csv for data loading, d3.scaleLinear for scales, d3.axisLeft and d3.axisBottom for axes, and animated d3 transitions to move circles to new positions when menu selections change.

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

Fork of Scatter Plot with Menus

This scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying car attributes as circles. Users can select which data columns map to the X and Y axes through two dropdown menus. The visualization uses D3 v5’s `scaleLinear`, `axisLeft`, `axisBottom`, and `extent` APIs, with SVG rendering. Selecting a new column triggers an animated transition where circles move to their new positions over one second, using `transition().duration(1000).delay((d, i) => i * 10)` for a staggered effect. The plot is updated via a custom `dropdownMenu` module and `scatterPlot` function.

Ppplomith
87% match
Loading thumbnail…

Fork of Fork of Scatter Plots with Menus

A scatter plot of the auto-mpg dataset uses dropdown menus to select which columns appear on the x and y axes, with animated transitions as points move to their new positions. The visualization is built with D3 v6, using the `dropDownMenu` component and the `scatterPlot` module to bind data to SVG circles, scales via `scaleLinear` and `extent`, axes with `axisBottom` and `axisLeft`, and menus driven by `select` and `option` elements.

MMajaha21
87% match