Fork of Intersections 3

100%

Fork of Intersections 3

✓ Published1🌍 Public

Last edited Dec 14, 2023

Created on Dec 12, 2023

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.

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

91% match

Loading thumbnail…

Intersections

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.

Aadventuresenglish.info@gmail.com

90% match

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

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

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

75% match

Loading thumbnail…

Fork of Animated Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, with dropdown menus that allow users to change which measurements are mapped to the x- and y-axes. The chart uses D3 v6 with SVG rendering and smooth 1-second transitions between states, animating circle positions and axis scales via `selection.join` and the `transition` API. The reusable chart pattern structures the code into modular functions for the scatter plot and menu, with the menu dispatching change events to update the plot's value accessors. Data loads from a CSV file hosted on GitHub.

Zzhuomo-maker

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

75% match

Loading thumbnail…

Fork of Fork of D3: NYC Crime Visualization

This interactive dashboard presents NYC crime data across multiple coordinated views: a geographic map with a heatmap overlay, a pie chart, and two bar charts for age and race breakdowns. Users can filter by precinct and crime type, with all charts updating in response. The visualization uses D3 v6 with a Mercator projection via `d3.geoMercator()` and `d3.geoPath()` for the map, alongside SVG-based pie and bar charts. Crime color mapping and tooltips provide additional detail.

CChristianABeier

74% match