multiple lines

100%

multiple lines

✓ Published0🌍 Public

Last edited Oct 31, 2018

Created on Oct 31, 2018

This example visualizes monthly net income trends across three years (2015–2017) as multiple overlaid line series. The SVG chart uses a linear x-scale for months (January through August) and a linear y-scale for totalNet values, with each year’s data drawn as a separate line. The visualization is rendered with D3 v4, using axes and scales to map the temporal and quantitative dimensions, and the design includes a subtle box shadow and labeled axis styling. The data is loaded from an external JSON file, and the chart is generated with animation support, making it easy to compare yearly patterns side by side.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/areologist/'>areologist</a>'s block: <a href='http://bl.ocks.org/areologist/13e050e51cae8f05ce24d09ef8335e9c'>stock data (line)</a>

forked from <a href='http://bl.ocks.org/areologist/'>areologist</a>'s block: <a href='http://bl.ocks.org/areologist/16c4b36fc192a8f7943a2e1af6ad44e0'>multiple lines</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Line Chart

This line chart shows monthly value trends across multiple years, with a smooth monotone curve plotted over time. The visualization uses D3.js v7, specifically the `d3.scaleTime` and `d3.scaleLinear` axes, and renders the line via `d3.line` with a `d3.curveMonotoneX` curve. Data is loaded from a CSV file using `d3.csv`, and the chart outputs to an SVG canvas with labeled axes and tick marks. The styling adheres to BBC-like color themes and font choices, though the core plot focuses on the steelblue line and its temporal variation.

LLikhitaMudagereShivaraj@my.unt.edu

79% match

Loading thumbnail…

simple line chart from dataset

A simple SVG line chart plots monthly values from an 11-point JSON dataset, with a black polyline, labeled x-axis dates, and a large final-value annotation. The visualization adds interactivity through gray circular markers at each data point; hovering a circle turns it red, reveals its value, and displays a vertical dashed guide line. The chart uses D3 v4’s `d3.scaleTime`, `d3.scaleLinear`, and `d3.line`, with mouseover and mouseout events controlling opacity and stroke transitions. Animation effects appear via `transition().duration(300)` when changing marker color and opacity.

GGaret005

79% match

Loading thumbnail…

multiple line chart

This example shows multiple time-series lines plotted on the same axes, with each line representing a different stock symbol over several months. The chart displays price trends for various symbols, allowing easy visual comparison of their trajectories. Using D3 v4 with SVG rendering, the code loads external CSV data via `d3.text` and `d3.dsvFormat`, parses dates with `d3.timeParse`, and groups the data by symbol using `d3.nest()`. It then applies `d3.scaleTime` and `d3.scaleLinear` for the x and y axes, and draws each line with `d3.line`, while adding axis labels and a legend via text elements.

EEssohanamKouyou

79% match

Loading thumbnail…

multiple line chart

This multi-line chart visualizes stock data over time, plotting a series of data points connected by lines and displaying corresponding values. Built with D3.js v4, the visualization uses SVG for rendering and includes animated transitions on mouseover—circles change color and trigger a tooltip plus a dashed guide line. The chart employs `d3.scaleTime` for the x-axis, `d3.scaleLinear` for the y-axis, and processes data loaded from a JSON file with `d3.json` and `d3.dsvFormat` parsing.

EElisaDnr

79% match

Loading thumbnail…

simple line chart from dataset

This example shows a simple line chart tracking monthly values from January to July 2016, with each data point labeled by its month and the final value displayed in large text at the chart’s edge. The visualization highlights the overall upward trend and the final peak of 50. The code uses D3 v4 to parse dates with `d3.timeParse` and format them via `d3.timeFormat`, scales the data with `d3.scaleTime` and `d3.scaleLinear`, and draws the line using a `d3.line` path. The data comes from an external `dataset.json` file, and the chart is rendered as an SVG.

EEssohanamKouyou

79% match

Loading thumbnail…

simple line chart from dataset

This example shows a simple line chart of monthly values from a JSON dataset, with interactive circles and date labels. The chart maps categorical month names to an ordinal x-scale and numeric values to a linear y-scale, rendering the line as an SVG path. Hovering over a circle or date label triggers animated transitions, enlarging the element, displaying a tooltip with the value, and drawing a temporary dashed vertical line via d3.svg.line and d3.select.append. The visualization uses D3 v3, SVG for rendering, and transitions for mouseover effects.

RRaphael-Diana

78% match

Loading thumbnail…

simple line chart from dataset

This line chart visualizes monthly values from a small JSON dataset, plotting twelve data points from January to December 2016. The chart uses D3 v3 with SVG rendering, employing an ordinal x-scale for categories, a linear y-scale for values, and a dashed line path to connect the points. Interactive grey circles respond to mouseover by turning red and revealing hidden value labels and vertical dashed guides, which are initially styled white to remain invisible. The chart also includes monospace date labels beneath the x-axis.

MMelanieSalignat

78% match

Loading thumbnail…

Multiple line graph in v4

This example displays two time-series lines, showing "close" and "open" stock prices over a month, with circular markers at each data point. Built with D3 v4, it maps dates on a time scale and values on a linear scale, then appends SVG paths for each line and circles for the observances. The chart uses `d3.timeParse`, `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, `d3.axisBottom`, and `d3.axisLeft`, and loads its comma-separated data from a local CSV file.

GGerardoFurtado

78% match