Ice-6 Scatterplot

100%

Ice-6 Scatterplot

✓ Published0🌍 Public

Last edited Jun 25, 2022

Created on Jun 25, 2022

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE-6 Scatter Plot

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.

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…

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

87% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays automobile data from the auto-mpg dataset, with dropdown menus allowing users to select which numeric columns appear on the x and y axes. Built with D3 v5, the visualization uses reusable functions for the scatter plot and dropdown menus, with SVG rendering and animated circle transitions. The axis labels update dynamically as selections change, and the plot encodes data points as semi-transparent red circles with a 2-second stagger animation.

Ssteveaigbe

86% match

Loading thumbnail…

Scatter Plot with menus

This interactive scatter plot displays relationships between numeric attributes of the auto-mpg dataset, with dropdown menus above the chart letting users select which columns to plot on the x and y axes. As selections change, the axes and data points update with a smooth 2-second animated transition, where circles grow from the center and slide to their new positions. The visualization uses D3 v5 with reusable functions for the dropdown menu and scatter plot, employing d3.scaleLinear, d3.extent, d3.axisBottom and d3.axisLeft for scales and axes, plus SVG rendering with a transition delay based on data index for the staggered animation effect.

RRoger Yu-Hsiang Lo

86% match

Loading thumbnail…

Cars Scatter Plot with menus

This interactive scatter plot visualizes the auto-mpg dataset, allowing users to select which columns appear on the x- and y-axes via dropdown menus. The visualization uses D3 v5 with SVG rendering and animated transitions, where circles expand from the center to their positions over two seconds. The code imports reusable modules for the dropdown menu and scatter plot, utilizing D3 scales (scaleLinear, scalePoint), axes (axisLeft, axisBottom), and the extent function to determine data domains.

SSophia Murage

86% match

Loading thumbnail…

Scatter Plot with menus.js

This interactive scatter plot lets users explore the auto-mpg dataset by changing the x- and y-axis variables through dropdown menus. The visualization uses D3 v5 to render animated SVG circles that smoothly transition between selections, with scales, axes, and labels updating dynamically. The code implements custom `dropdownMenu` and `scatterPlot` modules, leveraging D3's `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` APIs, along with `transition` for the animated circle movement.

Dddperdue

86% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the auto-mpg dataset, allowing users to explore relationships between vehicle attributes by selecting different columns for the x- and y-axes via dropdown menus. Built with D3 v5, the visualization uses `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom` to render axes, while `d3.csv` loads the data. Each point animates into position using `transition.attr` with staggered delays (i * 10 milliseconds), and the SVG circles change coordinates smoothly when the selected dimensions change.

AAjit Singh

86% match