ICE 7 Area Chart

100%

ICE 7 Area Chart

✓ Published0🌍 Public

Last edited Mar 27, 2022

Created on Mar 27, 2022

The ICE 7 Area Chart visualizes mobile purchase trends in India from 2010 to 2020. It combines a line and area chart to show the growth in purchases over time, with the line highlighting the trend and the filled area emphasizing the magnitude. The visualization uses D3 v5 APIs including `d3.scaleTime`, `d3.scaleLinear`, `d3.axisLeft`, `d3.axisBottom`, `d3.line`, `d3.area`, and `d3.curveBasis` to render the smooth curves. It loads CSV data from a GitHub gist and renders the result as SVG, with the line in orange and the area fill in yellow.

AI-generated description

combined line and area charts

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE 7 Area Chart

The ICE 7 Area Chart displays smartphone sales in millions from 2012 to 2021, using a smooth curve to highlight the upward sales trend over time. The chart renders as an SVG with a red area beneath a black line, generated via D3 v5’s `area()` and `line()` generators with `curveBasis` smoothing. It uses `d3.csv` to load data from a GitHub gist, and scales are defined with `scaleLinear`, while axes are drawn using `axisLeft` and `axisBottom`. The visualization includes clear axis labels and a title, making the sales progression immediately apparent.

PPriyanka7002

90% match

Loading thumbnail…

ICE 7 Area Chart

The visualization displays supermarket sales in India over time, combining a smooth line chart with a shaded area beneath it to emphasize trends. It uses d3.csv to load and parse the dataset, with d3.scaleTime and d3.scaleLinear mapping years and sales values to SVG coordinates. The line and area paths are generated via d3.line and d3.area with curveBasis interpolation, while d3.axisBottom and d3.axisLeft render labeled axes with formatted tick values.

SsreepavanKothapalli

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

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

86% match

Loading thumbnail…

ICE-7 Area

This area chart visualizes electronic sales in INR from 2009 to 2022, with the x-axis representing time and the y-axis showing sales amounts. The chart uses D3 v5’s `scaleTime` and `scaleLinear` for scaling, `area` with `curveBasis` for the filled path, and `axisBottom` and `axisLeft` for labeled axes. Data is loaded from a CSV via `csv`, with years parsed as dates and sales converted to numbers. The SVG rendering includes a green filled area, red title, and styled tick labels.

HHARSHA BUDDANA

86% match

Loading thumbnail…

ICE #7 - Area Chart

This area chart visualizes global smartphone sales from 2007 to 2021 using CSV data containing yearly sales figures. The chart employs D3 v5 APIs such as `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and the `area` generator with `curveBasis` to render an orange-filled region beneath the sales trend line. The SVG output includes labeled axes, a red title, and purple axis labels, with sales formatted in billions. Data is loaded asynchronously via `d3.csv` and rendered using a margin-based layout.

KKevin Raj

86% match

Loading thumbnail…

ICE-7 Area Chart

This area chart visualizes e-commerce sales from 2009 to 2019, with a smoothed line and filled region beneath it. Using D3 v5, the code employs `scaleTime` and `scaleLinear` for axes, `area` and `line` generators with `curveBasis` for smoothing, and `csv` to load remote data. The SVG rendering includes labeled axes with gridlines and a green title, while CSS styles the chart’s tick marks and area fill.

PPrasanth Damarla

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

85% match