Skip to main content
SimilarExport ZIP
100%

Scatter Plot with Color Menu

✓ Published0🌍 Public
JJerfaas
Last edited Apr 2, 2020
Created on Apr 2, 2020

This interactive scatter plot lets users explore the auto-mpg dataset by selecting which columns to map to the x-axis, y-axis, and color encoding through three dropdown menus built with a reusable D3 component. The scatter plot is rendered as SVG using D3 scales, axes, and animated transitions that grow circles from the center. A color legend, generated via a custom component, displays the categorical color scale. The visualization demonstrates dynamic data binding and reusable chart modules in D3 v5.

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…

Scatter Plot with Color Menu

This example presents an interactive scatter plot of the auto-mpg dataset, where users select the x-axis, y-axis, and color encoding variables via three dropdown menus built with a reusable d3 module. The visualization uses d3.scaleLinear for axes, d3.scaleOrdinal with schemeCategory10 for colors, and renders SVG circles with animated transitions. A separate color legend displays the categorical scale. Data parsing and updates are handled through d3.csv and D3’s data join pattern.

CCurran Kelleher
95% match
Loading thumbnail…

Scatter Plot with Color Menu

This interactive scatter plot displays automobile data from the auto-mpg dataset, allowing users to select which numeric columns appear on the x- and y-axes and which categorical column controls point color via three dropdown menus built with the custom `dropdownMenu` function. The visualization uses d3.scaleLinear for axes, d3.scaleOrdinal with schemeCategory10 for colors, and d3.axisLeft/axisBottom for tick marks. Points animate in with a 2-second `transition().duration(2000)` when axes change, while a color legend is rendered using the custom `colorLegend` module. SVG is used for all rendering.

AAjayyy
92% match
Loading thumbnail…

Scatter Plot with Menus and Categorical Color Coding

This interactive scatter plot displays the auto-mpg dataset, letting users compare numeric attributes via dropdown menus and color points by categorical columns. A color legend appears for categories with fewer than 12 unique values, where clicking a legend item filters the visible circles; for larger ordinal categories, a sampled viridis scale is shown without filtering. Built with d3.v5, the visualization uses `scaleOrdinal`, `interpolateViridis`, and `schemeSpectral` for coloring, while transitions animate circle positions and opacity in the SVG when axes or color selections change.

Ffloresh
91% match
Loading thumbnail…

Scatter Plot with Menus and Categorical Color Coding

This interactive scatter plot visualizes the auto-mpg dataset, allowing users to compare different numeric attributes by selecting X and Y columns from dropdown menus. A third dropdown controls categorical color coding, with the legend adapting dynamically: categories with fewer than 12 values display individual swatches for filtering, while larger ordinal sets use a viridis color scale. The visualization uses d3.scaleOrdinal, d3.schemeSpectral, and d3.interpolateViridis for coloring, with SVG rendering and animated transitions on the circles when selections change. Clicking legend items filters the scatter plot points by color value.

Aavolisacado
90% match
Loading thumbnail…

Scatter Plot with Menus and Categorical Color Coding

This interactive scatter plot uses the auto-mpg dataset and D3 v5 to explore relationships between car attributes like horsepower and miles per gallon. Dropdown menus let users select which columns appear on the x-axis, y-axis, and which categorical attribute drives color coding. A color legend, built with `scaleOrdinal` and either `schemeSpectral` or `interpolateViridis`, allows clicking to filter points. SVG circles transition smoothly via `transition.attr` when axes or categories change.

Aavolisacado
90% 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
89% 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
89% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot allows users to explore the relationships between different numeric attributes of cars from the auto-mpg dataset by selecting which columns appear on the x- and y-axes through dropdown menus. The visualization, built with D3 v5, uses scaleLinear, extent, axisBottom, and axisLeft to render the axes and data points as semi-transparent red circles. When a menu selection changes, the scatter plot updates, animating the circles to their new positions over two seconds using a transition with per-element delays.

Jjlspangl
89% match