ICE 7-4 Area Chart

100%

ICE 7-4 Area Chart

✓ Published0🌍 Public

Last edited Mar 12, 2023

Created on Mar 12, 2023

This area chart shows bike sales in India from 2012 to 2022, using a time-scaled x-axis for years and a linear y-axis for sales volume. The visualization combines a black line path with a grey filled area beneath it, drawn using SVG via D3 v5’s `line()`, `area()`, and `curveBasis` generators. Data is loaded from a CSV file and parsed with `d3.timeParse`, while axes are created using `axisBottom` and `axisLeft` with custom tick formatting. The chart includes labeled axes and a rotated y-axis label.

AI-generated description

combined line and area charts

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE 7 Area Chart

This area chart shows motorcycle sales in India from 2012 to 2022, highlighting the trend of sales volume over time. The visualization uses D3.js v5 to render an SVG with both a line path and an area fill beneath it, employing `d3.line`, `d3.area`, and `curveBasis` for smoothing. Data is loaded from a CSV file and parsed with `d3.csv` and `d3.timeParse`, with axes generated via `axisBottom` and `axisLeft`.

VVaishnavi6199

94% match

Loading thumbnail…

ICE 7 Area Chart

This area chart visualizes car sales in India from 2009 to 2019, using a smooth curved line to show yearly trends and an orange filled region beneath it to emphasize volume. The SVG rendering relies on D3 v5’s `area`, `line`, `scaleTime`, `scaleLinear`, and `axisBottom`/`axisLeft` APIs, with data loaded via `csv` from a GitHub gist. The chart includes labeled axes, gridlines from tick marks, and a formatted y-axis using `format('.3s')` for compact number display.

Eeravellisaimeghana

91% match

Loading thumbnail…

ICE 7-3 Line Chart

This example visualizes bike sales in India from 2012 to 2022 using a line chart rendered as an SVG. It loads a CSV dataset, parses the year and sales values, and uses `d3.scaleTime` and `d3.scaleLinear` to map the data to axes. The chart draws a single line with `d3.line`, applies grid lines via `axisBottom` and `axisLeft`, and includes labeled axes with custom formatting. The code uses D3 v5 modules imported directly, and styling is applied through an external CSS file.

EEshwarreddyt

90% match

Loading thumbnail…

ICE 7 Area Chart

This area chart visualizes car sales in India from 2009 to 2019, with a smooth curve showing the trend over time. The chart uses D3 v5’s `scaleTime`, `scaleLinear`, `area`, and `line` generators with `curveBasis` to create a filled orange region beneath a black line. Sales data is loaded from a CSV file, with years parsed via `d3.timeParse` and sales formatted using `format`. The SVG includes labeled axes and gridlines via `axisBottom` and `axisLeft`.

KK V VINITHA

90% match

Loading thumbnail…

ICE 7 Area Chart

This area chart visualizes automobile sales in India over a ten-year period. A blue filled region beneath a black line chart shows the trend, with axes for Year and Sales. The visualization is built with D3.js v5, using SVG rendering. It employs `scaleTime` and `scaleLinear` for the axes, and `area()` and `line()` generators with a basis curve to create the smooth, filled area. The data is loaded from a CSV file containing yearly sales records.

SSharanya1307

89% match

Loading thumbnail…

Fork of ICE 7 Area Chart

A combined area and line chart visualizes motorcycle sales in India from 2012 to 2022, with the area fill in orange and a black line tracing the trend. The code uses d3.scaleTime and d3.scaleLinear for axes, d3.area and d3.line with curveBasis for smooth shapes, and d3.axisLeft and d3.axisBottom for gridlines. It loads CSV data from a gist with d3.csv, parses years via d3.timeParse, and renders to SVG.

VVaishnavi6199

89% match

Loading thumbnail…

Fork of ICE 7 Area Chart

This chart shows car sales in India from 2009 to 2019 using a combined line and area graph, with a black curved line tracing sales trends over time and an orange shaded region beneath it. The x-axis displays years, while the y-axis shows sales figures with formatted tick labels. Built with D3 v5, the visualization uses `d3.line()` and `d3.area()` generators with `curveBasis` for smooth paths, along with `scaleTime`, `scaleLinear`, `axisLeft`, and `axisBottom` to construct the axes. Data is loaded from a CSV remote file containing yearly sales records.

Aaashrithd4

89% match

Loading thumbnail…

Fork of ICE 7 Area Chart

This area chart shows the sales of cars in India from 2009 to 2019. It combines a smooth line and a shaded area under the curve, with a time-scaled x-axis for years and a linear y-axis for sales figures. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `line`, and `area` with `curveBasis` smoothing. Data is loaded from a CSV file hosted on GitHub Gist, and the chart is rendered as an SVG with styled grid lines and axis labels.

Eeravellisaimeghana

88% match