Fork of ICE-7 Line Chart

100%

Fork of ICE-7 Line Chart

✓ Published1🌍 Public

Last edited Mar 25, 2023

Created on Mar 25, 2023

This line chart tracks phone sales over time, with the x-axis representing years and the y-axis showing the number of phones sold. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generators to render an SVG path, with grid lines and labeled axes. Data is loaded from a CSV file via `d3.csv` and parsed into date and numeric values, then rendered inside a centered SVG element with margins and a title.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE-7 Area Chart

This visualization shows phone sales over time as a smooth area chart, with a gold line tracing the trend and a black filled region beneath it. The data is loaded from a CSV file via d3.csv, with years parsed as dates and phone counts converted to numbers. The chart uses d3.scaleTime and d3.scaleLinear for axes, d3.axisLeft and d3.axisBottom for ticks, and d3.line, d3.area, and d3.curveBasis to generate the smoothed path. The SVG is rendered with React, and styled with custom CSS for axis labels and grid lines.

NNeeharikaGali

90% match

Loading thumbnail…

Fork of ICE 7 Line Chart

This example visualizes smartphone sales in millions from 2012 to 2021 as a blue line chart with axes and labels. The chart uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `line`, `axisBottom`, and `axisLeft` to map the data and render SVG elements. Data is loaded asynchronously from a GitHub CSV URL using `csv`, with sales converted to numeric values and years parsed as dates. The visualization includes a purple title, blue axis labels in Times New Roman, and a grid formed by tick lines.

Bblikitha

90% match

Loading thumbnail…

Fork of ICE-7

This line chart shows sales data over time, with years on the x-axis and sales values on the y-axis, using orange strokes to highlight trends. It loads CSV data from a GitHub gist, parsing dates with `d3.timeParse` and rendering an SVG via D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` functions. Grid lines and axis labels are customized through CSS, while margins and tick padding adjust the layout.

TTulluripallavi

88% match

Loading thumbnail…

Fork of ICE 7 Line Chart

This fork of the ICE 7 line chart presents the sales of cars in India from 2009 to 2019. The visualization shows a single line tracking the total car sales per year, with time on the x-axis and a numeric count on the y-axis, both rendered as SVG. The chart uses D3 version 5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` APIs to map and draw the data. The data is loaded from a CSV file using D3’s `csv` function, with dates parsed via `timeParse`.

NNeeharikaGali

87% match

Loading thumbnail…

Fork of ICE-7

This visualization displays car sales data over time as a line chart, with years on the x-axis and sales figures on the y-axis. It uses D3 v5 to load CSV data, parse dates with d3.timeParse, and render scales and axes via scaleTime, scaleLinear, axisBottom, and axisLeft. The line is drawn using the d3.line generator, with the SVG path styled in orange. The chart includes labeled axes and uses margins to position the plot within the SVG canvas.

CCherukuriMilind

86% match

Loading thumbnail…

Fork of ICE 7 Area Chart

This chart shows iPhone sales over time, combining a smooth line with a shaded area beneath it to emphasize the trend in annual sales figures. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `line`, and `area` generators with a `curveBasis` interpolation. Data is loaded from a CSV file and parsed with `d3.timeParse`, while axes are rendered via `axisLeft` and `axisBottom`. The SVG includes formatted tick labels and rotated axis titles, with the area fill styled in blue and the line in black.

RRadhakrishna246

86% match

Loading thumbnail…

Fork of Fork of ICE-7

This example displays a line chart of sales data over time, with the x-axis representing years and the y-axis representing sales figures. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` APIs to build the axes, while a `line` generator creates the orange stroke path. Data is loaded from a CSV file hosted on GitHub Gist, and the year values are parsed with `d3.timeParse` to format them as dates. The SVG rendering includes custom axis labels and styled tick marks.

TTulluripallavi

86% match

Loading thumbnail…

Fork of ICE-7 Line Chart

This fork of ICE-7 displays a line chart of sales costs from 2000 to 2013, with cost on the y-axis and year on the x-axis. It uses d3.csv to load data from a GitHub gist, then renders an SVG with d3.scaleTime and d3.scaleLinear for axes, and d3.line to draw the path. The chart includes labeled axes, a title, and grid lines, with styling handled by external CSS.

NNeeharikaGali

86% match