connected dots (curves)

100%

connected dots (curves)

✓ Published0🌍 Public

Last edited Dec 14, 2016

Created on Dec 14, 2016

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

connect the dots

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.

EEranM6

81% match

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

78% match

Loading thumbnail…

linecross labels

This example shows how to connect labeled points to a series of evenly spaced endpoints using angled and straight line segments. Colored circles on the left link to larger target circles on the right through two distinct line types, with the bend point shifting between a shared midpoint and a point based on the source x-coordinate depending on the item’s index. The visualization renders three SVG charts side-by-side at different widths, using d3.scaleLinear for vertical positioning and d3-selection-multi’s attrs method to set line and circle properties. The dataset is a hardcoded array of seven objects with x, y, and color values.

PPatrick Wojda

74% 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

73% match

Loading thumbnail…

Data Folowing a Path

A collection of pink circles animates along a fixed black path, each circle traveling from the path’s start to its end in sequence. The visualization shows how data points can follow a predefined geometric route, with each circle representing a discrete step. The code uses D3 v5’s `scaleLinear` to map indices to path lengths, and `transition.attrTween` with `getPointAtLength` to move each circle along the SVG path. The animation uses `d3.easeCircleInOut` for smooth acceleration and deceleration, with the path defined by a complex Bézier string.

HHalian Vilela

73% match

Loading thumbnail…

Untitled

A line chart displays 21 randomly generated data points as a smoothed orange curve, with dots marking each value along the x-axis. The visualization uses D3’s `d3.line` generator with `curveMonotoneX` for interpolation, while `d3.scaleLinear` maps the data index and random y-values to pixel coordinates. SVG circles are appended for each point, and mouseover events log the bound datum to the console, though no tooltip or interactive highlight is implemented. The chart includes x and y axes via `d3.axisBottom` and `d3.axisLeft`.

Hhaiyangwhy1015

72% match

Loading thumbnail…

path with d3 - 1

A simple SVG line chart demonstrates D3's `d3.line()` path generator. Five coordinate pairs define a polyline rendered as a thick black path across a 960 by 500 canvas. A green circle with a CSS hover animation (class `pulseCircle`) sits at the first data point, scaling from zero to four times its size over two seconds using keyframes. The example shows D3 v7 appending SVG elements and generating path data from an array of points, with the circle's interactive pulse effect driven by vanilla CSS rather than D3 transitions.

NNita

72% match

Loading thumbnail…

overlapping circles

Four orange circles and one steel-blue circle overlap at the center of an SVG canvas. The visualization demonstrates grouping and repositioning: the four identical orange circles are detected as an overlapping cluster and spread horizontally above the original join point, connected by black lines. The lone steel-blue circle remains in place. Built with D3 v4, the code uses SVG circle elements and manual selection via `d3.selectAll`, with grouping logic based on matching `cx` and `cy` attributes.

PPatrick Wojda

72% match