Skip to main content
SimilarExport ZIP
100%

Scatter Plot with Menus

✓ Published0🌍 Public
TThanaporn-sk
Last edited Mar 22, 2017
Created on Mar 22, 2017

This interactive scatter plot visualizes automobile data from the `auto-mpg.csv` dataset, where users select the X, Y, and color dimensions via menus. The visualization uses the `d3-component` library to wrap D3 v4 components, paired with Redux for state management, enabling smooth animated transitions between different data mappings. The rendering includes linear and ordinal scales, axes with animated opacity and tick updates, and circle elements that animate when data changes.

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.

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>

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

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

Scatter Plot with Menus

This interactive scatter plot displays automobile data from the auto-mpg dataset, letting users compare any two numeric columns by selecting them from dropdown menus. The visualization updates with animated transitions as new axes and circles are chosen. Built with D3 v5, it uses `scaleLinear`, `axisBottom`, `axisLeft`, and `selectAll` with data joins to render SVG elements, while custom dropdown menus trigger re-renders of the chart. The scatter plot includes labeled axes with grid lines and semi-transparent circles representing individual cars.

Aarths-glitch
92% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays automobile data from the auto-mpg dataset, letting users compare any two numeric columns by selecting them from dropdown menus. The visualization updates with animated transitions as new axes and circles are chosen. Built with D3 v5, it uses `scaleLinear`, `axisBottom`, `axisLeft`, and `selectAll` with data joins to render SVG elements, while custom dropdown menus trigger re-renders of the chart. The scatter plot includes labeled axes with grid lines and semi-transparent circles representing individual cars.

Aarths-glitch
92% 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
91% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays automobile data from the auto-mpg dataset, with dropdown menus allowing users to select which numeric columns appear on the x and y axes. Built with D3 v5, the visualization uses reusable functions for the scatter plot and dropdown menus, with SVG rendering and animated circle transitions. The axis labels update dynamically as selections change, and the plot encodes data points as semi-transparent red circles with a 2-second stagger animation.

Ssteveaigbe
91% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot allows users to explore the relationships between different numeric attributes of cars from the auto-mpg dataset by selecting which columns appear on the x- and y-axes through dropdown menus. The visualization, built with D3 v5, uses scaleLinear, extent, axisBottom, and axisLeft to render the axes and data points as semi-transparent red circles. When a menu selection changes, the scatter plot updates, animating the circles to their new positions over two seconds using a transition with per-element delays.

Jjlspangl
91% match