Scatter Plot with Menus X Y Only Simple Dots

100%

Scatter Plot with Menus X Y Only Simple Dots

✓ Published0🌍 Public

Last edited Sep 13, 2018

Created on Sep 13, 2018

This example shows a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, with dropdown menus for selecting the X and Y axes. Users can animate the data points as they transition between axis configurations. The visualization pairs D3 v4 with the d3-component library and Redux for state management, using d3.axis for axes and transitions for smooth point movement and opacity changes. A tooltip appears on hover via d3-tip.

AI-generated description

This example demonstrates usage of a new library called d3-component and Redux to create a scatter plot with menus for X, Y, and color, and some animations. It's an experiment to see how things play out when pairing D3 directly with Redux, without React in the middle.

The data shown here comes from the UCI Machine Learning Repository: Auto MPG Data Set.

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/685fa8300650c4324d571c6b0ecc55de'>Spinner with d3-component</a>

<div align="center"><img src="http://simplehitcounter.com/hit.php?uid=2240182&f=16777215&b=0" border="0" height="18" width="83"></a></div>

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/8c131a74b85d0bb0246233de2cff3f52'>Scatter Plot with Menus X Y Only</a>

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/7139a24064265b3458f825b0d6152e80'>Scatter Plot with Menus X Y Only Simple Dots</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot lets users explore the Auto MPG dataset from the UCI Machine Learning Repository through menus for choosing X, Y, and color dimensions, with animated transitions between selections. Built using d3-component and Redux, the visualization pairs D3 selections with a state container, updating scales and circle positions smoothly. It includes tooltips via d3-tip and renders axes using D3’s axis components.

CCurran Kelleher

94% match

Loading thumbnail…

Scatter Plot with Menus X Y Only

An interactive scatter plot visualizes the Auto MPG dataset, allowing users to select which variables to plot on the X and Y axes via dropdown menus. Built with React and the Redux state management library, the visualization uses d3-component for componentized rendering. Points animate between positions when axes change, with a tooltip showing details on hover. The code leverages D3's scaleLinear and extent functions to compute scales dynamically from the selected data columns.

CCurran Kelleher

93% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot, built with D3 v4, Redux, and d3-component, visualizes the classic Auto MPG dataset from the UCI Machine Learning Repository. Users can select which attributes to plot on the X and Y axes, as well as which attribute determines the color of the points, via dropdown menus. The visualization animates transitions smoothly when the selection changes, demonstrating how Redux can manage state changes that drive D3 updates without a React layer.

HHawkinsJM

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

91% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot from D3 v5 visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying car attributes as red circles. Dropdown menus let the user choose which numeric columns map to the X and Y axes. The code builds the scatter plot using `scaleLinear`, `axisLeft`, `axisBottom`, and a custom `scatterPlot` function. Animated transitions, created with `transition().duration(2000).delay()`, smoothly move points between positions when the axis selection changes.

Ssunole896@yahoo.com

90% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays automobile data from the UCI Machine Learning Repository Auto MPG dataset, with dropdown menus letting users select which columns map to the X and Y axes. The visualization uses d3.scaleLinear, d3.axisLeft, and d3.axisBottom to render the axes, while the scatterPlot module animates circles with a transition that delays each point's arrival by 10 milliseconds. SVG rendering with semi-transparent red circles reveals data density, and the dropdownMenu component dynamically rebuilds options on each selection.

Nnicfavfar

90% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying car attributes as circles positioned on x and y axes. Two dropdown menus allow users to select which data columns map to each axis, triggering a transition that animates the circles to their new positions. The visualization uses d3.scaleLinear for scaling, d3.axisLeft and d3.axisBottom for axes, and d3.select for DOM manipulation. A custom dropdownMenu module handles the menus, while the scatterPlot module manages SVG rendering with transitions on circle positions.

BBrandon Lehr

90% match

Loading thumbnail…

Scatter Plot with Menus

BBrandon Lehr

90% match