Scatter Plot with Menus and Color legend

100%

Scatter Plot with Menus and Color legend

✓ Published0🌍 Public

Last edited Oct 9, 2020

Created on Oct 8, 2020

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.

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

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.

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

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

83% match

Loading thumbnail…

Scatter Plot with Menus and Color Legend

Interactive scatter plot of the Iris dataset, implemented with React and D3 v5, visualizes relationships between flower measurements. Users can dynamically select which quantitative attributes to plot on the x and y axes using dropdown menus, while a color legend distinguishes species. The visualization uses D3's scaleLinear, scaleOrdinal, and extent APIs to compute scales, with SVG marks rendered as circles. Data is loaded from a CSV file using D3's csv function. The interface includes custom React components for axes and a color legend, with styling from Poppins fonts and the react-dropdown library.

TTatyana Milanova

82% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes daily temperature readings from Logan Airport weather data collected between 2016 and 2018. Built with React and D3 v5, the visualization renders an SVG chart where users can switch between TMAX and TMIN values for the y-axis using ReactDropdown menus, while the x-axis displays dates scaled with d3.scaleTime. The d3.csv loading pipeline parses the raw data, and d3.extent determines the domain for both linear and time scales. Circle marks include native SVG title tooltips showing formatted dates.

Rrohame

81% match

Loading thumbnail…

Dataviz 9 - Scatter plot with Menus (Interactive Colour Legend)

This interactive scatter plot displays the classic Iris dataset, letting users choose any two attributes for the x- and y-axes via React dropdown menus. The visualization uses an interactive color legend where hovering over a species name dims all other points, highlighting the selected species. Built with React and D3 v5, the chart uses `scaleLinear` and `scaleOrdinal` to map measurements and species to positions and colors, rendering all marks as SVG circles.

RRyAlpha

81% match

Loading thumbnail…

Scatter Plot 4: Menus,Colors, Interactive Legend

This interactive scatter plot visualizes the Iris dataset, letting users choose which attributes appear on the X and Y axes via dropdown menus. A color legend categorizes points by species, and hovering over a legend entry highlights only the matching points while fading others. Built with React and D3 v5, the chart uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` for colors, and SVG rendering for marks and interactive legend controls.

Zzeeeeem

81% match

Loading thumbnail…

React Scatter Plot w/ Menus, Color & Color Legend

This interactive scatter plot explores the classic Iris dataset, using dropdown menus to change which flower measurements map to the X and Y axes. Points are colored by species via a categorical color scale with an accompanying legend. The visualization is built with React and D3 v5, using React hooks for state management and D3 scales like `scaleLinear` and `scaleOrdinal` for positioning and color. It renders as SVG with custom axis and mark components, pulling data from a CSV file.

Hhunsingeruk@gmail.com

81% match