Skip to main content
SimilarExport ZIP
100%

Fork for area chart

✓ Published1🌍 Public
Aachalasam
Last edited Jul 4, 2022
Created on Jul 4, 2022
Forked from line chart

This example visualizes the runs scored by Rohit Sharma from 2007 to 2021, combining a smooth line chart with a filled area beneath it. The SVG rendering uses d3.scaleTime and d3.scaleLinear to map years and run counts, while d3.line and d3.area generators with curveBasis create the curved paths. Axis ticks are formatted with d3.format and styled via CSS classes, with data parsed from a CSV file loaded through d3.csv.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

area chart

This area chart visualizes the runs scored by a cricket team each year from 2007 to 2021. The SVG render uses D3 v5’s `scaleTime` and `scaleLinear` to map years and run totals, with `d3.area` and `d3.line` generators drawing the filled region and its boundary using a basis curve. CSV data is loaded via `d3.csv`, and axes are styled with custom tick formatting and labels. The chart highlights overall scoring trends over the 15-year period.

RRupeshGandham
85% match
Loading thumbnail…

line chart

This line chart shows Rohit Sharma’s runs per year from 2007 to 2021. The SVG visualization uses D3 v5 with React, scaling time on the x-axis and linear values on the y-axis via `scaleTime` and `scaleLinear`. Axes are rendered with `axisBottom` and `axisLeft`, while the data line is drawn using `line`. The CSV dataset is loaded asynchronously with `csv`, and the chart includes gridlines and axis labels.

Aachalasam
83% match
Loading thumbnail…

Fork of Area Chart

This fork of an area chart visualizes sales data from 1988 to 2006, combining a smooth line and a brown filled area beneath it to emphasize trends over time. The axes display year and sales values, formatted with `d3.format`. The code uses D3 v5 APIs including `csv` for data loading, `scaleTime` and `scaleLinear` for scales, and `line` alongside `area` generators with `curveBasis` for smoothing. The SVG output is styled with CSS, featuring a yellow background and labeled axes.

Rrohinikotha
80% match
Loading thumbnail…

Fork of Area Chart - Runs vs Matches

A green area chart with orange line overlays and red data points displays runs scored against match number in a sports dataset. The visualization uses an SVG container with D3.js v7, employing `d3.area`, `d3.line`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft` to map integer match numbers and runs. Data is loaded as CSV from a GitHub Gist, converted to numeric values, and rendered with axis labels for "Match Number" and "Runs Scored," with a semi-transparent fill and point markers for clarity.

Ssdarsi2404@gmail.com
79% match
Loading thumbnail…

Fork of Area Chart

This fork of an area chart visualizes trades from 1950 to 2005, with sales values plotted over time using a smooth curve. The rendering uses SVG, with D3 v5 functions including `scaleTime`, `scaleLinear`, `line`, `area`, and `curveBasis` to generate a brown stroke line and pink filled region. Axis labels are formatted with `d3.format`, and the data is parsed from a CSV file hosted on GitHub, with dates converted via `d3.timeParse`. The chart includes custom styles for the tick text, axis labels, and the colored line and area paths.

Kkalyanikotha
79% 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
79% 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
79% match
Loading thumbnail…

Fork of Fork of Area Chart

This example visualizes 15 years of car sales as a combined line and area chart, with a smooth curve showing sales trends over time and a grey filled region beneath the line. It uses D3 v5 APIs including `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.area` with a `curveBasis` interpolation to render the SVG paths. The data comes from a CSV file parsed with `d3.csv` and `d3.timeParse`, with axes labeled and gridlines generated via `d3.axisBottom` and `d3.axisLeft`.

PPrathyusha0304
79% match