Skip to main content
SimilarExport ZIP
100%

Line Tension

✓ Published0🌍 Public
Mmbostock
Last edited Feb 9, 2016
Created on Jun 9, 2011

Ten interpolated curves pass through a shared set of nine data points read from a TSV file, each drawn with a different tension parameter from 2/3 to 1 and colored from brown to steelblue. The visualization demonstrates the effect of tension on the cardinal spline interpolation provided by `d3.svg.line` with its `tension` method. The axes are generated using `d3.svg.axis` with linear scales on a 960×500 SVG canvas; each data point’s position is also marked by a hollow white circle.

AI-generated description
gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Line Tension

The visualization shows how varying line tension affects the shape of a cardinal spline passing through a fixed set of ten data points, with tension values mapped from brown to steelblue. Each curve is rendered as a separate SVG path using `d3.svg.line` with its `tension` method set to a different value, while white circles mark the original data coordinates. The axes are generated with `d3.svg.axis`, and the data is loaded from a TSV file using `d3.tsv`. The tension range is explicitly limited to 2/3 to 1 due to a bug in D3 v3.

深深度碎片
94% match
Loading thumbnail…

New Splines!

Eleven points along a two-dimensional curve are rendered as small filled circles on a canvas. Four differently colored splines pass through the same set of points, comparing a cubic interpolation against several Catmull-Rom variants with tension values of 0.0, 0.5, and 1.0. The example uses d3-shape’s line generator with the canvas context, d3-scale’s category10 color scale, and draws axes and points directly through Canvas 2D API calls.

Mmbostock
72% 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
71% 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
71% match
Loading thumbnail…

Segmented Lines

Four time series are drawn as thick segmented lines, each segment colored green, gray, or red based on its slope via a linear color scale from 0 to π. Circles mark every data point, while the y-axis is scaled to the maximum of all series, loaded from a local JSON file. The code uses d3.svg.line with segment arrays generated by a helper function, and applies stroke styling through d3.scale.linear and Math.atan2 on segment endpoints.

Mmbostock
71% match
Loading thumbnail…

Lines

This example presents a set of black lines in two groups: a series of horizontal lines near the top of the SVG canvas and a group of tilted lines at the bottom. The arrangement is inspired by a figure from Tamara Munzner’s "Visualization Analysis and Design," emphasizing spatial encoding of data points. Built with D3 v5, it uses `d3.select`, `d3.range`, and `d3.scaleLinear` to position elements, with all marks rendered as SVG `line` elements.

Jjons288
71% match
Loading thumbnail…

Lines

This example presents a set of black lines in two groups: a series of horizontal lines near the top of the SVG canvas and a group of tilted lines at the bottom. The arrangement is inspired by a figure from Tamara Munzner’s "Visualization Analysis and Design," emphasizing spatial encoding of data points. Built with D3 v5, it uses `d3.select`, `d3.range`, and `d3.scaleLinear` to position elements, with all marks rendered as SVG `line` elements.

Jjons288
71% match
Loading thumbnail…

Lines

This example presents a set of black lines in two groups: a series of horizontal lines near the top of the SVG canvas and a group of tilted lines at the bottom. The arrangement is inspired by a figure from Tamara Munzner’s "Visualization Analysis and Design," emphasizing spatial encoding of data points. Built with D3 v5, it uses `d3.select`, `d3.range`, and `d3.scaleLinear` to position elements, with all marks rendered as SVG `line` elements.

Jjons288
71% match