Fork of ICE 7 Area Chart

100%

Fork of ICE 7 Area Chart

✓ Published3🌍 Public

Last edited Mar 27, 2022

Created on Mar 27, 2022

A smoothed line and area chart visualizes supermarket sales in India over time, with the line marking yearly sales values and the orange area emphasizing the trend beneath the curve. The chart uses D3 v5 with SVG rendering, employing `scaleTime` and `scaleLinear` for the axes, `line` and `area` generators with `curveBasis` for smoothing, and `axisBottom` and `axisLeft` for gridlines. Sales data is parsed from a CSV file, formatted as years via `d3.timeParse`, and styled with custom CSS for axis labels and chart elements.

AI-generated description

combined line and area charts

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of ICE 7 Area Chart

This visualization displays supermarket sales in India over time, combining a smooth line chart with an area chart to emphasize sales trends. The chart uses D3 v5's `scaleTime` and `scaleLinear` for axes, with `line()` and `area()` generators using `curveBasis` for curved paths. Data is loaded via `csv()` from a GitHub gist, where each date is parsed with `timeParse("%Y")`. SVG rendering includes labeled axes, gridlines via tick sizes, and a bold dark line over an orange filled area.

LLakshmiManjushaReddyYarreddu

96% match

Loading thumbnail…

Fork of Fork of ICE 7 Area Chart

This example shows supermarket sales across countries in India, with a smooth curved line tracing changing values and an orange area fill beneath it. The CSV data is parsed and mapped to a time-scaled x-axis and linear y-axis using d3.scaleTime and d3.scaleLinear, while d3.axisBottom and d3.axisLeft generate labeled ticks. The line and area paths are drawn with d3.line and d3.area, both using d3.curveBasis for interpolation, and rendered as SVG in a 930×450 viewport. The chart uses d3.csv to load the remote population dataset.

Ppavankalyan1507

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

92% match

Loading thumbnail…

Fork of ICE 7 Area Chart

This fork of an ICE 7 area chart visualizes car sales in India from 2009–2019, with yearly sales values encoded as both a smooth line and an orange filled area beneath it. The chart uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `line`, and `area` generators with a `curveBasis` interpolation, rendered as SVG. Data comes from a CSV file parsed with `d3.csv` and `timeParse`, while axes include grid lines and rotated labels. The visualization emphasizes the upward sales trend over the decade with a clear, annotated time-series layout.

Ssaiteja0725

92% match

Loading thumbnail…

Fork of ICE 7 Area Chart

This visualization displays the sales of a company in India from 2011 to 2020, combining a smooth line chart with a filled area beneath it to emphasize the trend over time. The chart uses D3 v5 with SVG rendering, employing `d3.line()`, `d3.area()`, and `curveBasis` to generate the paths, along with `d3.scaleTime`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft` for scales and axes. Data is loaded from a CSV via `d3.csv` and parsed with `d3.timeParse`.

Mmanvithareddykarra

92% match

Loading thumbnail…

Fork of ICE 7 Area Chart

A fork of ICE 7 Area Chart visualizes car sales in India from 2009 to 2019. A red line traces yearly sales over a filled area, with a yellow-tinted grid and bold green axis labels. Using D3.js v5, the code applies `scaleTime` and `scaleLinear` to map years and sales values, while `line` and `area` generators with `curveBasis` create the smooth line and filled region. Data is loaded from a CSV via `csv()` and parsed with `timeParse`. The SVG is rendered through `axisLeft` and `axisBottom` for the axes.

DDivyaVellanki

91% match

Loading thumbnail…

Fork of ICE 7 area chart

This example visualizes car sales in India from 2009–2019 using a combined line and area chart rendered with SVG. The line traces yearly sales values, while the filled area beneath it uses an orange gradient to emphasize volume trends over time. The code employs D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct axes, and `line()` with `area()` generators using `curveBasis` for smooth interpolation. Data is loaded from a CSV via `d3.csv` and parsed with `d3.timeParse`; a grid pattern is created by `tickSize` on both axes.

Mmandalasaikrishna007

91% match

Loading thumbnail…

Fork of ICE 7 Area Chart

This fork of the ICE 7 Area Chart visualizes car sales in India from 2009 to 2019, combining a smooth line and an orange filled area to show sales trends over time. The chart uses D3 v5 with SVG rendering, employing `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, `d3.area`, and `curveBasis` for interpolation. Data is loaded from a CSV file and parsed with `csv` and `timeParse`, while axes are generated via `axisLeft` and `axisBottom` with gridlines and rotated axis labels.

KKarthik G

91% match