Fork of Directly Labelled lines

100%

Fork of Directly Labelled lines

✓ Published0🌍 Public

Last edited Jan 19, 2022

Created on Jan 19, 2022

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.

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, 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

90% match

Loading thumbnail…

Directly Labelled lines

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.

MMark Lam

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

88% 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`.

深深度碎片

78% match

Loading thumbnail…

Fork of Labels

This example shows a donut chart of five apple-related values with labeled slices. Each label is positioned outside the arc and connected to its corresponding slice via a thin pointer line ending in a circular marker. The implementation uses D3 v6’s `d3.pie` and `d3.arc` to compute slice geometry, with labels placed using trigonometric calculations based on each slice’s mid-angle. SVG markers are defined for both a triangle arrowhead (demonstrated in the README) and the circle used on the pointers, while `d3.scaleOrdinal` with a red-to-blue interpolator colors the slices.

PPiotr Paszek

77% match

Loading thumbnail…

Fork of Fork of Fork of Create a face with d3.js!

This example shows a simple line chart of four data points using D3.js. The chart maps time to value, with an SVG path drawn in steel blue to connect the points. The code explicitly sets up linear scales for both axes, uses `d3.axisBottom` and `d3.axisLeft` to render tick marks, and creates the line with `d3.line()`. The data is hardcoded as an array of objects, and the visualization is rendered as SVG inside a dedicated container, following the classic margin convention for layout.

Nnagasai.mandalapu@gmail.com

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

76% match

Loading thumbnail…

Fork of D3 Starter

This visualization demonstrates a stacked area chart displaying the quantities of apples, bananas, and oranges over three months in 2018. The chart uses D3 v7 with SVG rendering, employing `d3.stack`, `d3.area`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.scaleOrdinal` to generate and color the layered paths. Data is hardcoded as an array of objects containing month dates and fruit counts. The result shows three distinct colored areas representing each fruit’s contribution to the total count over time, with red, yellow, and orange fills.

JJacobRozak

76% match