Scatter Plot with Menus

100%

Scatter Plot with Menus

✓ Published2🌍 Public

Last edited Oct 2, 2019

Created on Oct 2, 2019

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.

AI-generated description

A visualization for [U.S. Metro Areas Violent Crime Rates by Type].(https://gist.githubusercontent.com/yyaaa1/2a71bdf8de2d1fb6bcf02ee19e2d7322)

MIT Licensed

Similar vizzes

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

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

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

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

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

80% match

Loading thumbnail…

Scatter Plot with X Y Menus

This interactive scatter plot displays U.S. mortality statistics, letting users choose which demographic attributes or death types to plot on the x- and y-axes via ReactDropdown menus. The code uses the d3.csv loader, d3.scaleLinear, and d3.extent to parse and scale data from a Gist, then renders SVG circles and axes using React components such as AxisBottom, AxisLeft, and Marks. Only points matching a hard-coded "Total" age group are visible, with all other circles rendered at zero radius.

PPeter Maida

79% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot lets users explore the Suicide Rates Dataset, sourced from a public GitHub gist, by selecting different numerical attributes for both the x- and y-axes using ReactDropdown menus. The visualization renders points as SVG circles with tooltips, and axes are built with custom React components using d3.scaleLinear and d3.extent for scaling. Users can compare relationships between variables such as suicide counts, GDP, year, and per-capita GDP.

Mmnalk

79% match

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

79% match