Boston Weather Data with Menus

100%

Boston Weather Data with Menus

✓ Published0🌍 Public

Last edited Oct 21, 2019

Created on Oct 3, 2019

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

AI-generated description

A scatter plot of Boston Weather Data Jan 2013 - Apr 2018. This chart allows the user to select the x and y variables from the various weather statistics in the data set to relate and compare.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Menus for Boston Housing Dataset

This interactive scatter plot explores correlations among variables in the Boston Housing Dataset, which includes 14 attributes such as crime rate, room count, and median home value. Users select any two variables from dropdown menus to map to the X and Y axes, while point color encodes proximity to the Charles River, size reflects pupil-teacher ratio, and 35% opacity reveals overlapping points. The visualization uses React with d3.scaleLinear and d3.scaleOrdinal for scaling, SVG for rendering, and fetches CSV data via d3.csv, with tooltips showing median home value.

Yyuzhang21

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

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

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

77% match

Loading thumbnail…

Interactive Scatter Plot for Boston Housing Dataset

This interactive scatter plot explores correlations among variables in the Boston Housing Dataset, with dropdown menus to select X and Y axes. Points encode Charles River proximity via color and pupil-teacher ratio via size. Hovering over legend items filters and highlights matching points by adjusting opacity (20%, 50%, 80%). Built with React and D3 v5, it uses `scaleLinear` for positioning and size, `scaleOrdinal` for color, and SVG rendering. Data is loaded via `d3.csv` from a GitHub-hosted CSV file.

Yyuzhang21

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

76% match

Loading thumbnail…

Dashboard

This dashboard presents a scatterplot comparing pairs of weather variables, such as temperature and humidity, from a dataset that includes daily records. Users select the x and y variables from dropdown menus to change the visualization. The chart is rendered as an SVG using D3 v5, with D3’s scale and axis components generating the grid and tick marks. The surrounding layout uses CSS to position header panels and the plot area.

Eeourm20

75% match

Loading thumbnail…

Weather data with Menu

The visualization displays daily temperature, precipitation, and flight departure delay data from a combined Logan Airport weather dataset. Temperature appears as colored circles, with precipitation intensity mapped through a blue color scale, while departure delays form a yellow line plotted against a secondary y-axis. The visualization uses d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.axisRight to construct the chart, with d3.line generating the delay path. Data is loaded asynchronously via d3.csv from a GitHub gist, and all elements render as SVG within a D3 v5 framework.

Rrohame

75% match