Scatter Plot with Menus

100%

Scatter Plot with Menus

✓ Published0🌍 Public

Last edited Apr 11, 2020

Created on Apr 11, 2020

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.

AI-generated description

This scatter plot shows data about cars, from UCI Machine Learning Repository: Auto MPG Data Set. The user can select which columns map to X and Y using dropdown menus.

MIT Licensed

Similar vizzes

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

90% match

Loading thumbnail…

Cars Scatter Plot

This interactive scatter plot displays demographic and economic data for California counties from the UCI Machine Learning Repository’s Auto MPG dataset, with a dropdown menu letting users switch the x-axis variable. Built with D3 v5, it uses `scaleLinear`, `scalePoint`, and `axisBottom` for axes, and animates circles via `transition().duration()` and `delay()` when the selection changes. The SVG rendering includes a title and axis labels, with data loaded asynchronously using `csv()`.

CCBoton

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

90% match

Loading thumbnail…

Cars Scatter Plot

This interactive scatter plot displays demographic and economic data for California counties, sourced from the UCI Machine Learning Repository's Auto MPG dataset. Users select a variable from a dropdown menu to control the x-axis, with counties positioned along the y-axis using a point scale. The visualization, built with D3 v5, renders animated SVG circles that transition to their positions over two seconds using `transition.attrTween`-like delays. Axes are generated with `axisBottom` and `axisLeft`, while `scaleLinear` maps numeric values and labels are formatted using `format`.

CCBoton

89% match

Loading thumbnail…

Cars Scatter Plot

This interactive scatter plot visualizes demographic data for California counties, sourced from the UCI Auto MPG dataset. A dropdown menu lets users select which attribute to plot on the x-axis, with counties listed on the y-axis. The D3 v5 code uses `scaleLinear`, `scalePoint`, and `axisBottom` to build the chart, while `transition().duration(2000).delay(i * 10)` animates circles from the center to their positions. Each circle is semi-transparent red, and axes use custom tick formatting.

CCBoton

88% 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 numeric column from a dropdown menu to update the x-axis, while counties are ordered along the y-axis using `d3.scalePoint`. The visualization uses D3 v5, rendering circles as SVG elements with a staggered 2-second transition, employing `scaleLinear`, `axisBottom`, and `axisLeft`. The code also uses `transition().duration(2000).delay()` to animate circle positions smoothly.

CCBoton

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

87% match

Loading thumbnail…

Cars Scatter Plot

This interactive scatter plot displays California county data from the UCI Auto MPG dataset, plotting a selected numeric column against county names on a point scale. A dropdown menu lets users choose which variable appears on the x-axis, while circles animate into position over two seconds using staggered delays. The visualization uses d3.csv for loading, d3.scaleLinear and d3.scalePoint for scales, and d3.axisBottom/d3.axisLeft for axes, with SVG rendering and CSS-styled circles.

CCBoton

86% match