Skip to main content
SimilarExport ZIP
100%

Polished Scatter Plot with Menus

✓ Published0🌍 Public
VVamsi Bhargav Sukamanchi
Last edited Oct 28, 2020
Created on Oct 8, 2020

This interactive scatter plot displays movie ratings and attributes from a Movies Dataset, allowing users to explore relationships between continuous variables. Two dropdown menus let viewers select which attributes appear on the x- and y-axes, with the chart updating dynamically. The visualization uses React for state management and rendering, D3 v5 scaleLinear for axis scaling, and ReactDropdown for the menu controls. Data loads asynchronously via d3.csv, and circles render in SVG with built-in tooltips showing tick-formatted values on hover.

AI-generated description

A scatter plot of Movies Dataset. Only considering continuous variables from the dataset.

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
88% 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
86% match
Loading thumbnail…

Scatter Plot with Menus

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.

Aaalejandroq
86% match
Loading thumbnail…

Polished Scatter Plot with Menus

Two dropdown menus control which numeric attributes of the wine quality dataset are plotted on the x- and y-axes. The scatter plot uses React for the interface, with d3.scaleLinear for axes, d3.extent for domains, and SVG circles for marks. Each circle includes a native `<title>` tooltip, while the menus are built with ReactDropdown. The data loads asynchronously via d3.csv.

Llzb1003
86% match
Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot from the Iris Dataset lets users explore relationships between different measurements by selecting which features to plot on the X and Y axes via dropdown menus. Built with React and D3 v5, it renders circles as SVG marks with tooltips showing formatted values, using d3.scaleLinear for axes and d3.extent for domain calculation. The ReactDropdown component from react-dropdown manages the attribute selection, while custom AxisBottom, AxisLeft, and Marks components handle the grid and data points.

KKeerthiKandadai
85% 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
85% match
Loading thumbnail…

Polished Scatter Plot with Menus

This example presents an interactive scatter plot of the Iris Dataset, allowing users to dynamically select which four numerical attributes to plot on the x- and y-axes via two dropdown menus built with ReactDropdown. The visualization updates the axes and data points in real time based on the chosen attributes. The chart is rendered using SVG within a React framework, with axes generated by custom React components using d3.scaleLinear for scales and d3.extent for domains. Data loading relies on d3.csv, and hover tooltips display formatted values via native SVG title elements.

DDeborah Ong
85% match
Loading thumbnail…

Scatterplot with Menus

This interactive scatterplot lets users explore the relationship between any two columns in the auto-mpg dataset by selecting the X and Y axes from dropdown menus. Built with React and D3 v6, it renders an SVG featuring animated transitions between selections, with circles smoothly adjusting to new positions. The example demonstrates reusable components for dropdown menus and scatter plots, utilizing D3’s scaleLinear, extent, axisBottom, and axisLeft APIs alongside the transition system for animation.

MMatthew Rubino
85% match