Viz - Line - Redraw

100%

Viz - Line - Redraw

✓ Published0🌍 Public

Last edited Jan 14, 2018

Created on Jan 14, 2018

This example demonstrates a dynamic line chart where data points are randomly regenerated every two seconds, causing the line to redraw with a new path. The visualization uses the viz.js library’s `viz.line()` API, with data bound to an SVG `<g>` element via D3 v4’s `selection.call()`. Each update resets the `valueScale` to recompute the y-axis domain, while the line’s stroke is styled as a steel-blue path. The animation is driven by `setInterval()`, which maps the original keys to new random values, showcasing live re-rendering of an SVG line in response to changing data.

AI-generated description

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Viz - Line - Transition

A line chart continually updates every two seconds, displaying ten points with random values connected by a steelblue line. The visualization first shows a single transition of the line and its points, then repeatedly re-draws the chart with new data. Built with D3 v4 and the viz.js extension, the example calls `viz.line()`, sets a 1000-millisecond duration, and uses `line.transition()` to animate the changes. The SVG render uses a `g` element, and the `randomData` function generates the varied point positions.

NNPashaP

87% match

Loading thumbnail…

Viz - Line - unfold

The visualization demonstrates how a line chart can animate from a flat baseline into its final form, revealing underlying data patterns through an unfolding motion. Random data points, some intentionally null (10%), are encoded along the x-axis and drawn as a steelblue path once their values are introduced. The process uses the `viz.line` library with a custom `defined` function to filter nulls, and `transition()` to animate the y-scale from an initial constant value. Rendered as SVG with D3.v4 and viz.js, it highlights how dynamic value updates create a temporal narrative for static data.

NNPashaP

84% match

Loading thumbnail…

Viz - Point - Transition

This example displays 200 points that are randomly repositioned on a two-dimensional plane every two seconds. Each point shifts to a new location based on freshly generated random x and y coordinates, demonstrating a transition between data states. The visualization uses the `viz.point()` API from the Viz.js library, building on D3 v4, to render the points as SVG shapes with a steelblue fill and stroke. The `point.transition()` method animates the movement of each point to its updated position, while the code explicitly resets the key and value scales before each update to recompute the coordinate mappings.

NNPashaP

78% match

Loading thumbnail…

Viz - Point - drawPoints

This example renders 200 randomly generated data points as circles on an SVG canvas. Each point is colored either steelblue or red based on the parity of its key value, with a semi-transparent fill and matching stroke. The visualization is built using the `viz.point()` API, which is configured with a custom `drawPoints` function that appends circle elements to the SVG group. The code relies on D3 v4's `d3.range` and `d3.select` for data generation and DOM selection, while the rendering itself uses standard SVG `circle` elements positioned by the x and y coordinates provided by the point layout system.

NNPashaP

78% match

Loading thumbnail…

Viz - Line - valueScale

A simple line chart maps four data points from an array of key-value pairs, with a logarithmic scale controlling the vertical axis. The line is drawn as an SVG path using the `viz.line()` API from the Viz.js library, while `d3.scaleLog()` maps values between 2 and 1000 to pixel coordinates. The example demonstrates how to combine Viz’s line generator with D3 v4 scales, rendering the result inside an SVG `<g>` element with a steelblue stroke.

NNPashaP

77% match

Loading thumbnail…

Viz - Point - Default

This example displays a basic scatterplot of 20 random points, each represented by a steelblue circle without an outline. The visualization is generated by calling `viz.point()` on a selected SVG group element, with data supplied by a custom `randomData()` function that maps each index to a random value. The chart renders as an SVG using D3 v4 and the Viz.js library, where the point layer’s styling is defined via CSS targeting the `.point circle` selector. The code demonstrates a minimal setup for creating a point chart with dynamic, arbitrary data.

NNPashaP

76% match

Loading thumbnail…

animated line

An animated line chart displays the changing popularity of a fictional topic over time, with an update button that regenerates the data to show the line redrawing itself with a smooth sinusoid easing. Built with D3.js (v7.8.5), the chart uses `scaleLinear` for axes, `line` for the path generator, and the `transition` API with `easeSin` to animate the stroke-dashoffset over 2.5 seconds. The SVG rendering includes axes and a steelblue path, with fake data defined in JavaScript rather than from an external source.

NNeeraj Kumar

76% match

Loading thumbnail…

d3 v4 realtime line chart

A real-time line chart appends a new random data point every ten milliseconds, streaming it across a 500-pixel SVG canvas. The visualization displays both a raw path and a smoothed cardinal-curve version, with the x-axis domain shifting as new values arrive. The code uses d3.scaleLinear, d3.line, d3.axisBottom, and d3.curveCardinal from d3.v4, with d3.transition and d3.easeLinear animating the axis and path translations to create the continuous scrolling effect.

KKevinGutowski

75% match