CV: Scatter Plot with US County Facts

100%

CV: Scatter Plot with US County Facts

✓ Published1🌍 Public

Last edited Dec 6, 2025

Created on Dec 5, 2025

This interactive dashboard visualizes demographic and economic indicators across US counties as a scatter plot, with dropdowns to change the X, Y, and color encodings. Points appear with staggered transitions using D3 v7, and clicking a circle displays detailed county facts in a side panel. The dark-themed interface uses React for layout and state management, with a ResizeObserver to handle responsive dimensions and D3 scales, axes, and color interpolation to render the SVG.

AI-generated description

MIT Licensed

Similar vizzes

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

77% match

Loading thumbnail…

Fork of Responsive Scatter Plot

A linked-view dashboard displays country life expectancy across time, combining a colored equal-earth map with a matching scatter plot. A slider updates both views for a selected year, while hovering over a map region or scatter point highlights its counterpart in the other panel and shows a tooltip with details. The visualization uses d3.geoPath for map rendering, d3.scaleLinear for color encoding, and SVG elements for both the map and circles, with animated transitions driven by D3 v6 event handlers.

Cc_peimann@coloradocollege.edu

74% match

Loading thumbnail…

Cars Scatter Plot

A scatter plot displays demographic data for California counties from a CSV file, with a dropdown menu to select which numeric column drives the x-axis while counties appear on the y-axis. Each circle represents a county, animated with a staggered 2-second transition. The visualization uses D3 v5 with `scaleLinear`, `scalePoint`, `axisBottom`, `axisLeft`, and `transition().delay()` to move circles from the center to their final positions. Data comes from the UCI Machine Learning Repository’s Auto MPG dataset, though the plot itself shows county-level population and socioeconomic variables loaded via `d3.csv`.

CCBoton

74% match

Loading thumbnail…

US States and Counties Circle Pack

This circle pack visualization displays the results of the 2016 US presidential election at the county level, nested within each state. The hierarchical layout is computed using d3.stratify and d3.pack, with circle sizes proportional to vote totals and colors derived from a depth-based d3.interpolateTurbo scale. Data is loaded from a CSV file via d3.csv, and interactive zooming is enabled through d3.zoom. County-level colors distinguish Democratic and Republican victories, while state and county labels are rendered with the Nunito font.

CCurran Kelleher

74% match

Loading thumbnail…

Multidimensional Filtering on US County Facts

This example demonstrates multidimensional filtering on US county demographic data using a series of interactive histograms. Each histogram represents a quantitative attribute such as racial composition, foreign-born population, or poverty rate. Brushing over any histogram filters the subset of counties highlighted across all others, revealing correlations between variables. The visualization implements this crossfiltering using `d3.bin`, `d3.brushX`, and `d3.scaleLinear`, with data loaded from CSV files via `d3.csv`. The `d3-rosetta` library manages state and resizing transitions, animating histogram bars with `transition.attrTween`.

CCurran Kelleher

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

74% match

Loading thumbnail…

Cars Scatter Plot

This interactive scatter plot visualizes demographic and economic data for California counties, sourced from the UCI Machine Learning Repository's Auto MPG dataset. Users select a metric from a dropdown menu—such as Income, Poverty, or Employment—which reshuffles the x-axis position of each county dot. The plot uses d3.scaleLinear for the numeric x-axis and d3.scalePoint for categorical county labels, with circles rendered as SVG elements. A smooth transition.attrTween animation moves dots from the center to their new positions over two seconds. The code leverages d3.csv for data loading and d3.axisBottom/d3.axisLeft for labeled axes.

CCBoton

74% match

Loading thumbnail…

scatter plot

A scatter plot displays population figures for ten countries, with each circle positioned along a linear population axis and a point scale for country names. The visualization uses D3 v5 APIs including `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft`, rendering SVG circles with a steelblue fill. Data comes from a CSV file, with populations multiplied by 1000 and formatted using `format('.3s')` to show billions. Gridlines extend across the plot, and axis labels are added via appended SVG text elements.

Llinkshady

73% match