Skip to main content
SimilarExport ZIP
100%

Experiment Weather Graphs

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

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.

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 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
81% match
Loading thumbnail…

Experiment Weather Test 2

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.

Rrxgran
80% 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
74% 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
72% match
Loading thumbnail…

Fork of Linechart

This example demonstrates an interactive line chart of San Francisco weather data, allowing users to select variables for both the X and Y axes from dropdown menus and toggle between line and area chart display modes. The visualization renders temperature and precipitation measurements over time using an SVG canvas. Built with React and D3 v5, it employs `scaleTime` and `scaleLinear` for axis scaling, `line()` with `curveBasis` for path generation, and `axisBottom`/`axisLeft` for grid lines. A mouse-tracking tooltip displays the precise values at the cursor position.

Nnickjtay
72% 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
72% match
Loading thumbnail…

linechart d3 and React

This example shows a line chart of daily temperature readings over a week, plotting temperature on the y-axis against time on the x-axis. The visualization is built with React components that render SVG elements, using d3.scaleTime and d3.scaleLinear for axes and data mapping. The code loads CSV data via d3.csv, applies time parsing and numeric conversion, and creates circles as marks with tooltips showing the day. Axes are custom components using d3.ticks and timeFormat for labels.

SShane Carey
72% match
Loading thumbnail…

Linechart Version 4

This interactive visualization explores San Francisco weather data, allowing users to switch between line and area charts for different variable combinations. Built with React and D3 v5, it features animated transitions between chart types, dropdown menus for selecting axes and grouping, and a slider to adjust point opacity. The implementation uses D3 scales, axes, and SVG paths with transitions, while a custom tooltip provides detailed values on mouseover. A color legend appears when data is grouped by category.

SSchmittYannic
71% match