Page Title

100%

✓ Published1🌍 Public

Last edited Nov 6, 2019

Created on Nov 6, 2019

This example displays a multi-line chart tracking a single name's frequency across years, with each line representing a data group. The chart maps years on the x-axis and numeric counts on the y-axis, coloring each line distinctly using a categorical scale. Built with D3 v5, it uses `d3.nest()` to group data by name, `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.line()` to generate the path geometry. The data comes from an inline array of yearly name statistics, styled with CSS that removes page margins.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Page Title

This example shows a multi-line chart plotting name frequency over time, with yearly data points connected to reveal temporal trends. The visualization uses D3 v5 with SVG rendering, mapping years to the x-axis and counts to the y-axis via `d3.scaleLinear`. It applies `d3.axisBottom` and `d3.axisLeft` for axes, and groups data with `d3.nest` before drawing paths with `d3.line`. A categorical color scale (`d3.scaleOrdinal`) distinguishes each name series.

Iinu231

93% match

Loading thumbnail…

Untitled

This chart displays multiple lines tracking the change in a numeric value over time, with each line representing a different named group. It uses d3.csv to load the dataset from a GitHub URL, then d3.nest groups rows by name to create a series per category. Each series is drawn as a separate path using d3.line, with a d3.scaleOrdinal assigning colored strokes from a categorical palette. An SVG is rendered into the page, with d3.axisBottom and d3.axisLeft providing the x and y scales for the time-based and numeric axes.

Hhshs1115

81% match

Loading thumbnail…

Untitled

This example shows a small multiple chart with one line chart per data group, where each group represents a category from a CSV file and displays its numeric trend over time. The visualization is built with D3.js v4 and renders SVG graphics. The code uses `d3.nest()` to group data by category, `d3.line()` to draw each line, and `d3.axisBottom` and `d3.axisLeft` for axes. Colors are assigned via `d3.scaleOrdinal`, and each small chart is labeled with its group name.

AAmr Eldemerdash

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

Line Chart with Multiple Lines

This line chart tracks projected delivery dates against report years for multiple social security number categories over time. The visualization uses D3 v5 with scales, axes, and a line generator with curveBasis smoothing to render each category as a distinct colored path. Data is loaded from a CSV file and grouped using d3.nest. The chart includes a custom color legend component and axis labels, with temperature data sourced from the Data Canvas – Sense Your City project.

SSean Moore

75% match

Loading thumbnail…

Selecting a Year on a line chart

This example shows a multi-line chart tracking earthquake counts across four U.S. regions (Midwest, Northeast, South, and West) from 2010 to 2015. The code uses D3 v5 with SVG rendering and animation, loading data from a CSV file via `d3.csv`. It employs `d3.nest()` to aggregate counts by year and region, then draws separate colored lines using `d3.line()` and `d3.scaleTime()`/`d3.scaleLinear()`. A legend and axis labels are added, with the visualization built using the margin convention and React as the framework.

NNeepaB

74% match

Loading thumbnail…

V5 Reusable Examples - Nested data, Chart (line) series DDM - Example 5.3

A nested multi-line chart presents monthly sales data for three fruits across four years, with a drop-down menu filtering the display by fruit type. The visualization uses D3.js v5’s `d3.nest()` to organize the CSV data hierarchically, then renders separate lines per year via `d3.line` and `d3.area` generators. Axis scales are built with `d3.scaleTime()` and `d3.scaleLinear()`, while `d3.axisBottom` and `d3.axisLeft` draw the ticks. Animated transitions update the chart when the menu selection changes, applying color mapping through `d3.scaleOrdinal()` for fruit categories. The reusable chart structure follows the ProD3 pattern within a vanilla HTML implementation.

JJimMaltby

74% match

Loading thumbnail…

Line Chart with Multiples Lines - By Year

The visualization displays personal body weight measurements over time, segmented into individual annual series that are overlaid on a single chart. Each year's data forms a separate multi-hued line, allowing year-over-year comparison of weight fluctuations. Built with D3 v5, the code uses `scaleTime` and `scaleLinear` for the axes, `nest()` to group entries by person and year, and `line()` with `curveBasis` to generate smooth paths. The data is parsed from a CSV and rendered as SVG, with a categorical color legend for each year.

RRubens

74% match