Scatter Plot with Menus

100%

Scatter Plot with Menus

✓ Published0🌍 Public

Last edited Oct 21, 2019

Created on Oct 2, 2019

Forked from Polished 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.

AI-generated description

A scatter plot of Logan Airport Weather 2016-2018.

MIT Licensed

Similar vizzes

Loading thumbnail…

Logan Weather data with Interactive Color Legend

A scatter plot of weather and flight-delay data for Logan Airport from 2016-2018 visualizes the relationship between date, maximum temperature (TMAX), and average flight departure delay (DEP_DELAY). Interactive color legend circles for each year filter and highlight corresponding points when hovered, while unselected points fade to 20% opacity. The visualization uses React with D3 scales (`d3.scaleTime`, `d3.scaleLinear`, `d3.scaleOrdinal`) for axes, color encoding, and point sizing, rendering SVG circles with `circle` elements and tooltips via SVG `<title>` elements. Data is loaded as CSV from a GitHub gist.

Rrohame

82% match

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

82% match

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

81% match

Loading thumbnail…

Scatter Plot with Menus

A scatter plot displays air quality measurements, with dropdown menus allowing users to select which pollutant attribute (pollutant, PM10, ozone, or PM2.5) drives the x- and y-axes. Built with React and D3 v5, the visualization uses `scaleLinear`, `extent`, and `max` from d3 to map data to SVG coordinates. Axes are rendered by custom React components, and circles include native SVG `<title>` tooltips. Data loads asynchronously from a CSV using d3's `csv` method.

CChase Hall

81% match

Loading thumbnail…

Boston Weather Data with Menus

A scatter plot of daily Boston weather observations shows how users can select any two weather attributes from the dataset—such as temperature, humidity, wind speed, or snowfall—to compare and discover relationships. Two dropdown menus control which attribute maps to the x- and y-axes, updating the D3 linear scales and plotted circles accordingly. The chart uses React with D3 v5, reading the CSV data via D3’s `csv` function and rendering the plot as an SVG with custom axis and mark components.

JJacklyn Turner

80% match

Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot visualizes USA flights on-time performance, showing relationships between days of the month and delay metrics. Users can select different y-axis attributes (DEP_DELAY, DEP_DEL15, ARR_DELAY, ARR_DEL15) via dropdown menus built with ReactDropdown. The visualization uses React with D3 scales (scaleTime, scaleLinear) to map data into SVG marks, with custom axis components rendering tick marks. Data is loaded from a CSV file using d3.csv, with each point rendered as a circle containing a title tooltip.

XXinting Yao

80% match

Loading thumbnail…

Scatter Plot with Time Series

A scatter plot displays temperature readings against timestamps from a San Francisco weekly weather dataset, using circular marks positioned by time and linear temperature scales. Built with React and D3 v6, the visualization renders as SVG with reusable axis components and tooltips showing formatted day labels. Data loads via CSV from a remote gist, with `scaleTime` and `scaleLinear` handling the mapping, while `d3.timeFormat` formats tick labels.

AAndres de la Garza

80% match

Loading thumbnail…

Scatter Plot with Time

This scatter plot visualizes temperature readings over time, with each circle representing a measurement plotted along a time-based x-axis and a linear temperature y-axis. Built with React and D3 v5, the visualization uses `scaleTime` and `scaleLinear` to map data from a CSV file into SVG circles. The chart includes labeled axes with formatted weekday tick marks on the x-axis, and hovering over a circle reveals the exact time through SVG `<title>` tooltips.

MMarco Malvicini

80% match