Fork of Scatter Plot with Menus

100%

Fork of Scatter Plot with Menus

✓ Published0🌍 Public

Last edited Mar 13, 2021

Created on Mar 8, 2021

This interactive scatter plot from the D3.js gallery visualizes country-level happiness data from the UCI Machine Learning Repository. Two dropdown menus let users select which columns from the happiness.csv dataset map to the X and Y axes, with the plot updating via smooth, staggered transitions. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, `axisLeft`, and `select` APIs, rendered as SVG circles with animated positioning and axis labels that update dynamically.

AI-generated description

This scatter plot shows data about cars, from UCI Machine Learning Repository: Auto MPG Data Set. The user can select which columns map to X and Y using dropdown menus.

MIT Licensed

Similar vizzes

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

86% 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

85% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot from the D3 example gallery uses two dropdown menus to let the viewer choose which data columns from the auto-mpg CSV dataset appear on the x- and y-axes. The visualization is rendered as an SVG, with circles animating into place over two seconds via D3's `.transition()` method. The code leverages the `d3.scaleLinear` and `d3.extent` functions to compute scales, and `d3.axisBottom` and `d3.axisLeft` to draw the axes with tick marks.

TToooooooT

85% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This scatter plot displays the UCI Auto MPG dataset, showing relationships between car attributes such as horsepower, weight, and acceleration. Two dropdown menus let users select which columns map to the x- and y-axes, triggering a staggered 2-second animated transition where circles move to their new positions. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, `axisLeft`, and `selection.transition().delay()`, rendering as SVG with a custom `dropdownMenu` component for interactive control.

PPiotr Paszek

85% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This scatter plot visualizes car data from the UCI Machine Learning Repository’s Auto MPG dataset, with dropdown menus letting users choose which columns map to the X and Y axes. The visualization uses d3.scaleLinear, d3.axisBottom, and d3.axisLeft to render the axes, while d3.transition animates circles moving to their new positions over two seconds. Data is loaded via d3.csv, and the interactive menus are built with native HTML select elements. The SVG rendering includes gridlines and axis labels that update dynamically.

RRikibens

84% 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

84% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot lets users explore relationships between numeric measurements—including Length, Eye Diameter, and Jaw—across different countries. Two dropdown menus dynamically select which columns appear on the x- and y-axes, triggering a re-render of the visualization. Built with D3.js v5, it uses the library's `select`, `csv`, `scaleLinear`, `axisLeft`, and `axisBottom` APIs, along with custom dropdown and scatter plot modules. Circles animate into position using `transition().duration(2000).delay()`, while axis labels update to reflect the chosen variables. Data comes from a local CSV file.

KKanishka33

84% match

Loading thumbnail…

Scatter Plot with Menus

A scatter plot displays data from the UCI Auto MPG Data Set, with dropdown menus letting users select which columns to map to the X and Y axes. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear`, `axisLeft`, `axisBottom`, and a `transition` with duration and delay to animate circles into position. Data is loaded from a CSV file via `csv()`, and the dropdown menus are built with a custom `dropdownMenu` module that creates `<select>` and `<option>` elements.

Iibcs47

84% match