Multi-line graph 2 with v5: Colours

100%

Multi-line graph 2 with v5: Colours

✓ Published0🌍 Public

Last edited Nov 28, 2019

Created on Nov 28, 2019

This example displays monthly stock prices for Microsoft, Amazon, and IBM as a multi-line graph, with each line assigned a distinct color from the d3.schemeCategory10 scale. The code uses d3.csv to load the data, d3.nest to group entries by symbol, and d3.line with d3.scaleTime and d3.scaleLinear to render the paths. The SVG canvas is built with D3 v5, and axes are added via d3.axisBottom and d3.axisLeft. It is the second in a series demonstrating multi-line graph techniques.

AI-generated description

This is a derivative of the simple d3.js graph in v4 used as an example in the book D3 Tips and Tricks v5. The stock data was sourced from Mike Bostock's small multiples example.

It is the second graph in a series that is building a multi-line graph that incorperates an automatically developed legend and a system that can toggle the lines off and on as desired.

This version is demonstrating the application of unique colours to the graph lines.

The graph should be taken in context with the text of the book which can be downloaded for free from Leanpub.

mit Licensed

Similar vizzes

Loading thumbnail…

Multi-line graph 2 with v6: Colours

This chart displays monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010 using a multi-line graph, with each company's price trend distinguished by a unique color from the `d3.schemeCategory10` palette. The data is loaded from a CSV file using `d3.csv()`, then parsed and grouped by symbol with `d3.group()`. Lines are drawn as SVG paths via `d3.line()`, with colors assigned dynamically from a `d3.scaleOrdinal` color scale based on each group's index, while axes are rendered using `d3.axisBottom` and `d3.axisLeft`.

Dd3noob

95% match

Loading thumbnail…

Multi-line graph 1 with v5: Lines

This example shows monthly stock prices for Microsoft, Amazon, and IBM as separate lines on a shared time axis. It demonstrates how to group data by symbol using `d3.nest` and render each group as a distinct path with the `d3.line` generator. The SVG output includes axes created with `d3.axisBottom` and `d3.axisLeft`, while scales are defined via `d3.scaleTime` and `d3.scaleLinear`. The stock data originates from Mike Bostock’s small multiples example, and the chart uses d3.v5.

Dd3noob

94% match

Loading thumbnail…

Multi-line graph 3 with v5: Legend

This interactive multi-line chart displays monthly stock prices for Microsoft, Amazon, and IBM from January 2000 to March 2010, with each series distinguished by a color from the Category 10 palette. Built with d3.v5, it renders lines as SVG paths and includes a legend beneath the plot, where each company name is color-coded to match its line. The dataset, sourced from Mike Bostock’s small multiples example, is grouped by symbol using d3.nest(), with scales defined by d3.scaleTime and d3.scaleLinear for the axes.

Dd3noob

94% match

Loading thumbnail…

Multi-line graph 2 with v4: Colours

A multi-line graph displays stock prices over time for Microsoft, Amazon, and IBM, with each company’s series drawn in a distinct color from a categorical palette. The visualization uses the D3 v4 library, parsing dates with `d3.timeParse` and rendering lines as SVG paths via `d3.line`. Data is loaded from a CSV file, grouped by symbol with `d3.nest`, and colored using `d3.scaleOrdinal` with the `d3.schemeCategory10` palette. The chart includes a time-based x-axis and linear y-axis, with the line colors assigned dynamically to distinguish each stock series.

Dd3noob

93% match

Loading thumbnail…

Multi-line graph 2: Colours

This multi-line graph displays stock price changes over time for Microsoft, Amazon, and IBM, with each line distinguished by a unique color. The visualization uses the D3.js library (version 3.5) to parse CSV data, scale time and price ranges, and render SVG paths. It applies a categorical color scale via `d3.scale.category10` and assigns colors dynamically to each symbol group from the nested data. The example focuses solely on demonstrating color differentiation among multiple lines, without legends or interactive toggling.

Dd3noob

93% match

Loading thumbnail…

Multi-line graph 4 with v5: Toggle

This multi-line chart displays monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010, with each series distinguished by a color-coded legend. Clicking a legend label toggles the visibility of its corresponding line, which fades in or out via a transition. Built with D3 v5, the visualization uses `d3.nest()` to group data by symbol, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.line()` for paths. The underlying data comes from a local CSV file.

Dd3noob

92% match

Loading thumbnail…

Multi-line graph 1 with v4: Lines

This example shows a multi-line graph comparing the monthly stock prices of Microsoft, Amazon, and IBM from 2000 to 2010. It uses D3 v4 with SVG rendering, parsing dates with `d3.timeParse` and nesting the CSV data by symbol via `d3.nest` to draw a separate line for each company. The lines are styled with a steel blue stroke, and both axes are generated using `d3.axisBottom` and `d3.axisLeft`. The data originates from a CSV file, and the code demonstrates grouping data to create multiple line series.

Dd3noob

92% match

Loading thumbnail…

Multi-line graph 3 with v5: Legend

This example shows a multi-line chart tracking monthly stock prices for three companies (MSFT, AMZN, IBM) from 2000 to 2010, with a color-coded legend placed below the x-axis. Using D3 v5, it nests the CSV data by symbol, draws each series as an SVG path, and assigns colors via `d3.scaleOrdinal` with `d3.schemeCategory10`. The legend labels are dynamically positioned and colored to match each line, and axes are generated with `d3.axisBottom` and `d3.axisLeft`.

Dd3noob

92% match