Q4_Area Chart

100%

✓ Published1🌍 Public

Last edited Oct 27, 2025

Created on Oct 27, 2025

This area chart displays India's GDP growth over time, using a dark red filled region beneath a monotone curve to emphasize the upward trend. The chart loads CSV data from a GitHub-hosted Kaggle dataset, which is filtered to the first 70 entries, and leverages D3 v7’s `d3.csv` and `d3.autoType` for parsing. It builds the visualization with `d3.scaleLinear`, `d3.area`, and `d3.axisBottom`/`d3.axisLeft`, including gridlines and axis labels, all rendered as SVG elements with a custom area path and styling.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Area Chart

This area chart displays India's GDP in billions from 2011 to 2020, using a filled pink path with a cyan stroke over a time-based x-axis and linear y-axis. The visualization loads CSV data from a GitHub gist, parsing years as dates and GDP values as numbers. Built with D3 v5, it uses `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and the `area` generator with a `curveBasis` interpolation to create the smooth shaded region. Margins, axis labels, and a title are positioned using SVG groups, with tick lines and labels styled via CSS.

Uubl2

85% match

Loading thumbnail…

Q3_Line chart

This line chart displays India's GDP over time, plotting the annual value against the year. The chart uses a smooth monotone curve to connect the data points, with gridlines and formatted axis labels for readability. The visualization is built with D3 v7, loading the data from a CSV file via `d3.csv` with `d3.autoType` for automatic type conversion. It uses `d3.scaleLinear` for both axes, `d3.extent` for domains, and `d3.format` for SI-prefix currency display. The code selects the year and GDP columns by name, limits the dataset to 80 rows, and sorts the data by year.

Mmaddineni2112@gmail.com

83% match

Loading thumbnail…

IndiaGDP of Area Chart

This area chart displays India’s GDP values from 2009 to 2022, with a black line and green filled area over time. Built with D3 v5, it uses `scaleTime`, `scaleLinear`, `area`, and `line` generators with `curveBasis` to render the SVG. The data is loaded via `csv` from a gist, with axes formatted using `axisLeft` and `axisBottom`, and styled through custom CSS for labels and gridlines.

Pprachow

82% match

Loading thumbnail…

Fork of ICE7_Area_chart

This area chart shows India's GDP over time, with a smooth curve filling the space beneath the line in purple. The visualization uses D3 version 6 APIs including `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to generate the SVG path, while `axisBottom` and `axisLeft` create labeled axes with gridlines. Data is loaded asynchronously from a remote CSV file. The chart includes custom axis labels, tick formatting that abbreviates large GDP values, and a title.

Pprachow

80% match

Loading thumbnail…

ICE 7 Area Chart

This area chart shows the GDP of India from 1994 to 2021, with a bold black line tracing the trend and a pink filled area underneath. The chart uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes, while the line and area shapes are generated with `line()`, `area()`, and `curveBasis`. Data is loaded from a CSV file hosted on GitHub, and the year values are parsed using `timeParse`. The SVG output is styled with CSS, and axis labels use a formatted tick scale.

Vvarun-030

80% match

Loading thumbnail…

Area Chart of GDP of India in last two decades

This area chart visualizes India’s GDP in billion US dollars from 2001 to 2021, using a smooth basis curve to draw both a black line and a pink filled area beneath it. The visualization loads CSV data from a GitHub gist, parses the numeric GDP values and year, then renders the chart as an SVG using D3 v5 APIs such as `d3.select`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, `d3.line`, and `d3.area`. Axis labels are styled via CSS, with tick marks and text formatted to show GDP values in a compact notation.

HHarshavardhan

79% match

Loading thumbnail…

India GDP Area chart

This visualization displays India’s annual CO2 emissions per capita over time as a filled area chart. The area path is generated with `d3.area` and `curveBasis`, while `d3.scaleTime` and `d3.scaleLinear` map years and emission values to pixel coordinates. Axes are drawn using `d3.axisBottom` and `d3.axisLeft` with gridlines, and the data is loaded via `d3.csv` from a GitHub gist. The SVG rendering uses a maroon fill for the area, with axis labels and a title styled via CSS.

LLakshmiVandanaNunna

79% match

Loading thumbnail…

Fork of Area chart

This area chart displays India's population growth rate from 1950 to 2024, with a dark red filled region beneath a monotone curve. The visualization uses D3 v7 to load CSV data from a GitHub gist, parsing year and population values, then rendering axes with gridlines and labels for both dimensions. The chart employs d3.area with curveMonotoneX and linear scales to map the temporal data, while the y-axis is formatted with comma separators for readability.

MMahesh

77% match