Scatter Plot with Menus

100%

Scatter Plot with Menus

✓ Published0🌍 Public

Last edited Dec 17, 2017

Created on Dec 17, 2017

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.

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</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

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

94% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot allows users to explore relationships between different car attributes from an auto-mpg dataset. Two dropdown menus let viewers select which columns to plot on the x and y axes for comparison. Built with D3.v5 and React, the visualization uses SVG elements and a transition animation to smoothly reposition data points when the selection changes. The code leverages D3 APIs like `scaleLinear`, `axisBottom`, and `axisLeft` for the axes.

Jjeelong

93% match

Loading thumbnail…

Scatter Plot with Menus X Y Only Simple Dots

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.

CCurran Kelleher

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

91% 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…

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying car attributes as circles. Users select which columns map to the X and Y axes using D3.js dropdown menus, with circles animating to new positions via `transition().duration()` on axis changes. The visualization uses D3 v5's `scaleLinear`, `axisBottom`, and `axisLeft` for scaling and axes, with the React framework managing the bubble chart component. Data loading is handled through `d3.csv`, and the animated transitions show each circle moving to its updated coordinates over two seconds.

Vvassil-one

91% match

Loading thumbnail…

scatterplot with menues

This interactive scatterplot lets users explore the classic “Auto MPG” dataset by choosing which numeric columns appear on the x- and y-axes via two dropdown menus. Built with React, d3.v5, and SVG, it renders animated circles that transition to new positions when the selected columns change. The code uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data, while a custom `dropdownMenu` component handles the select inputs and triggers re-renders through callbacks.

SSchmittYannic

91% match