Intersections

100%

✓ Published2🌍 Public

Last edited Dec 11, 2023

Created on Dec 10, 2023

This visualization displays the relationship between U.S. state statistics—including median income, alcohol consumption, and murder rate—using a dynamic scatter plot. The plot transitions between categorical bar charts for states and quantitative scatter plots, with animated circles for numeric comparisons. D3's scaleLinear, scaleBand, axisBottom, and axisLeft APIs handle the chart construction, while the `menu` component and `dispatch` enable interactive axis selection. The code uses `transition` for smooth animations and `selection.join` for efficient SVG element updates. The data comes from a CSV file combining income, alcohol, and murder statistics per state.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts and Observable: selection.join.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Intersections Two

This example presents an interactive scatter plot of U.S. state statistics, including median income, alcohol consumption, and murder rate, using the D3.js library. Users can select which quantitative variable to map to the X and Y axes via dropdown menus, with the chart animating transitions between configurations. The visualization dynamically switches between circular marks for quantitative axes and rectangular bars for categorical axes, such as plotting states alphabetically. Data is loaded from a CSV file, and the code leverages D3's selection joins, scales, and axes for rendering.

Aadventuresenglish.info@gmail.com

93% match

Loading thumbnail…

Intersections 3

This interactive visualization, "Intersections 3," presents the relationships between median income, alcohol consumption, and murder rates across U.S. states. Users can dynamically reassign these quantitative variables to either axis via dropdown menus, which triggers animated transitions that morph the display between scatter plots and categorical bar graphs. Built with D3 v6, the example demonstrates reusable chart components and the `selection.join` API for updating SVG elements. The dataset is loaded from a CSV file, and state names are resolved using a hardcoded lookup table.

Aadventuresenglish.info@gmail.com

93% match

Loading thumbnail…

Fork of Intersections 3

This interactive visualization explores relationships between socioeconomic indicators—median income, alcohol consumption, and murder rate—across U.S. states using the Iris Dataset-inspired scatter plot. Users switch axes via dropdown menus, toggling between categorical state labels and quantitative measures. The chart animates transitions between scatter plots and bar charts using D3’s selection.join, transitions, and scaleBand/scaleLinear scales. SVG circles and rectangles encode data points, with tooltips providing detailed state information. The code leverages D3 v6, CSV data loading, and custom reusable chart and menu components.

Aadventuresenglish.info@gmail.com

90% match

Loading thumbnail…

Let's get tool tipsy up in here

This interactive D3 visualization compares state-level median income, alcohol consumption, and murder rates. Users select different quantitative variables for the x- and y-axes via HTML dropdown menus, toggling between a categorical bar chart and a quantitative scatterplot. The SVG rendering uses `scaleBand` and `scaleLinear` for the axes and animated transitions via `transition` for morphing between chart types. Hovering over a bar or text label triggers a CSS-styled tooltip that fetches an external SVG state flag and displays a data table, using `pointer` for mouse position tracking.

Aadventuresenglish.info@gmail.com

83% match

Loading thumbnail…

Untitled

This visualization plots U.S. state-level crime statistics, showing violent crime totals against homicide cases for each state, with bubble size encoding population and color assigned by state name. The chart uses d3.v4 with d3-scale-chromatic for color mapping and includes an interactive tooltip that displays the state name on hover, while also fading out non-hovered bubbles. Data comes from the estimated_crimes.csv file, rendered as SVG circles with axes and labels generated using d3.axisBottom and d3.axisLeft.

Ssruthisenapathi

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

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

78% match

Loading thumbnail…

Untitled

This interactive map visualizes violent crime rates across U.S. states from 1999 to 2019, with dropdown menus to select the year and crime type. Circles sized and colored by bivariate linear scales (d3.scaleLinear) are overlaid on a U.S. map projected using d3.geoAlbersUsa with d3.geoPath. The visualization uses d3.json to load state boundaries and coordinates, with hover tooltips showing state names and values.

Aajeuphoria

77% match