Skip to main content
SimilarExport ZIP
100%

linecross labels

✓ Published0🌍 Public
PPatrick Wojda
Last edited Mar 20, 2019
Created on Oct 3, 2016

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

d3.js line chart with multiple lines and points

This example shows two multi-series line charts overlaid in a single SVG, with each line distinguished by its own path and circular data points. It demonstrates how to map linear scales to x- and y-axes, render gridlines and tick labels, and add interactive hover effects that enlarge points on mouseover. The code uses D3.js v3 APIs including `d3.svg.line()`, `d3.scale.linear()`, and selection methods like `append`, `attr`, and `on`. The data is a hardcoded array of two numeric arrays, with axes and points generated programmatically from the same scales.

CCaged
79% match
Loading thumbnail…

Untitled

This example demonstrates how to connect multiple pairs of points with straight lines in a Cartesian coordinate system using D3.js v3. The visualization renders three separate line segments, each defined by two endpoints, on an SVG canvas with labeled x and y axes. The code uses d3.svg.line() to generate the path data, d3.scale.linear() for coordinate mapping, and d3.svg.axis() to draw the axes. Data is stored as an array of coordinate pairs in JavaScript, and each line is appended as an SVG path element with a distinct stroke color.

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

Labels on multiple lines v4

This example shows a multi-line chart with two time-series lines for stock open and close prices, with labels placed directly at the end of each line. The labels “Open” and “Close” are positioned manually using SVG text elements, colored to match their respective lines (red and steelblue), and anchored to the final data points. The visualization uses d3.csv to load the data, d3.timeParse to parse dates, and d3.line with d3.scaleTime and d3.scaleLinear to render the paths in an SVG canvas.

Dd3noob
75% match
Loading thumbnail…

Inline Labels

This example demonstrates a multi-series line chart where each data point is labeled directly on the line, with the final point of each series showing the series name in bold. The chart reads from a TSV file using `d3.requestTsv` and `d3.timeParse` for dates. The code uses `d3.line` to draw the paths, scales `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.scaleCategory10` for colors. For each label, `element.getBBox` computes the text bounding box, and a white rectangle is drawn behind it with padding for legibility.

Mmbostock
75% 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
75% 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
74% match
Loading thumbnail…

simple line chart from dataset _ Final version

This example shows a monthly time series of twelve data points from a local dataset, with a single black polyline connecting values, labeled x-axis dates, and a large final-value annotation. It also adds light-gray circular markers that turn red on hover, displaying the current value and a dashed vertical guide line. Built with D3 v4, it uses `d3.scaleTime` for the date axis, `d3.scaleLinear` for values, `d3.line` to generate the path, and SVG elements rendered via the code. The dataset is loaded with `d3.json` from a static file, and all interaction logic resides in `mouseover` and `mouseout` event handlers.

EElisaDnr
74% match