Scatter Plot with Menus

100%

Scatter Plot with Menus

✓ Published0🌍 Public

Last edited May 30, 2020

Created on May 30, 2020

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Color Menu

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

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

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

86% match

Loading thumbnail…

Scatter Plot with Menus

This scatter plot displays the violent crime rates of U.S. metro areas, with the x and y axes each controlled by a dropdown menu. Users can independently select which crime metric to plot on each axis, including violent crime, homicides, rapes, robberies, or year. The visualization uses React for the interactive components, D3.js scales (scaleLinear, extent) and SVG elements for rendering the circles and axes. Data is loaded via D3’s csv function from a remote gist URL.

Yyyaaa1

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

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

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

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

82% match