Skip to main content
SimilarExport ZIP
100%

AVN - Area Chart

✓ Published0🌍 Public
Aavnreddy95
Last edited Jul 3, 2022
Created on Jul 3, 2022
Forked from HTML Starter

This area chart visualizes annual bike sales, with a smooth curve drawn using D3’s `line` and `area` generators with `curveBasis`. The SVG renders an orange filled region beneath a black stroke line, while styled axes include gridlines and labels. Data is loaded via `csv` from a GitHub gist, parsed with `d3.timeParse`, and scaled using `scaleTime` and `scaleLinear`. The React framework hosts the D3 v5 code, with axes generated by `axisBottom` and `axisLeft`.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

AVN - Line chart

This example shows annual bike sales over time as a single blue line chart, with labeled axes for years and sales figures. The visualization is rendered as an SVG using React and D3 v5, leveraging `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and a `line` generator to map CSV data loaded via D3’s `csv` method. The data source is a raw GitHub gist containing sales-per-year records, parsed with `d3.timeParse` to convert dates before plotting.

Aavnreddy95
90% match
Loading thumbnail…

Area chart

This example visualizes PS4 sales from 2015 to 2022 using an area chart, highlighting the yearly sales trend with a filled region beneath the curve. Built with React and D3 v5, the code leverages `select` for SVG manipulation, `scaleTime` and `scaleLinear` for axes, and `axisBottom`/`axisLeft` for tick generation. The area is created via `area()` with a `curveBasis` smoothing. Data is loaded from a GitHub CSV using `csv`, with sales values parsed as numbers and years as dates, rendered entirely as SVG.

Aanushaanumula
79% match
Loading thumbnail…

Area Chart

This area chart displays electronic sales from 2013 to 2021, with a green filled region under a black smoothed line. The visualization uses D3 v5 with SVG rendering, employing `scaleTime` for the year axis and `scaleLinear` for sales values. Data is loaded from a CSV file via `d3.csv`, and both `d3.line` and `d3.area` generators with `curveBasis` create the chart. Axes are customized with `axisBottom` and `axisLeft`, including gridlines and labels.

Kkranthireddyskr
78% match
Loading thumbnail…

area chart ic7

This area chart displays bike users from 2012 to 2022, with the x-axis mapping years and the y-axis showing user counts. The visualization combines a black line chart with a purple filled area beneath it to emphasize the trend over time. Built with D3 v5, the code uses the `line` and `area` generators with a `curveBasis` smoothing function, and scales data with `scaleLinear`. The SVG is constructed using the `select`, `append`, and `attr` methods, with axes rendered via `axisBottom` and `axisLeft`. Data is loaded from a remote CSV file using `csv`, and tick labels are formatted with `format`.

Ddivyagunuguntla
78% match
Loading thumbnail…

Area Chart

This area chart displays car sales totals from 2013 to 2023, with a green filled region beneath a thick black curved line. The visualization uses D3 v5 with SVG rendering, employing `d3.scaleTime` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.area` with `d3.curveBasis` to generate the smoothed area. Data is loaded from a CSV file via `d3.csv`, while `d3.axisLeft` and `d3.axisBottom` render labeled axes with tick marks.

VVAbhiram99
78% match
Loading thumbnail…

Area Chart for car sales

This area chart visualizes the increase in car sales over time, using a smooth curve to highlight the upward trend in total sales in USD across multiple years. The example is built with React and D3 v5, leveraging `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and the `area` and `line` generators with `curveBasis` to render the chart as an SVG. Data is loaded from a CSV file via `d3.csv`, with dates parsed using `d3.timeParse` for the x-axis.

Sshiiva-surya
77% match
Loading thumbnail…

Area Chart

This area chart displays annual US automotive sales from 2005 to 2022, with dates on the x-axis and sales numbers on the y-axis. Using D3 v5, the code loads CSV data and renders an SVG with `d3.scaleTime` and `d3.scaleLinear` for scales, `d3.axisLeft` and `d3.axisBottom` for axes, and `d3.area` with `curveBasis` to generate the filled path. The chart includes labeled axes and a title, with data sourced from a GitHub gist.

RRavi Teja Bonam
77% match
Loading thumbnail…

area chart

This area chart visualizes car sales over time, using a yellow filled region beneath a smooth line to emphasize the trend up to 2009. The code employs D3 v5’s `area` and `line` generators with `curveBasis` for smoothing, scaling time and linear axes via `scaleTime` and `scaleLinear`. Data is loaded from a CSV using `d3.csv`, with dates parsed via `timeParse`. SVG output includes styled grid lines, axis labels, and a title.

Nnagarjuna1968
77% match