KelvinZCH

@KelvinZCH·5 public vizzes

Signal Plot III (zoom)

This interactive line chart visualizes accelerometer readings across x, y, and z axes, with a focus on zooming and panning along the time axis. The chart, rendered as SVG with D3 v4, plots data from a CSV file and extends an earlier version by adding d3.zoom functionality for granular inspection while preserving line highlighting and tooltip interactions. Users can zoom up to 50x, with the transformation rescaling the x-domain and redrawing paths and axes in real time.

Jun 9, 2017

Loading thumbnail…

Wave Packet

This animation shows a red wave packet propagating back and forth across an SVG canvas, wrapped in a semi-transparent blue envelope that traces the pulse’s amplitude. The motion is driven by an explicit time loop with a constant step, reversing direction when the packet reaches the graph’s edge. The code uses d3.line and d3.area with d3.curveBasis to render the signal and envelope paths, while a d3.transition with duration 20 and d3.easeLinear repeatedly restarts itself to update the data. D3 v4 scales map input ranges to screen coordinates.

Jun 9, 2017

Loading thumbnail…

D3 Ternary Plot

A D3 ternary plot displays compositional data with three variables summing to 100%, using an interactive animation. The visualization renders an equilateral triangle grid with major and minor tick lines along the A, B, and C axes, plus labeled tick marks. SVG circles represent data points, which change when a "Data change" button is clicked. The code builds the plot using the D3.js library (version 3.1.6) with raw SVG attributes and transformations, computing point coordinates from the three-part ratios and using `selectAll` and `append` to construct the axes and labels dynamically.

Jun 9, 2017

Loading thumbnail…

Axis Grid

This example showcases a static, abstract axis grid rendered as an SVG. The central visual features a series of grid lines with deliberate, small gaps at their intersections, creating a dotted or segmented pattern that echoes the look of analog signal interference. The code constructs the grid using D3.js scaling and axes, specifically `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`, with tick sizes set to span the full chart width and height. It further annotates the grid with small clusters of black dashes and two alternating rows of dots, all generated procedurally within the script.

Jun 9, 2017

Loading thumbnail…

Document

A real-time waveform plot on a canvas scrolls horizontally as new random data points arrive, creating a dynamic line graph. The animation updates every 100 milliseconds, shifting the drawing origin leftward and clearing the canvas to simulate an endless stream. Built with the HTML5 Canvas API, it uses `setInterval`, `clearRect`, and `translate` to manage the redraw cycle. The line is drawn in red, showing a continuous trace of fluctuating y-values around a baseline.

Jun 6, 2017