Directly Labelled lines

100%

Directly Labelled lines

✓ Published2🌍 Public

Last edited Jan 19, 2022

Created on Jan 19, 2022

This example demonstrates directly labeled line charts by placing category names at the end of each line instead of using a legend. The chart shows three food items (Apples, Blueberries, Carrots) plotted over a four-month period, with labels positioned using a Voronoi diagram to find the largest empty cell for each line. The code uses D3 v7 for scales, axes, and line generation, along with the geometric library to calculate polygon areas, centroids, and angles for label placement. Data is loaded from a CSV file and rendered as SVG paths with light-colored lines and matching text labels.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Directly Labelled lines

This example demonstrates directly labeled line charts using D3 v7, displaying three data series (Apples, Blueberries, Carrots) over a three-month time span with a shared y-axis scale from 0 to 20. The visualization uses a Voronoi diagram computed via `d3.Delaunay` to automatically position labels near each line’s end, selecting the largest cell polygon for optimal placement. Data is loaded from an external CSV file, parsed into date-value pairs, and rendered as SVG paths with `d3.line`. The coordinates and angles for label placement are calculated using the geometric library’s `polygonArea` and `polygonCentroid` functions.

MMark Lam

89% match

Loading thumbnail…

Fork of Directly Labelled lines

This example demonstrates directly labeled line charts, where each line is identified by a label placed within its corresponding Voronoi cell. It visualizes time-series data across multiple categories, with each line rendered as a distinct colored path and labeled accordingly. The chart uses D3 v7, along with the arraygeous and geometric libraries, to compute Voronoi diagrams and place labels at the largest cell centroid for each line. The data is loaded from a remote CSV file and displayed using SVG rendering.

MMark Lam

87% match

Loading thumbnail…

Fork of Fork of Directly Labelled lines

This example shows time-series data as directly labeled lines, with each series identified by a colored line and a text label positioned near its end. The chart uses a time-scaled x-axis and a linear y-axis, with data loaded from a Google Sheets CSV. It relies on D3 v7 for scales, axes, and line generation, while the arraygeous library flattens data and geometric computes Voronoi cell areas to determine optimal label placement. The SVG output is rendered in a fixed 1000×600 viewport.

MMark Lam

80% match

Loading thumbnail…

Inline Labels

This example demonstrates a multi-series line chart with inline data labels, showing values for Apples and Bananas across several years. Every point is labeled directly on the line, with a white rectangle behind the text to ensure legibility, computed via SVG’s `getBBox` and a small padding. The chart is built with D3 v4 Alpha, using `d3.requestTsv` to load data, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.line` for path generation. The final label in each series appends the series name as a bold `tspan`.

深深度碎片

76% match

Loading thumbnail…

Inline Labels

A multi-series line chart of apple and banana harvest data over seven years uses inline labels placed directly on each data point to show the values. The code, written in D3 v4, positions label text for each point and then calculates a white background rectangle behind it using `getBBox()` to improve legibility. Series names are appended to the final label of each line via a `tspan`, with colors assigned by `d3.scaleCategory10`. Data is loaded from a TSV file using `d3.requestTsv` and parsed with `d3.timeParse`.

KKacieW

75% 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…

Linechart2

This example shows multiple time series as colored lines, with each line representing a distinct category tracked over time on a shared axis. It uses D3 v6 to load a CSV dataset with `d3.csv`, group the data by category with `d3.group`, and render the lines with the `d3.line` generator. The visualization sets up a linear x-axis for years and a y-axis for values, applying a categorical color scale via `d3.scaleOrdinal`. The SVG is appended to a `div` container with explicit margins and dimensions, and axes are drawn using `d3.axisBottom` and `d3.axisLeft`.

Nnicolekevans

75% match

Loading thumbnail…

Labels on multiple lines v7

This example shows two time series lines—one for “close” and one for “open” values—plotted against a date axis, with each line labeled directly at its right‑end point using SVG `<text>` elements. The data is loaded from a local CSV via `d3.csv` and parsed with `d3.timeParse`. The chart is built with D3 v7 primitives: `d3.line` generates the path geometry, `d3.scaleTime` and `d3.scaleLinear` map data to coordinates, and `d3.axisBottom` and `d3.axisLeft` render the axes. Red and steel‑blue strokes distinguish the two lines, and their labels are positioned using the scaled y‑values of the first data point.

Dd3noob

75% match