HistogramPractice Corpus Christi & SFO 2015-2020 DailyClimateData with Menus & Legend

Corpus Christi & SFO 2015-2020 DailyClimateData with Menus & Legend

This interactive scatterplot lets users explore daily climate data from two NOAA stations, Corpus Christi and San Francisco, between 2015 and 2020. A dropdown menu switches between five wind-related variables plotted on the y-axis. Points are colored by station using a D3 ordinal scale, and hovering over the legend highlights that station's points while fading the others. Built with React and D3 v6, the visualization renders as SVG with axes generated by `AxisBottom` and `AxisLeft`.

93% match

SFO 2015-2020 DailyClimateData with Menus & Legend

This interactive scatterplot visualizes daily climate measurements at San Francisco International Airport from 2015 to 2020. A dropdown menu lets users switch which weather attribute—such as wind speed, humidity, or temperature deviation—is plotted on the y-axis against time. A color legend identifies data points by station, with hover states that fade non-matching points for comparison. Built with React and D3 v6, the SVG visualization uses `scaleTime` and `scaleLinear` for axes, `scaleOrdinal` for station colors, and fetches its CSV data from a remote gist via a custom `useData` hook.

89% match

Fork of SFO & Oceanside NOAA Summary of the Month 1946-2020 with Menus & Legend

This interactive scatterplot visualizes NOAA monthly climate data from 1946 to 2020 for SFO and Oceanside stations. Users can switch between different temperature metrics using a dropdown menu, while the interactive color legend highlights one station at a time. Built with React and D3 v6, the visualization uses `scaleTime`, `scaleLinear`, and `scaleOrdinal` for axes and coloring. Data is loaded via `d3.csv` from a GitHub gist, with SVG circles rendered through reusable React components like Marks and ColorLegend.

KKhatera Alizada

82% match

Fork of SFO & Oceanside NOAA Summary of the Month 1946-2020 with Menus & Legend

This interactive scatterplot visualizes monthly NOAA climate data from SFO and Oceanside stations between 1946 and 2020, plotting temperature measurements against time. Users can switch the y-axis attribute through a React dropdown menu, while hovering over the color legend highlights data points from a specific station. The visualization uses React with D3 v6 scales (scaleTime, scaleLinear, scaleOrdinal) to render SVG circles, with interactive brushing effects applied through opacity changes when legend items are hovered.

Eethanjones-git

SFO NOAA Summary of the Month 1955-2020 with Menus

This interactive scatterplot visualizes monthly NOAA climate summaries for San Francisco from 1955 to 2020. A dropdown menu allows users to switch the y-axis between five meteorological attributes, including average wind speed and temperature extremes. The React-based application uses d3.scaleTime and d3.scaleLinear to map the CSV data, rendering each month as a semi-transparent SVG circle. Datasets are loaded asynchronously via d3.csv, with axes and ticks generated by custom React components.

SFO & Oceanside NOAA Summary of the Month 1946-2020 with Menus & Legend

This interactive scatterplot displays monthly NOAA climate summaries for SFO and Oceanside stations from 1946 to 2020, with a dropdown menu to switch between temperature attributes on the y-axis. The visualization uses React with D3 v6 scales and axes, rendering SVG circles colored by station through a ordinal color scale. An interactive legend allows hovering to highlight selected station data by adjusting circle opacity, while tooltips reveal exact temperature values on hover.

Fork of SFO & Oceanside NOAA Summary of the Month 1946-2020 with Menus & Legend

This interactive scatterplot visualizes NOAA climate data from two Bay Area stations (SFO and Oceanside) from 1946 to 2020, plotting temperature metrics over time. A dropdown menu lets users switch between four temperature attributes for the y-axis, while a color legend distinguishes the two stations and supports hover highlighting to fade non-selected data. Built with React and D3 v6, the SVG visualization uses d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal for scales, with custom React components for axes, marks, and legend rendering.

EEngineerRajeev

Corpus Christi and SFO Coordinate Plots

This interactive parallel coordinates plot compares daily climate measurements from two California locations, Corpus Christi and SFO, across multiple dimensions. The visualization uses D3.js v3 to render each monitoring station as an SVG path, colored by its variety label. Users can drag dimension axes horizontally to reorder them, with grey background lines providing context. The code employs d3.scale.ordinal for axis positioning, d3.svg.axis for labeled ticks, and d3.behavior.drag to enable smooth axis repositioning.