Skip to main content
SimilarExport ZIP
100%

Scatter Plot with Color Menu

✓ Published1🌍 Public
AAjayyy
Last edited May 21, 2020
Created on May 21, 2020

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.

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

Scatter Plot with Color Menu

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.

JJerfaas
92% 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
91% 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

This interactive scatter plot displays automobile data from the auto-mpg dataset, letting users compare any two numeric columns by selecting them from dropdown menus. The visualization updates with animated transitions as new axes and circles are chosen. Built with D3 v5, it uses `scaleLinear`, `axisBottom`, `axisLeft`, and `selectAll` with data joins to render SVG elements, while custom dropdown menus trigger re-renders of the chart. The scatter plot includes labeled axes with grid lines and semi-transparent circles representing individual cars.

Aarths-glitch
91% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays automobile data from the auto-mpg dataset, letting users compare any two numeric columns by selecting them from dropdown menus. The visualization updates with animated transitions as new axes and circles are chosen. Built with D3 v5, it uses `scaleLinear`, `axisBottom`, `axisLeft`, and `selectAll` with data joins to render SVG elements, while custom dropdown menus trigger re-renders of the chart. The scatter plot includes labeled axes with grid lines and semi-transparent circles representing individual cars.

Aarths-glitch
91% 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
91% 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
91% match