Spark line

100%

✓ Published0🌍 Public

Last edited Aug 3, 2014

Created on Aug 3, 2014

This example renders a stream of numbers as a row of sparkline glyphs, using Unicode block characters whose vertical position encodes each value relative to the dataset’s minimum and maximum. Written in Haskell, it processes input from standard input or command-line arguments via `System.Environment.getArgs` and `Data.ByteString.Char8`. The `buildInOnePass` function uses a lazy circular fold over the list to compute min/max and generate UTF-8 bytes for the eight possible block levels, requiring only a single pass over the data.

AI-generated description

Similar vizzes

Loading thumbnail…

Animated Sparkline Chart with d3

This example shows a single sparkline chart that animates its line drawing from left to right over two seconds. The chart plots a small dataset of 23 numeric values using an SVG path with a natural curve, rendered at 200 by 30 pixels. The animation is achieved by first measuring the path’s total length, then using `stroke-dasharray` and `stroke-dashoffset` with a D3 transition and linear easing. The code uses `d3.line`, `d3.scaleLinear`, and `d3.select` within a React framework, drawing to SVG.

111abhisharma

58% match

Loading thumbnail…

fresh block

This example displays a simple line chart of six numeric values from a static array, rendered as a single green path on a blank SVG canvas. The visualization uses D3 v4 to create linear scales for the x- and y-axes, with the x domain set to the indices of the data points and the y domain scaled from zero to the maximum value. An SVG path is drawn using `d3.line()` with coordinates mapped through those scales. The chart does not include axes, labels, or gridlines, showing only the raw trend line.

KKacieW

58% match

Loading thumbnail…

Streamgraph

A streamgraph displays twenty layers of synthetic time-series data, using a wiggle offset to minimize visual overlap. The graphic animates between two independently generated datasets, smoothly interpolating the stacked area paths over 2.5 seconds. Built with D3 v4, the example uses `d3.stack`, `d3.area`, `d3.scaleLinear`, and `d3.interpolateCool` for color. A button triggers the transition, re-binding the data and applying a transition on the `d` attribute of SVG path elements.

Mmbostock

58% match

Loading thumbnail…

Gist 130517

This visualization displays a sparse, grid-based dataset from a gist by DylanFM, using a fixed-size coordinate system (values such as 1056, 64, 1152, and 4608) to plot points in a two-dimensional space. The rendering relies on D3’s `d3.forceSimulation` for positioning and likely `d3.geoPath` or a similar path generator to draw shapes, though the specific API is not explicitly shown. The data, provided as a plain text file, is read and mapped directly to screen coordinates without additional transformation, creating a minimal scatter-like plot. The example emphasizes raw data plotting with minimal abstraction, focusing on the direct conversion of numeric inputs into visual marks.

DDylanFM

57% match

Loading thumbnail…

Streamgraph

A streamgraph displays 20 layers of synthetic time-series data, each rendered as a filled area with a smooth, wiggle-based baseline. The visualization alternates between two precomputed datasets when the "Update" button is clicked, triggering a six-second animated transition. The code uses the D3 v3 stack layout with the "wiggle" offset, an area generator, and linear scales for x, y, and color. Layers are vertically offset with a translate transform for added padding.

CCurran Kelleher

57% match

Loading thumbnail…

Gist bb8fddc4a5fc3cc60c99

A line chart maps a small array of ten numbers to an SVG path, showing how the values fluctuate across a linear sequence. The visualization uses a red, unbroken polyline to emphasize the shape of the data, with the y-axis scaled from the data’s minimum to maximum and the x-axis evenly spaced by index. The code creates the chart using d3.scale.linear for both axes and d3.svg.line to generate the path, which is appended to an SVG container via d3.select and datum. The fixed width and height of 500 pixels define the plotting area, while the stroke and fill styles come from a CSS class.

CCaged

57% match

Loading thumbnail…

Streams

Five random data series render as smooth, horizontally stacked stream-like ribbons across an SVG canvas. Each of the 90 values per series is drawn as a filled area path with a black outline, using a basis interpolation to create fluid curves. The visualization uses D3 v3 with `d3.svg.area`, linear and ordinal scales for positioning, and a predefined color palette. Each series is vertically offset via a translate transform, producing a layered composition that highlights variations in the randomly generated data.

Mmbostock

57% match

Loading thumbnail…

Streamgraph

A streamgraph displays twenty stacked layers, each with two hundred samples, generated from synthetic data using a wiggle-offset stack. The visualization animates between two different datasets, smoothly transitioning the area paths over 2.5 seconds when the Update button is clicked. Built with d3.v4, it uses d3.stack, d3.area, and d3.scaleLinear, with a custom zoom that pans horizontally and a color scale from d3.interpolateCool. The random data is created via a bump function, and the rendering is pure SVG.

GGerardoFurtado

56% match