Line Chart with Two Lines

100%

Line Chart with Two Lines

✓ Published0🌍 Public

Last edited May 9, 2015

Created on May 9, 2015

This line chart displays annual average U.S. prices for regular gasoline and diesel from 1995 to 2014, with the two series overlaid to compare their trends. It shows that both fuels follow a similar upward trajectory with peaks around 2012–2013 before a slight decline, and that diesel prices generally exceed regular gas prices. The visualization uses D3.js v3 with SVG rendering, employing d3.svg.line and d3.time.scale for the x-axis, while loading the two CSV datasets and merging them to set scale domains. The data comes from the U.S. Energy Information Administration.

AI-generated description

Similar vizzes

Loading thumbnail…

GasPrice

The visualization displays diesel fuel prices from multiple gas stations over one week, using a single line chart with a time-scaled x-axis and a linear price y-axis. The SVG rendering uses D3 v7 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and a `line` generator with `curveBasis` smoothing. Data is loaded via `d3.csv`, with dates parsed and prices converted to numbers, and the chart includes gridlines and labeled axes.

Ssvsiefert

75% match

Loading thumbnail…

Line Chart

This line chart visualizes US auto sales from 2005 to 2022, plotting airline prices over time. The data is loaded from a CSV file using d3.csv, then rendered as an SVG path generated by d3.line. It uses d3.scaleTime and d3.scaleLinear to map the x and y dimensions, with axes created via d3.axisBottom and d3.axisLeft. The chart includes labeled axes and a title, with gridlines drawn through tick size extensions. The line path is styled with a red stroke.

AAkrutiKhurana2103

72% match

Loading thumbnail…

Real oil prices annotated line chart

This line chart visualizes monthly real imported crude oil prices from 1974 onward, using data from the U.S. Energy Information Administration. The line is drawn in steelblue, with a hover interaction that reveals a focus circle and crosshair lines to inspect exact values. The chart is annotated using the d3-annotation library, with pink callouts highlighting notable price points. The y-axis displays the real price in dollars, while the x-axis shows time. A vertical dashed line marks a specific date of interest, and the chart includes hover-based tooltips for precise data reading.

EElaineYu

69% match

Loading thumbnail…

Line Chart

This line chart displays US auto sales from 2005 to 2022, with the year on the x-axis and sales on the y-axis. The visualization uses d3.scaleTime and d3.scaleLinear to map data, while d3.axisBottom and d3.axisLeft generate labeled axes with gridlines. A d3.line generator creates the red trend line, rendered as an SVG path. Data is loaded from a CSV file using d3.csv, with dates parsed via the Date constructor and sales values converted to numbers.

SsreepavanKothapalli

69% match

Loading thumbnail…

Eine Woche Tankdaten: e5

A line chart tracks the price of E5 gasoline across one week in January 2021, with time on the x-axis and price on the y-axis. The visualization highlights price fluctuations using a smooth curve generated with `d3.line` and `curveBasis`. The code loads data from a CSV file using `d3.csv`, parses dates and numeric values, and renders axes with `d3.axisBottom` and `d3.axisLeft`. SVG output is produced through D3 selections, with scales created via `scaleTime` and `scaleLinear`.

Llnfrnzsk

69% match

Loading thumbnail…

Fork of Temperature in San Fran Liniendiagramm

This visualization displays one week of diesel fuel prices from multiple San Francisco gas stations, plotting price against time with a smooth curved line using D3 v7. The chart shows diesel price fluctuations across hourly data points from January 1–2, 2021. It loads CSV data via `d3.csv`, parses dates and numeric values, and renders an SVG line chart with `scaleTime` and `scaleLinear` axes. The implementation uses `d3.line` with `curveBasis`, `axisBottom`, `axisLeft`, and includes axis labels and a title in German, with gridlines from tick marks.

Aamulyakannam

68% match

Loading thumbnail…

Line Chart

This line chart visualizes annual US automotive sales from 2005 to 2022, using a red path to show the sales trend over time. The visualization loads CSV data from a GitHub gist and renders it as an SVG using d3.scaleTime and d3.scaleLinear for the axes, with d3.axisBottom and d3.axisLeft providing tick marks. The chart includes labeled axes, gridlines, and a title, with data parsed to convert Year into Date objects and Sales into numbers.

SSRI RAM REDDY KOTERU

68% match

Loading thumbnail…

ICE7_Q3_Creating Line Chart with D3js

This example displays monthly gas prices for 2021 using an SVG line chart. The visualization uses D3 v5 to load CSV data and render a smooth curve, with labeled axes for months and price in dollars. It employs d3.scaleTime and d3.scaleLinear to map data values, d3.axisLeft and d3.axisBottom for gridlines and ticks, and d3.line with curveBasis for the curved path. The code also uses d3.csv for data parsing and d3.timeParse to convert month strings into date objects.

PPbarring

68% match