Skip to main content
100%

Line

✓ Published0🌍 Public
Aadchien
Last edited Sep 27, 2017
Created on Sep 26, 2017

This example draws a red stepped line connecting four data points on an SVG canvas. The points are hard-coded as an array of x and y coordinates. The visualization uses the d3.line generator with the d3.curveStepAfter curve function to create the step-like path, and the result is appended as a path element to the SVG. The line is styled with a red stroke and no fill, with the chart area sized to 960 by 500 pixels.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/538661556048b539dc865548df902523'>fresh block</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/6611795eaa19c10067019736f8496614'>fresh block</a>

forked from <a href='http://bl.ocks.org/adchien/'>adchien</a>'s block: <a href='http://bl.ocks.org/adchien/6eb8fb8a1f21422d222bf3206e05a2c3'>Line</a>

mit Licensed

Similar vizzes

Loading thumbnail…

D3 Page Template

This example demonstrates a simple SVG line chart template using D3.js, where a red polyline connects six data points across a 500x400 canvas. The visualization shows a basic yet effective pattern for plotting series data, with points positioned at varying y-coordinates to create a descending then ascending trend. The code relies on D3 v7 loaded via CDN and constructs the line using an SVG path element with the `d` attribute, specifying coordinates through a path string. The `stroke` and `stroke-width` attributes control the visual styling, while `fill="none"` keeps the area under the curve transparent. This serves as a minimal starting template for building more complex D3 visualizations in plain HTML.

RRona Xu
81% match
Loading thumbnail…

Pseudo Line Chart with D3

This example uses D3 to draw a pseudo line chart, where thick, rounded strokes connect a series of six data points with distinct x and y coordinates on an SVG canvas. The line is rendered using the `d3.line` generator, with a stroke width of 41 pixels and round line caps and joins, transforming a simple path into a bold, graphic element. The chart emphasizes geometric form over traditional axis labels or scales, showcasing how D3's line API can create stylized visualizations from raw coordinate data.

Pperez.h89@gmail.com
80% match
Loading thumbnail…

D3 v4 Line Chart

This example shows a basic line chart built with D3 v4, plotting a randomly generated dataset of 21 points against a linear x-axis and y-axis. The visualization uses an SVG canvas and follows the standard margin convention, with the line rendered via the `d3.line()` generator and a `curveMonotoneX` smoothing curve. Axis components are created using `d3.axisBottom` and `d3.axisLeft`, while circles representing each datapoint are appended using the `enter().append()` method. The chart demonstrates core D3 data-binding and scale APIs within a minimal, self-contained HTML file.

663anp3ca
78% match
Loading thumbnail…

Line Chart

This line chart shows a jagged polyline connecting five points across a white canvas, with a single black stroke of 20-pixel width tracing an upward and downward path. The chart is rendered as static SVG markup directly in the HTML, using a `path` element with explicit coordinates and a `rect` background. No JavaScript libraries are involved; the example relies on raw SVG geometry and minimal CSS for text styling, with an unused `index.js` that merely logs a message.

Iibaird6@gatech.edu
78% match
Loading thumbnail…

Line SVG Fundamentals

This example demonstrates the fundamental structure of an SVG line chart, plotting a single jagged path that moves across a fixed 620-by-288 coordinate system. The line is drawn using raw SVG markup inside an HTML page, with the `path` element’s `d` attribute defining six coordinate pairs connected by straight segments and a bold `stroke-width` of 11 pixels. No external libraries are used; the rendering relies entirely on native SVG syntax within the `index.html` file, styled by minimal CSS for text presentation.

Ssubratanp
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
77% match
Loading thumbnail…

Data Visualisation with D3 - Pseudo Charts (Line)

This example shows a minimal line chart built with raw SVG, not a traditional D3.js construction. The visualization plots five data points connected by a thick black path, where the stroke width and rounded line joins visually emphasize the connecting segments. The code uses an inline SVG element with a `path` that defines the line’s geometry via `M` and `L` commands. Although the title mentions D3, no D3 library is actually loaded; instead, the implementation relies solely on native SVG properties like `stroke`, `stroke-width`, and `stroke-linejoin` to create the appearance of a line chart. The data is hardcoded as coordinates in the path definition.

Vvivienho22
77% match
Loading thumbnail…

Connecting Two Points with a Line in D3.js

Three straight lines are drawn on an SVG plot, each connecting two points from a hard-coded JavaScript array of x/y coordinates. The visualization demonstrates how D3.js v3 scales data coordinates into screen positions using `d3.scale.linear` and renders the lines as SVG `path` elements with `d3.svg.line`. Axes generated with `d3.svg.axis` frame the 100-by-100 unit domain, and the lines are styled via CSS with a custom stroke color.

Aackuser
77% match