100%

learning d3 lines

✓ Published0🌍 Public

Last edited Sep 26, 2015

Created on Sep 26, 2015

A text area accepts typed integer pairs, and each line of input becomes a point in a two-dimensional path rendered as an SVG line graph on a dark background. The visualization updates live on every keystroke, using D3’s `d3.svg.line` to map coordinates and appending a `path` element to the SVG canvas. The code also displays the raw SVG `d` attribute of the generated path in a paragraph below, making the underlying vector data visible. Data is parsed from whitespace-separated integers in the textarea, and the path is redrawn from scratch on each input event.

AI-generated description

Playing with lines

Type two integers per line in the text area, and a line will be drawn on the right.

Similar vizzes

Loading thumbnail…

Learning D3

This example demonstrates a minimal SVG visualization composed of three horizontal lines, each drawn as a black path across a 960-by-500 viewport. The code uses static path elements with explicit coordinates, showing how basic shapes can be rendered without additional data or interaction. It incorporates an inline SVG in HTML with CSS and JavaScript, serving as a starting point for learning D3. The visualization relies solely on predefined path data, not on D3’s data-binding or scale APIs.

Bbetemaujkardi

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

Jjons288

71% match

Loading thumbnail…

Lines

Jjons288

71% match

Loading thumbnail…

Something with D3

This example uses D3’s `line` generator to draw 40 random black polylines, each with seven vertices, on an SVG canvas sized to the browser window. A radial gradient defined in `<defs>` fills the background with a smooth transition from grey to dark grey. The code generates coordinates using `Math.random()` and appends each path with a 2-pixel stroke.

IIgorGorin00

71% match

Loading thumbnail…

text path example

This example demonstrates how to render text along curved SVG paths using D3 v4. Two dashed, tomato-colored paths are drawn on a light gray canvas, and each path serves as the baseline for a line of text. The text elements are anchored at the midpoint of their respective paths using `text-anchor: middle` and `startOffset: 50%`, with steel-blue fill from the CSS. The visualization shows how D3’s `d3.line()` with `curveBasis` can generate smooth, arbitrary paths, and how SVG's `<textPath>` reuses those paths to align text along the curves, illustrating a simple technique for creating curved typography.

EEE2dev

71% match

Loading thumbnail…

text example

This example demonstrates basic SVG text placement and shape rendering using D3 v4. It positions three text elements with different anchor alignments (start, middle, end) along a horizontal line, showing how the `dx` and `text-anchor` attributes affect text positioning. A polyline traces a jagged path across the canvas, and a circular dot with a lime-green stroke and Indian Red fill uses CSS hover effects to expand its radius and stroke width. The visualization uses D3's selection methods to append elements to an SVG container, with styling applied through inline attributes and CSS classes.

335degrees

71% match

Loading thumbnail…

D3 Path Examples

This example demonstrates how D3.js can draw and animate SVG paths from simple coordinate datasets, including diagonal and horizontal lines, multipoint curves, triangles, and rectangles. The code defines multiple data arrays and uses the `d3.svg.line()` API with various interpolation types to render static shapes, while separate functions animate paths by transitioning the `d` attribute using `transition().duration(6000)`. One animation elongates a horizontal line by mutating the dataset’s endpoint, and another shifts the line’s origin point, both relying on D3’s built-in transition system. The page sets its frame height to 1800 pixels to accommodate the multiple SVG canvases.

GGuerino1

70% match