Fork of ICE 7 Area Chart

100%

Fork of ICE 7 Area Chart

✓ Published0🌍 Public

Last edited Mar 28, 2022

Created on Mar 28, 2022

This fork of the ICE 7 example visualizes car sales in India from 2009 to 2019. It combines a black line chart with a filled orange area chart, drawn using D3 v5's `line`, `area`, and `curveBasis` generators. The visualization uses a time-scaled x-axis and a linear y-axis, with data loaded from a CSV file hosted on GitHub. The SVG output includes labeled axes and a title, with styling handled by an external CSS file.

AI-generated description

combined line and area charts

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE 7 Area Chart

This fork of an ICE 7 area chart visualizes car sales in India from 2009 to 2019, combining a black line and an orange filled area to show the trend over time. Using D3 v5, the code loads CSV data, parses years with `d3.timeParse`, and renders the chart as SVG. It employs `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft`, with `line` and `area` generators using `curveBasis` to smooth the paths.

SSonuSriN

97% match

Loading thumbnail…

Fork of ICE 7 Area Chart

This example visualizes car sales in India from 2009 to 2019 using a combined line and area chart rendered in SVG. The orange area chart highlights sales volume over time, while a black line traces the same data for clarity. It uses d3.csv to load data from a GitHub gist, d3.scaleTime and d3.scaleLinear for axes, and d3.line and d3.area with curveBasis to generate the smooth paths. Axis labels and gridlines are styled via CSS.

Eeravellisaimeghana

96% match

Loading thumbnail…

Fork of ICE 7 Area Chart

This fork of ICE 7 Area Chart visualizes car sales in India from 2009 to 2019. The SVG chart combines a smoothed line and an orange area fill to show the sales trend over time. It uses d3’s scaleTime, scaleLinear, axisBottom, axisLeft, line, area, and curveBasis with CSV data loaded from a GitHub gist. The axes include gridlines, and both the chart title and axis labels are styled in blue.

RRahulSai05

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

96% match

Loading thumbnail…

Fork of ICE 7 Area Chart

This fork of ICE 7 Area Chart visualizes car sales in India from 2009 to 2019, using a smooth curve to show the sales trend over time. The chart combines a black line and an orange filled area beneath it, with labeled axes for year and sales. The code loads CSV data via `d3.csv` and renders an SVG using D3 v5, employing `scaleTime`, `scaleLinear`, `line` and `area` generators with `curveBasis` for smoothing. Axis labels are styled with CSS classes.

RRahulSai05

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

95% match

Loading thumbnail…

Fork of ICE 7 Area Chart

This fork of the ICE 7 Area Chart visualizes annual car sales in India from 2009 to 2019, using a smooth curve to show the sales trend over time. The chart combines a black line and an orange filled area beneath it, with labeled axes for year and sales. It loads CSV data via `d3.csv`, parses dates with `d3.timeParse`, and builds the visualization using `d3.line` and `d3.area` generators with `curveBasis` smoothing. Axes are rendered with `d3.axisBottom`, `d3.axisLeft`, and scales from `d3.scaleTime` and `d3.scaleLinear`, output as SVG.

Eeravellisaimeghana

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

95% match