Skip to main content
SimilarExport ZIP
100%

Scatter Plot with Color Menu

✓ Published0🌍 Public
Eest85
Last edited May 30, 2020
Created on May 30, 2020

This interactive scatter plot explores crime data from San José, Costa Rica, with three dropdown menus that re-map the x-axis, y-axis, and point colors to different columns. The visualization uses D3 v5’s `scaleLinear`, `scaleOrdinal`, and `schemeCategory10` for axes and categorical coloring, while custom reusable components (`dropdownMenu`, `scatterPlot`, `colorLegend`) handle the interface. Points animate via `transition().duration(2000)` when attributes change, and CSV data is loaded with `d3.csv`.

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 displays crime data from Costa Rica, showing the relationship between two selectable columns (such as Canton and Victima) using dot size and position, with a third column controlling dot color. Users choose the axes and color attribute from dropdown menus. Built with D3 v5, the visualization uses `scaleOrdinal` for color mapping, `axisLeft` and `axisBottom` for axes, and animates point placement with `transition().duration(2000)` and a delay. The dataset `Crimenes.csv` is loaded via `csv` and includes counts like "Cantidad_Delitos" for crimes by canton, victim type, and offense. A color legend, generated by `colorLegend.js`, appears on the right, using `schemeCategory10` for distinct hues.

Eest85
91% match
Loading thumbnail…

Scatter Plot with Menus

A scatter plot displays crime statistics from a San Jose dataset, with dropdown menus letting users choose which numeric columns appear on the x- and y-axes. The visualization re-renders the chart with a smooth animated transition when a selection changes. Built with D3 v5, it uses the `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` APIs to map data, while custom dropdown menus and SVG circle transitions update positions dynamically.

Eest85
90% match
Loading thumbnail…

Scatter Plot with Menus

This scatter plot visualizes a dataset of California census data, allowing users to choose which columns map to the X and Y axes via dropdown menus. Built with D3 v5, it uses `scaleLinear` and `scalePoint` for axes, with circles animated into place using `transition()` and `delay()`. The SVG rendering includes axis labels and grid ticks, with data loaded from a CSV file using `d3.csv`.

CCBoton
81% match
Loading thumbnail…

Scatter Plot with Menus

A scatter plot displays U.S. metro area crime statistics, with dropdown menus letting users independently select which two attributes (e.g., violent crime, homicide, robbery, year) map to the x- and y-axes. The visualization is built with React and D3 v5, using `scaleLinear`, `extent`, `csv`, and SVG circles to render the marks. A color legend highlights specific values on hover. Data comes from a CSV file loaded via D3’s `csv` function.

Ssophburke
81% match
Loading thumbnail…

Scatter Plot with Menu by mfr(legends)

This scatter plot visualizes the relationship between two selected attributes of Chicago crime data, allowing users to compare different dimensions via dropdown menus. The visualization uses D3 v5 to render an SVG with animated transitions, and it includes a color legend that filters data points by arrest status. The chart uses a linear scale for both axes and a categorical ordinal color scale based on the viridis color scheme.

Ssrrajendran
81% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes demographic and economic data for California counties, with dropdown menus allowing the user to select which columns map to the X and Y axes. The visualization uses D3 v5’s `scaleLinear`, `scalePoint`, and `axisBottom`/`axisLeft` to render the plot, and employs `transition().duration(2000).delay()` to animate circles as the selection changes. The X axis supports numeric fields like Income and Poverty, while the Y axis displays categorical county names. Data comes from the UCI Machine Learning Repository’s Auto MPG dataset.

CCBoton
80% match
Loading thumbnail…

Scatter Plot with Menus

This scatter plot displays U.S. metro area violent crime rates across multiple offense types, letting users swap the x- and y-axes via dropdown menus built with React state. The visualization uses D3’s scaleLinear for axes, csv parsing for data loading, and renders all marks and axes as SVG. Interactive color legend hovers fade unselected categories, while circle tooltips show formatted values.

Yyyaaa1
79% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays U.S. Metro Areas violent crime data, letting users select which attribute to plot on each axis via dropdown menus. The visualization uses React for component-based rendering and d3.scaleLinear for axis scales, with SVG circles representing data points. Users can compare metrics including violent crime, homicides, robberies, and total population across metro areas. The chart includes axis labels, formatted tick values using d3.format, and a color legend with hover interactions that fade non-hovered categories. Data is loaded from a CSV file using d3.csv.

Yyyaaa1
79% match