rxgran

@rxgran·4 public vizzes

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.

Apr 12, 2022

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.

Mar 25, 2022

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.

Mar 20, 2022

Loading thumbnail…

Experiment View Test

This visualization displays a large dataset’s basic statistics—file size in kilobytes, row count, and column count—as plain text in a large preformatted block. It loads a CSV file containing weed pricing data and weather information from a GitHub gist using the `d3.csv` method, then formats the output with `d3.csvFormat` to calculate the size. The code demonstrates multiple approaches to fetching and parsing the data, with the primary method using D3 v5’s asynchronous promise-based `d3.csv` function.

Mar 19, 2022