Skip to main content
SimilarExport ZIP
100%

Scatter Plot with Color Menu

✓ Published2🌍 Public
KKhatera Alizada
Last edited Apr 15, 2023
Created on Mar 19, 2023

This interactive scatter plot lets users explore healthcare cost data by selecting X, Y, and color attributes from dropdown menus. The D3 v5 visualization uses a time-based X-axis for the year column and linear scaling for other metrics, with color encoding via `scaleOrdinal` and `schemeCategory10`. A `colorLegend` component displays the categorical scale, while the `scatterPlot` module animates circles with `transition().duration(2000)` as users change selections, all rendered as SVG elements.

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…

Dropdown

This example shows an interactive scatter plot of health care cost estimates, where a dropdown menu switches the x-axis values between Year and Out-of-Pocket Dental Services, while color encodes age group. The visualization uses d3.scaleLog for the x-axis, d3.scaleLinear for the y-axis, and d3.scaleOrdinal with d3.schemeCategory10 for coloring. A color legend supports hovering to highlight matching data points, and the data is loaded as CSV and parsed with d3.csvParse. The SVG rendering follows a modular pattern with separate functions for axes, legend, dropdown, and the main plot.

KKhatera Alizada
85% match
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
83% 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
82% match
Loading thumbnail…

Scatter Plot with Menus on Medical Cost Personal Dataset

This interactive scatter plot explores the Medical Cost Personal Dataset, showing relationships between patient attributes like age, BMI, and children. Users select which attribute maps to the x- and y-axes via two ReactDropdown menus, with smoker status encoded by the color of each circle. Built with React and D3 v5, the visualization uses scaleLinear for axes, scaleOrdinal for colors, and custom SVG components for axis ticks and marks, loading data via d3.csv.

Llynz09
82% match
Loading thumbnail…

Interactive Color Legend Scatterplot to determine Healthcare Expenditure per year

This interactive scatterplot visualizes healthcare expenditure against year for different continents. The visualization uses d3.scaleLinear for X and Y axes and d3.scaleOrdinal for color mapping. A color legend allows users to hover over continent names, filtering and highlighting corresponding data points while fading others. Built with React and d3.v5, the SVG rendering uses CSV data loaded via d3.csv.

Aaishwarya8615
82% 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
80% match
Loading thumbnail…

Interactive Color Legend Scatter Plot for Life Expectancy Data with Menu

This interactive scatter plot visualizes life expectancy data, allowing users to explore correlations between different health and economic attributes across continents. A pair of dropdown menus controls which variables appear on the X and Y axes, while a color legend enables filtering by continent with hover highlighting. The visualization uses D3 scales and SVG rendering with React components, including custom axes, marks, and a color legend that responds to mouse events.

Aaishwarya8615
80% match
Loading thumbnail…

Scatter Plot with Color Menu for Life Expectancy Data

This interactive scatter plot explores correlations in life expectancy data from a CSV file hosted on GitHub. Users select different attributes for the X and Y axes, as well as a color category, through three dropdown menus. The visualization uses D3 v5 with SVG rendering and animation, employing `scaleLinear` for axes, `scaleOrdinal` with `schemeCategory10` for colors, `axisBottom` and `axisLeft` for ticks, and `.transition()` to animate point movement. A custom color legend displays category labels alongside the plot.

Aaishwarya8615
80% match