Skip to main content
SimilarExport ZIP
100%

Scatter Plot with Menus

✓ Published0🌍 Public
Aaalejandroq
Last edited Jun 7, 2019
Created on Jun 7, 2019

A scatter plot visualizes movie data from the UCI Machine Learning Repository, displaying budget, gross revenue, and IMDb scores. Two dropdown menus allow the user to select which columns map to the X and Y axes. Built with D3.js v5, the visualization uses SVG rendering with animated transitions as circles move between positions. The code implements custom dropdownMenu and scatterPlot modules, using d3.scaleLinear for axes and d3.extent for domain calculations.

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 interactive scatter plot uses dropdown menus to let viewers select which data columns to display on the x- and y-axes. The visualization reads from a CSV file containing movie attributes like budget, gross, and IMDb score. The scatterPlot function creates linear scales, axes, and animated circles using d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom. A dropdownMenu module builds the select elements with d3 data joins. The circles transition over 2 seconds with staggered delays, showing how axis labels and data points update dynamically when menu options change.

AArikuzzaman Idrisy
92% match
Loading thumbnail…

Scatter Plot with Menus

Interactive scatter plot of movie data from the UCI Machine Learning Repository's Auto MPG dataset, allowing users to select which columns map to the x and y axes through dropdown menus. Built with D3 v5, the visualization uses d3.scaleLinear, d3.extent, axisBottom, and axisLeft for axes, with SVG circles that animate via d3.transition when the data changes. Dropdowns are generated using a custom dropdownMenu function that binds to the select element's change event.

Llonnylee1
92% match
Loading thumbnail…

Scatter Plot with Menus

This scatter plot visualizes movie data from the UCI Machine Learning Repository’s Auto MPG Data Set, displaying points on SVG axes where users select X and Y columns via dropdown menus. The d3.v5 code uses `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` for scaling and axes, while `transition().duration(2000)` animates circles from the center to their positions. The `dropdownMenu` module handles menu interactions, re-rendering the chart with `d3.csv` loaded data.

AAnthony Winstanley
91% match
Loading thumbnail…

Scatter Plot with Menus

Two dropdown menus let viewers select which columns of a dataset appear on the x- and y-axes of a scatter plot. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, `axisLeft`, and `extent` functions to map numeric values, while a custom `dropdownMenu` module builds the `<select>` elements. Circles animate into position with `transition().duration(2000)` and a staggered delay, and the data comes from a CSV file containing movie attributes like budget, gross, and IMDb score.

LLiuXiangYuan
89% match
Loading thumbnail…

Scatter Plot

This interactive scatter plot visualizes movie data, comparing three variables—budget, gross revenue, and IMDB score—through user-selectable dropdown menus. The visualization uses D3 v5’s `scaleLinear`, `axisLeft`, `axisBottom`, and `csv` to load and render the data as animated SVG circles. Each axis is controlled via a dropdown menu, and points transition smoothly into position over one second, with axis labels and tick marks generated dynamically. The data is sourced from a local CSV file.

Ssourcebox-bug
88% match
Loading thumbnail…

Scatter Plot

This interactive scatter plot explores relationships among movie budget, gross revenue, and IMDb scores using data loaded from a CSV file. Dropdown menus let users select which three measures to compare on the x-axis, y-axis, and color scale. The visualization uses D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom` to render animated SVG circles that transition from the chart’s center to their final positions. A modular `dropdownMenu` component and reusable `scatterPlot` function structure the code for maintainability.

Ddrmurugesh
88% match
Loading thumbnail…

Scatter Plot with Menus

A scatter plot displays data from the UCI Auto MPG Data Set, with dropdown menus letting users select which columns to map to the X and Y axes. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear`, `axisLeft`, `axisBottom`, and a `transition` with duration and delay to animate circles into position. Data is loaded from a CSV file via `csv()`, and the dropdown menus are built with a custom `dropdownMenu` module that creates `<select>` and `<option>` elements.

Iibcs47
87% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot lets users explore car data from the UCI Machine Learning Repository's Auto MPG dataset. Two dropdown menus allow selection of which data columns map to the X and Y axes. Built with D3 v5, the visualization uses dropdownMenu to handle menu interactions and scatterPlot with scaleLinear, axisBottom, axisLeft, and transition delays to animate circles into position. The SVG rendering includes gridlines and axis labels.

Ssourcebox-bug
86% match