Circles on a map

100%

Circles on a map

✓ Published0🌍 Public

Last edited Sep 19, 2019

Created on Sep 19, 2019

This interactive scatter plot visualizes the relationship between two selectable variables from the auto-mpg dataset, which includes measurements like miles per gallon, cylinders, and horsepower. Users choose the x and y axes through dropdown menus built with a reusable `dropdownMenu` component. The chart uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` for scales and axes, while circles animate into position via `transition().duration(2000)`. Each point transitions from the center to its final coordinate, rendering as SVG with a semi-transparent orange fill.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with menus

This scatter plot explores relationships between numeric columns of the auto-mpg dataset by letting users choose which variables appear on the x- and y-axes via two dropdown menus. The D3 v5 code uses the `scaleLinear` and `extent` functions to compute scales, `axisBottom` and `axisLeft` for styled grid lines, and a `transition().duration(2000)` to animate circles to their new positions when the axes change. Red semi-transparent circles represent each car, with axis labels updating to match the selected columns.

Aaalejandroq

86% match

Loading thumbnail…

Interactive Cars Scatter Plot with menus

This interactive scatter plot visualizes the relationship between two selected variables from the auto-mpg dataset, with dropdown menus for choosing the x and y axes. The d3.v5 code uses `scaleLinear` for axes, `extent` for domains, and `axisBottom`/`axisLeft` for rendering. Circles animate via `transition().duration()` when selections change, while the `dropdownMenu` module updates labels. Data is loaded as CSV and numeric fields are parsed before plotting.

NNkwachi Abel

85% match

Loading thumbnail…

Interactive Scatter Plot

This interactive scatter plot lets users explore relationships between numeric columns of the auto-mpg dataset by selecting which variables appear on the x- and y-axes via dropdown menus. Built with D3 v6, it uses `scaleLinear`, `axisLeft`, and `axisBottom` to render axes, while SVG circles animate from the center to their positions using a staggered `transition().duration()` delay. The chart updates dynamically when selections change, with data parsed from CSV and styled with semi-transparent red points.

OOleg

85% match

Loading thumbnail…

Scatter Plot with Menus & Transitions

This interactive scatter plot visualizes relationships between columns of the auto-mpg dataset, letting users choose which variables to compare on the x- and y-axes via dropdown menus. Built with D3 v6, it renders SVG circles that transition smoothly to new positions when the selected dimensions change, using scaleLinear, axisBottom, and axisLeft for the chart scaffolding. Circles fade in with staggered delays, and the axis labels update to reflect the current column selections.

MMuhammad Jarir Kanji

85% match

Loading thumbnail…

Scatter Plot with menus.js

This interactive scatter plot lets users explore the auto-mpg dataset by changing the x- and y-axis variables through dropdown menus. The visualization uses D3 v5 to render animated SVG circles that smoothly transition between selections, with scales, axes, and labels updating dynamically. The code implements custom `dropdownMenu` and `scatterPlot` modules, leveraging D3's `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` APIs, along with `transition` for the animated circle movement.

Dddperdue

85% match

Loading thumbnail…

Scatter Plot with menus

This interactive scatter plot lets users explore the relationship between pairs of numeric variables from the auto-mpg dataset. Dropdown menus, built with a reusable `dropdownMenu` component, dynamically switch which columns are mapped to the x- and y-axes. The visualization, rendered as an SVG, uses D3 v5 APIs such as `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` to compute scales and axes. When a new column is selected, the circles animate to their new positions over two seconds using a staged `.transition().duration(2000).delay(...)` chain.

Ggilbster

85% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot lets users explore the relationship between any two numeric columns of the auto-mpg dataset by selecting them from two dropdown menus. The visualization updates smoothly, with circles animating from the center to their new positions using D3’s `transition()`. The code uses D3 v5’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for axes, and implements the menus with a custom `dropdownMenu` function. The data is loaded via D3’s `csv` from a remote URL, and each point is rendered as an SVG circle.

JJacob van Lingen

84% match

Loading thumbnail…

Scatter Plot with Menus

This scatter plot displays the relationship between pairs of numeric variables from the auto-mpg dataset. Users select the x-axis and y-axis columns via two dropdown menus, which trigger re-rendering of the plot’s axes and circles. Built with D3 v5, the visualization uses `extent`, `scaleLinear`, `axisBottom`, and `axisLeft` to compute scales and axes, while `transition().duration(2000)` animates circles to their new positions. A custom `dropdownMenu` module handles menu creation, and the SVG output updates dynamically on each menu change.

Jjlongwellchc

84% match