Experiment View Long

100%

Experiment View Long

✓ Published0🌍 Public

Last edited Apr 12, 2022

Created on Mar 24, 2022

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.

AI-generated description

A demonstration of how to start using D3 version 6.

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

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

77% match

Loading thumbnail…

D3 color experiments

This example showcases color scales by displaying a series of color swatches as text labels, each filled with a distinct color derived from a linear scale spanning green, purple, and teal. It also renders the minimum temperature from a San Francisco weekly temperature CSV dataset. Built with React and D3 v7, the visualization uses `d3.scaleLinear` for color mapping, `d3.csv` for data loading, and SVG text elements to render the colors against a black background.

JJames Rhodes

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

71% match

Loading thumbnail…

Svelte + D3: Line (II)

The chart displays daily Atlantic sea surface temperatures from 1982 to 2024, with each year drawn as its own line. Recent years are highlighted—2024 in blue and 2023 in pink—while older years appear as faint white strokes, emphasizing the temperature trajectory over time. Built with Svelte, it uses D3's `csv` and `autoType` to load data, `scaleLinear`, `extent`, and `line` with `curveCatmullRom` for the paths, and `groups` to structure lines by year. The SVG renders against a dark gradient background, with an overlay legend identifying the color coding.

MMatthias Stahl

70% match

Loading thumbnail…

3Q_Module-6_Assgnmt

A stacked dashboard of two SVG charts visualizes 150 days of simulated environmental data from a CSV file. The top multi-series line chart maps temperature, humidity, and air-quality index over time using `d3.line` and `d3.scaleOrdinal` for series colors, with axes and a legend. Below, a combined chart pairs bars for the air-quality index (`d3.scaleBand`, rects) with a temperature line over the same x-axis. Both charts share a common day axis, built with D3 v7 scales, axes, and shape primitives.

RRuthvik Bairaboina

70% match

Loading thumbnail…

pseudo viz for climate & crop yield over time

This pseudo visualization displays trends in crop yield, temperature, and precipitation over time using three overlaid line series colored green, red, and blue. It uses D3’s `scaleLinear` for both axes, the `line` generator for each series, and `select` to manage the SVG container. Data comes from a static array of six annual records, with axis labels and a legend added via custom helper functions from the `@wyy-47/axislabels` package. The chart demonstrates how multiple quantitative variables can be compared on a shared time scale.

YYiyi Wu

70% match

Loading thumbnail…

Heatmap with D3 Overlay

This example displays a heatmap of 100 data points across 10 variables and 10 groups, with each cell colored on a teal-to-green gradient using d3.scaleLinear. A large white "D3" text overlay is positioned at the center of the SVG canvas, creating a visual watermark effect. The React component loads CSV data via d3.csv and renders the chart using d3.scaleBand for axes and SVG rect elements. The overlay text is drawn directly within the same SVG group, demonstrating how to combine data-driven visualizations with static annotations in a React-D3 workflow.

LLewis Ward

70% match