Line chart

100%

✓ Published0🌍 Public

Last edited Mar 12, 2023

Created on Mar 12, 2023

This line chart displays flight charges over a range of years, using a time-scaled x-axis and a linear y-axis. The visualization is rendered as an SVG using D3 v5, with data loaded from an external CSV file. The code employs D3’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generators to plot the trend. Axis labels and tick marks are configured with custom margins, and the line path is styled with a blue stroke.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Line Chart

This line chart shows the number of passengers using different airlines from 2005 to 2019, with each airline’s trend encoded by a distinct color. The vertical axis represents passenger counts, the horizontal axis indicates the year, and it includes both domestic and international flights. It uses d3.v4 with SVG rendering, where the `line()` generator creates the paths and `d3.scaleTime` maps the time data. The design includes axis labels, a legend to identify airlines, and smooth animated transitions via `transition.attrTween` to update the lines.

Pphemmati

79% match

Loading thumbnail…

Line Chart

This example shows a line chart tracking the cost of sales from 2000 to 2013, with time on the x-axis and cost on the y-axis. The visualization uses D3 v5 to load CSV data, apply a time scale via `scaleTime` and a linear scale via `scaleLinear`, and render axes with `axisBottom` and `axisLeft`. A `line` generator creates the path, with gridlines drawn through tick sizing and a red stroke styled in CSS. The SVG output is centered on a fixed 960×500 canvas.

MMounishSeeni

78% match

Loading thumbnail…

Line Chart Project

A line chart depicts high hotel booking rates over time. The visualization uses D3 v5 to render an SVG, employing `scaleTime` and `scaleLinear` for the axes, `axisLeft` and `axisBottom` for ticks, and a `line` generator with `curveBasis` for the smoothed path. Data is loaded from a CSV via the `csv` function and parsed into dates and numbers before rendering.

Rrajasrilekkala

77% match

Loading thumbnail…

linechart

This line chart displays the cost of sales from 2000 to 2013, with each year plotted against its corresponding cost value on a linear scale. The visualization uses D3 v7 APIs including `d3.csv` to load data, `d3.scaleBand` for the categorical year axis, `d3.scaleLinear` for the cost axis, and `d3.line` to generate the path geometry with a light green stroke. The chart is rendered as an SVG with axes, labels, and a title, with data coming from a local CSV file.

Hharipriyaa07

77% match

Loading thumbnail…

Line Chart

This line chart shows passenger counts for US airlines over time, with each airline represented as a separate colored line. The visualization uses D3.js v4 to render SVG paths and scales, with data embedded directly in the script. The chart includes axes labeled with dates and passenger numbers, and is styled with custom CSS for line thickness and font. The visualization is part of a larger air traffic dashboard for San Francisco Airport, presented within a Bulma-styled HTML page.

Pphemmati

77% match

Loading thumbnail…

Trivikram_ScatterPlot

This example shows the relationship between flight prices and airlines as a scatter plot, with flight price on the x-axis and airline names on the y-axis. It uses D3 v7 to load CSV data, scale the axes with `scaleLinear` and `scaleBand`, and render circular marks via SVG. The code builds the chart by selecting the body, appending an SVG element, and drawing circles positioned with `cx` and `cy` attributes. Axis labels are added with `axisLeft` and `axisBottom`, and the flight-price axis includes extra bottom margin for readability. The dataset is fetched from a remote CSV file, and the visualization fills the entire viewport.

Ttrivikramcheluri@gmail.com

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

76% match

Loading thumbnail…

linechart

This line chart visualizes the cost of sales from 2000 to 2013 using data loaded from a CSV file. The chart renders as an SVG with a light green stroke, employing d3.scaleBand for the x-axis and d3.scaleLinear for the y-axis, with axis labels added via d3.axisBottom and d3.axisLeft. The line is drawn using d3.line, mapping each year to its corresponding cost value, with red axis labels and a centered title.

MmNamratha25

76% match