Skip to main content
SimilarExport ZIP
100%

Line Chart with Multiple Lines

✓ Published2🌍 Public
SSean Moore
Last edited Nov 13, 2019
Created on Nov 12, 2019

This line chart displays projected delivery dates by report year for multiple Social Security Number (SSN) groups, with each line representing a distinct category color-coded using `d3.scaleOrdinal` and `schemeCategory10`. The chart includes labeled axes, a title, and a color legend rendered as SVG circles and text. It uses `d3.line` with `curveBasis` smoothing, `d3.nest` to group data by SSN, and `d3.axisBottom` and `d3.axisLeft` for ticks. Data comes from a CSV of modified SSN records, parsed with `d3.csv` and converted to JavaScript `Date` objects.

AI-generated description

This line chart shows one week of temperature (in degrees Celcius) in cities around the world. The data comes from Data Canvas - Sense Your City.

MIT Licensed

Similar vizzes

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
91% match
Loading thumbnail…

Line Chart with Multiple Lines

This example visualizes projected delivery dates for Social Security numbers across multiple report years, using a smooth, curved line to show the relationship between report year and projected delivery time. The chart employs time-scaled axes on both dimensions, with a maroon line path rendered in SVG. Built with D3 v5, it uses d3.csv to load external data, d3.scaleTime for temporal scaling, d3.line with d3.curveBasis for the smoothed path, and d3.axisBottom and d3.axisLeft for labeled axes with grid ticks.

SSean Moore
87% match
Loading thumbnail…

Block IV Projections

A multi-line chart displays budget projections for Block IV SSN over time, with each line representing a distinct SSN and its delivery estimates. The chart uses D3's `scaleTime` for both axes, `line` with `curveBasis` for smoothing, and `nest` to group data by SSN, colored via `schemeCategory10`. A custom `colorLegend` function renders the legend. The data, sourced from a CSV file, is parsed into `Date` objects for the x and y axes, showing delivery dates against budget years.

SSean Moore
79% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays multi-year budget estimates for Block IV SSN submarines, with each line representing a different submarine class and its projected delivery dates. The visualization uses D3 v5 with SVG rendering, employing `scaleTime` for both axes, `scaleOrdinal` for color mapping, and a `line` generator with `curveBasis` smoothing. A color legend is built using a custom `colorLegend` function, while the data is sourced from Data Canvas - Sense Your City and processed via D3's `nest` and `descending` sorting to order the lines.

SSean Moore
78% 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…

Block IV Projections

This visualization displays budget estimates for Block IV SSNs across fiscal years, using a line chart. Time-based axes for both year and delivery date plot data points from the "blockiv_ssn.csv" dataset. The code renders the chart with SVG, using `scaleTime` and `scaleOrdinal` for scaling, `axisBottom` and `axisLeft` for axes, and a custom `colorLegend` loop to differentiate SSNs by color. Lines are generated via `line` with `curveBasis`, and groups are sorted by descending last delivery year.

SSean Moore
75% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays the count of a phenomenon across U.S. states, grouped by region (South, West, Midwest, Northeast) over five years (2011–2015), with each region represented by a distinct colored line. The visualization uses D3 v5’s `nest()` and `rollup()` to aggregate state-level data from a CSV file, then renders paths with `d3.line()`. It employs `scaleTime`, `scaleLinear`, and `scaleOrdinal` with `schemeCategory10` for axes and color encoding, plus a custom `colorLegend` component for region labels. SVG rendering includes axis labels and a title, with data sourced from the Data Canvas - Sense Your City project.

Sshehryar-hashir
74% match
Loading thumbnail…

Line Chart with Multiple Lines

This example displays suicide numbers across countries over time, with each country’s yearly data shown as a separate colored line and a matching color legend on the right. Using d3.csv to load the dataset, d3.scaleTime and d3.scaleLinear map years and suicide counts, while d3.nest groups records by country and sorts them by the last value. The SVG rendering includes axes, gridlines, and a title, though the line paths are commented out, so only colored circles appear at data points.

Wwishcsdev
74% match