Skip to main content
SimilarExport ZIP
100%

Fork of Area chart

✓ Published0🌍 Public
Ppriyankachary1701@gmail.com
Last edited Oct 26, 2025
Created on Oct 26, 2025
Forked from HTML Starter

This area chart visualizes the total borrow count of library books per year. The data is loaded from a CSV file hosted on GitHub and aggregated by year. The chart uses a soft blue filled area with a line overlay and circular markers to emphasize data points. Hovering over a point reveals a tooltip. Built with D3 v7, it uses methods like `d3.area`, `d3.line`, `d3.csvParse`, and `d3.rollup` to process the data and render SVG elements. Grid lines and labeled axes provide context for the temporal trends.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Line Chart

This fork of a line chart by priyankachary1701 visualizes total book borrow counts per publication year, drawn from a CSV of library books. The D3 v7 code fetches the data, rolls it up by year with `d3.rollup` and `d3.sum`, then renders an SVG line and points. The chart includes axes, gridlines, and a hover tooltip, using D3 scales (`scaleLinear`), `d3.line`, and the selection API alongside `d3.csvParse` for data ingestion.

Ppriyankachary1701@gmail.com
86% match
Loading thumbnail…

Fork of area chart

This area chart visualizes annual data from a CSV file loaded via `d3.csv`, using D3 v7 to render an SVG path with a steelblue fill. The chart employs `d3.area()` with linear scales for the x-axis (Year) and y-axis (Value), and includes bottom and left axes with labels. The data is fetched from a GitHub Gist URL, and axis tick formatting for the year is specified with `d3.format('d')`.

Rreddysushma994@gmail.com
81% match
Loading thumbnail…

Fork of area chart

This area chart visualizes annual data from a CSV file loaded via `d3.csv`, using D3 v7 to render an SVG path with a steelblue fill. The chart employs `d3.area()` with linear scales for the x-axis (Year) and y-axis (Value), and includes bottom and left axes with labels. The data is fetched from a GitHub Gist URL, and axis tick formatting for the year is specified with `d3.format('d')`.

Rreddysushma994@gmail.com
81% match
Loading thumbnail…

Fork of area chart

This area chart visualizes a dataset loaded from a CSV file, showing the relationship between a numeric Year and Value. The chart is rendered as an SVG using D3 v7, with a linear x-scale for years and a y-scale for values. The code uses `d3.csv` to fetch data, `d3.scaleLinear` for axes, and `d3.area` to create the filled region. Axis labels are added via `d3.axisBottom` and `d3.axisLeft`.

Ssalim.mir@outlook.com
80% match
Loading thumbnail…

Fork of Fork of ICE-7 Area Chart

This area chart visualizes the number of books sold over time, with the data loaded from a CSV file via `d3.csv`. The chart uses `d3.scaleTime` for the x-axis and `d3.scaleLinear` for the y-axis, with `d3.axisBottom` and `d3.axisLeft` for the axes. The line and filled area beneath it are rendered using `d3.line` and `d3.area` with `d3.curveBasis`, and the SVG output is generated using React and D3 v5.

KKarnisrikanth
79% match
Loading thumbnail…

Fork of Area Chart

This chart shows how many people visited a location each year from 2010 to 2019, combining a smooth blue line for the trend with a filled yellow area beneath it. The visualization uses d3.scaleTime and d3.scaleLinear to map the date and visitor count, with d3.line and d3.area generators using a curveBasis interpolation. Data is loaded from a CSV file, and the axes include formatted tick labels with grid lines, rendered as SVG elements.

SSaikiran2029
79% match
Loading thumbnail…

Fork of area chart

This chart shows the cumulative engagement of a social media dataset over time, using an area chart to visualize the growing total as a filled region. The visualization is rendered as SVG using D3 v7, with the x-axis representing dates and the y-axis showing the cumulative sum of engagement values. The code loads data from a CSV file, aggregates engagement by day using `d3.rollup` and `d3.sum`, then computes the running total. The area path is drawn with `d3.area` and a monotone curve, styled with a light blue fill and steel blue stroke, alongside axes labeled "Date" and "Cumulative Engagement".

Ssaiabhishekmunnangi@gmail.com
79% match
Loading thumbnail…

Fork of area chart

This example displays an area chart that visualizes yearly sales data from a CSV file. It uses D3.js to load and parse the data, then builds a chart with a steelblue filled area, axes, and labels for Year and Sales. The chart is rendered as an SVG element, with scales and an area generator created via `d3.scaleLinear` and `d3.area`. Axes are added using `d3.axisBottom` and `d3.axisLeft`.

Mmadipadiga.raviteja@gmail.com
79% match