Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Directly Labelled lines

✓ Published0🌍 Public
MMark Lam
Last edited Jan 20, 2022
Created on Jan 19, 2022

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.

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
92% match
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
88% 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
80% match
Loading thumbnail…

Fork of dataset

This example displays a time-series line chart of temperature readings from San Francisco, using an SVG rendering with D3.js v5. It demonstrates data loading via `d3.csv`, scales with `scaleTime` and `scaleLinear`, and axes created with `axisBottom` and `axisLeft`. The chart shows a single path generated by `d3.line`, with a grid of tick lines and labeled axes. The code also imports local ES6 modules and uses `d3.select` to manage the SVG, illustrating key D3 workflows in a VizHub environment.

RRomersims
77% match
Loading thumbnail…

Fork of Time series - labels

This example visualizes temporal data as rectangular marks on a time-based scatterplot, encoding registration and validity periods along the x- and y-axes. Hovering a rectangle displays a tooltip with its associated label value. Built with D3.js (version 7.8.1), the visualization uses `scaleTime`, `axisLeft`, `axisBottom`, and pointer events to map date ranges to screen coordinates. Input data is parsed from ISO date strings into JavaScript `Date` objects. The SVG rendering fills the browser viewport, with rectangles styled via CSS and a custom tooltip appended to the DOM.

BBart van Pelt
77% match
Loading thumbnail…

Fork of Fork of Line Chart

This example shows a line chart of sales over time, with axes labeled "Year" and "Sales," rendered as an SVG inside an HTML page. The visualization uses d3.scaleTime and d3.scaleLinear to map data to pixel coordinates, d3.axisBottom and d3.axisLeft for tick marks and labels, and d3.line to generate the red path. Data is loaded as CSV from a GitHub gist, with years parsed via d3.timeParse. The code also references a React starter, though the displayed version runs with vanilla JavaScript and D3 v5.

MMar-99
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
77% 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
76% match