S-trunk

@S-trunk·5 public vizzes

tstat2

This interactive D3.js visualization simulates the behavior of temperature-limited blocks over a 1,500-second run. It displays two sets of rectangular blocks, each with a color gradient based on temperature values, alongside axes for temperature and position. When the user clicks the "Run" button, the blocks transition from an initial dataset to a second dataset, smoothly animating their colors and positions over ten seconds. The visualization uses d3.scaleLinear for axes and color mapping, d3.interpolateWarm for the color palette, and d3.transition with an easeLinear timing function to animate changes. A timer text element simultaneously counts up from 1 to 1,500 using a tween.

Sep 21, 2017

Loading thumbnail…

Tstat

This visualization plots temperature over time for several sensor locations in a heating system, using red, green, and gray lines to distinguish normal, limit, and full trajectory segments. It shows how temperatures rise linearly from different starting points, with the Tstat element reaching a fixed target range while others continue past it. The implementation uses D3 v4 with SVG rendering, d3.scaleLinear for axes and positioning, d3.axisBottom/Left for gridlines, and animation triggered by buttons. Data is embedded as an array of objects with slope, start, and threshold values.

Sep 9, 2017

Loading thumbnail…

Simple line graph with v4

A simple SVG line graph plots the closing price of a stock over time, using data from a local CSV file ordered by date. It demonstrates basic D3 v4 setup with margins, time and linear scales, and an axis. The chart uses `d3.line`, `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`. Style and stroke are defined via CSS. The example serves as a minimal starting point for building more complex visualizations.

Jun 29, 2017

Loading thumbnail…

D3: Adding values and elements to a chart

A button click triggers animated transitions for a set of circles plotted against linear x- and y-axes. The chart initially displays points from a fixed data array, then swaps their coordinates and colors in two sequential transitions, cycling in a loop. Built with D3 v4, it uses SVG circles, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`, with chained `transition` calls and delays to orchestrate the repeating visual update.

Jun 26, 2017

Loading thumbnail…

D3: Adding values and elements to a chart

This chart displays a dataset of twenty-one coordinate pairs plotted as circles on an SVG canvas. It shows how values and visual elements can be dynamically added and transformed. The example uses D3 v4, implementing scales via `d3.scaleLinear`, axes drawn with `d3.axisBottom` and `d3.axisLeft`, and circles created through `.enter()`. A button triggers a repeating transition animation: the circles swap their x and y coordinates—changing from green to blue and back—using D3 `.transition()`, `.duration()`, and `.delay()` for a sequential, looping effect.

Jun 25, 2017