Skip to main content
SimilarExport ZIP
100%

Experiment Weather Test 2

✓ Published0🌍 Public
Rrxgran
Last edited Mar 20, 2022
Created on Mar 20, 2022
Forked from HTML Starter

A dropdown menu lets the viewer select among seven weather variables, and a line chart displays the selected time series across 20 time steps. The visualization pulls CSV data from a remote GitHub gist using `d3.csv` and parses a column of nested, bracket-delimited values with custom JavaScript string manipulation. Updates to the chart are animated with `transition().duration(1000)`, and the line color changes via an ordinal `d3.scaleOrdinal` with `d3.schemeSet2`. The SVG rendering uses standard `d3.line` and `d3.axisBottom`/`d3.axisLeft` for axes.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Experiment Weather Graphs

This example presents experiment weather data as a grid of weather-condition line graphs alongside corresponding heatmaps, each showing scribe readings across a spatial layout. Users navigate between experiments using menus, with data loaded from a CSV file. The visualization uses D3 scales, axes, and transitions to render SVG line plots and heatmaps, with interactive menu components filtering the displayed records.

Rrxgran
80% match
Loading thumbnail…

Experiment View Long

This example displays long-term coating experiment data for the CRS-2 test series, using a heatmap to visualize scribe ratings over time and line graphs to show corresponding weather conditions like humidity and temperature. The view combines multiple SVG charts, with a color scale from white to red indicating rating severity and numeric labels on each cell. The code imports D3 v6 functions like `scaleLinear`, `line`, `axisLeft`, and `transition` to render animated updates. Data is loaded from a remote CSV and parsed into structured arrays for the heatmap and weather plots.

Rrxgran
77% match
Loading thumbnail…

test1

This example uses D3 v5 to render an interactive multi-series line chart comparing city temperatures in both Fahrenheit and Celsius. A dropdown menu toggles the unit of measurement, triggering animated transitions of the lines and axes. The chart displays daily temperature data across three cities with a time-based x-axis. Hovering reveals a vertical guide with circles and labels, showing exact values for each city. The code uses `d3.line` with `d3.curveCardinal` for smoothed lines, `d3.csv` for data loading, `d3.scaleTime` for the date scale, and D3’s selection and transition APIs for interactivity, all rendered as SVG.

JJoseph D. Galloway II
76% match
Loading thumbnail…

ICE-7 Reusable Scatter Plot with Menu

This interactive scatter plot displays daily wind measurements from multiple weather stations over time, with each station represented by a distinct color in an ordinal color scale. A dropdown menu lets viewers switch the y-axis among five different wind attributes, including sustained wind speed and peak wind direction. Hovering over a color legend item triggers React’s state management to fade non-selected stations by 80%, isolating their data points for comparison. Built with React and SVG, the visualization uses D3 v6 utilities like `scaleLinear`, `scaleTime`, and `scaleOrdinal` for axes and coloring, while the `react-dropdown` library powers the menu, all rendered from CSV data fetched via D3’s `csv` function.

Bbharathsivakumar07
75% match
Loading thumbnail…

Untitled

This example shows a multi-series line chart with a dropdown menu to switch between different data groups, highlighting one series at a time. The code uses d3.csv to load a dataset from a GitHub repository, then creates an SVG chart with d3.scaleLinear for axes and a d3.scaleOrdinal color scale based on d3.schemeSet2. Selecting a new group triggers the update function, which animates a transition on the path’s d attribute over 1000ms, changing its stroke color accordingly. The visualization is built with d3.v4 and includes an HTML select element populated with group names.

CCrossZeigler
74% match
Loading thumbnail…

Untitled

This example displays a multi-series line chart where each line represents a category over time. A dropdown menu allows the viewer to select a specific group, which triggers a smooth transition that updates the displayed path to show that group’s data. The visualization uses D3 v6, reading CSV data from a remote URL, with an ordinal color scale and linear axes for years and numeric values. The chart is rendered as an SVG and the update is animated via a one-second transition on the path’s `d` attribute.

AAdvait Maduskar
74% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This interactive scatter plot visualizes weather data from a CSV file, allowing viewers to cycle through humidity, precipitation, and pressure on the x-axis while temperature remains on the y-axis. Using D3.js version 6, the chart employs `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` to render axes, with a `setInterval` driving automatic transitions between attributes every two seconds. Circles are drawn via `selection.selectAll` and `join` with a fixed radius, while margins and dimensions adapt to the window size. The Iris dataset is not shown here; instead, weather observations are sourced from a gist-hosted CSV, and styling uses the Share Tech font.

Hharichandanamone21@gmail.com
73% match
Loading thumbnail…

ICE-7 Reusable Scatter Plot with Menu (Dhanusree Kodali)

This interactive scatter plot visualizes daily climate data, allowing users to explore relationships between date and various wind measurements (such as average, peak, and sustained wind speed/direction) through a dropdown menu that changes the y-axis attribute. The plot uses SVG rendering with React components and D3 scales (including `scaleTime`, `scaleLinear`, and `scaleOrdinal`), displaying colored circles that represent different weather stations. A color legend provides interactive filtering, where hovering over a station name highlights only that station's data points while fading others, using D3's `scaleOrdinal` for categorical color mapping and custom React components for axes and marks. The visualization demonstrates a reusable architecture by separating axis, legend, mark, and dropdown functionality into modular JavaScript files.

DDhanusree Kodali
73% match