Skip to main content
SimilarExport ZIP
100%

Scatter Plot with Menus

✓ Published1🌍 Public
SStefanZhang
Last edited Oct 4, 2020
Created on Oct 4, 2020

This interactive scatter plot visualizes the Bike Rental Dataset from UCI ML Repository, allowing users to compare three weather attributes—temperature, humidity, and windspeed—through dropdown menus that control the X and Y axes. The visualization updates dynamically using React's useState hook and the react-dropdown component. D3.js scaleLinear and extent functions handle axis scaling, while pre-rendered SVG circles represent 731 data points. The chart uses separate AxisBottom and AxisLeft components built with D3 ticks, with manual React rendering of axes rather than D3 axis generators.

AI-generated description

A scatter plot with menus of The Bike rental Data set.This data set come from UCI ML Repos Bike Sharing Dataset Data Set. This dataset contains the hourly and daily count of rental bikes between years 2011 and 2012 in Capital bikeshare system with the corresponding weather and seasonal information.

Attributes:

  • temp : Normalized temperature in Celsius.
  • hum: Normalized humidity. The values are divided to 100 (max)
  • windspeed: Normalized wind speed. The values are divided to 67 (max)
MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Menus and Color legend

This interactive scatter plot explores the Bike Sharing Dataset from the UCI ML Repository, showing relationships between normalized temperature, humidity, and wind speed across 731 days. Users select variables for the x- and y-axes via ReactDropdown menus, while weather conditions are encoded by circle color using d3.scaleOrdinal with a custom ColorLegend component. The visualization uses d3.csv to load data, d3.scaleLinear for coordinate mapping, and React hooks to manage state, rendering SVG marks with d3.axis components.

SStefanZhang
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
85% match
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
84% 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
83% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, showing relationships between numeric attributes while allowing users to change the X and Y variables through dropdown menus. The visualization uses React for state management and rendering, with D3.js v5 scales and SVG marks. Axis components generate ticks via scale methods, while circle elements with embedded titles serve as tooltips. The plot retrieves CSV data using d3.csv and scales the axes with scaleLinear.

MMichael Bergerson
83% 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
83% 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
83% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to compare any two numeric attributes by selecting them from dropdown menus for the x- and y-axes. The chart renders data points as SVG circles using React components and D3 scales (scaleLinear, extent) for positioning. Axis components generate ticks and labels, while menu options dynamically update the displayed dimensions. The visualization uses React state to manage selected attributes and d3.csv to load the data, with axis formatting applied via d3.format.

KKevin McMorrow
82% match