Skip to main content
SimilarExport ZIP
100%

connect the dots

✓ Published0🌍 Public
EEranM6
Last edited Aug 27, 2018
Created on Aug 27, 2018

The visualization connects a series of data points—each representing a timestamp, price, and percentage change—with animated SVG paths to form a line chart. Using D3 v4, the dots are linked sequentially as the data streams in, creating a "connect the dots" effect that highlights the temporal progression of the values. The chart renders with smooth transitions, emphasizing the flow of the data over time.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

connect the dots

This animated scatterplot visualizes a time series of 50 data points, connecting them in chronological order with a smooth line. Each dot represents a moment in time, with its vertical position encoding the "rate" value while the x-axis maps temporal progression. The visualization uses D3 v4's SVG rendering to draw a continuously-updating path that links each point to the next, creating the sense of drawing a connected line through the data. As time advances, the line extends to incorporate new points while earlier segments remain visible, producing a dynamic "connect-the-dots" effect. The animation highlights the temporal flow and changing values across the dataset, with the line's movement revealing patterns in the rate changes over time. The visualization uses a minimal, uncluttered aesthetic that focuses attention on the trajectory of the data points.

EEranM6
91% match
Loading thumbnail…

connected dots (curves)

Four orange dots on a steelblue line trace a stepwise path. The line connects the four points in sequence, using a step-after curve that creates right-angle turns between each point. The chart is built with D3 v4, using the `d3.line()` and `d3.curveStepAfter` functions to generate the path, while circles are added with SVG `circle` elements. The data is a small hardcoded array of x/y coordinates, and the visualization relies on D3’s path and shape modules.

PPatrick Wojda
81% match
Loading thumbnail…

D3 interactive line chart 2

This interactive line chart displays time-series data points as circles connected by a line, with a large value label for the most recent entry. Hovering over a circle turns it red, reveals a tooltip with the exact value, and draws a dashed vertical guide line down to the x-axis. Built with D3 v4, the visualization uses `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` for the path, and animated `transition` calls on mouseover and mouseout events. The x-axis labels are rendered as text elements, and the data is loaded via `d3.json`.

CCtuauden
77% match
Loading thumbnail…

Fork of Moving Dots - getting fancy

This example visualizes a dynamic wave pattern of 40 circles and connecting lines that oscillate vertically and change size over time. The circles and lines move in a sine-wave formation, with their positions and widths updating continuously to create a flowing, animated effect. The code uses D3.js version 6.6.1 with the `select`, `range`, and `join` APIs to efficiently update SVG elements, and runs an animation loop at 60 frames per second via `setInterval`. The chart renders entirely in SVG with no external data source, purely generated from mathematical functions.

Llt_vandegrift@live.com
76% match
Loading thumbnail…

Daily Tracks

This example shows a small line chart of four data points, with each point represented by a black dot and connected by vertical lines that extend upward to a second set of dots, suggesting a range or comparison between two values. The visualization uses D3.js v4 to parse dates, scale time and linear axes, and render SVG elements including circles, lines, and rectangles. The chart plots closing values and their 1.1× multiples, with rectangles bridging the two series. The axes are formatted with rotated date labels, and the data is hardcoded as an inline array, not loaded from an external file.

AAnsonT
76% match
Loading thumbnail…

Moving Dots

Animated dots move in a wave-like pattern across an SVG canvas, with their count oscillating between five and fifteen over time. The visualization uses D3’s `select`, `range`, and data joins with `join()` to efficiently create, update, and remove circle elements each frame. A `setInterval` at 60 frames per second updates a time variable that drives both the vertical sine-wave motion and the changing number of dots, rendering in React with D3 version 6. The background is blank, focusing solely on the dynamic positioning of the circles.

Llt_vandegrift@live.com
75% 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
74% 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
74% match