Scatter Plot with Color Menu

100%

Scatter Plot with Color Menu

✓ Published7🌍 Public

Last edited Jun 24, 2019

Created on Jun 9, 2019

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.

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

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

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

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

92% 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 relationships between pairs of attributes from the auto-mpg dataset, with dropdown menus letting users choose which columns to plot on the x and y axes. The visualization uses d3.scaleLinear for both axes, d3.axisLeft and d3.axisBottom for tick marks, and d3.transition to animate circles from the center to their positions over two seconds. Data is loaded via d3.csv, and the custom dropdownMenu module handles the menu selection logic. The SVG rendering includes grid lines via tickSize and axis labels that update dynamically with each selection.

Pprincit

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

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

88% match