Skip to main content
SimilarExport ZIP
100%

Simple Area Chart

✓ Published0🌍 Public
Ss-pranathi
Last edited Mar 28, 2022
Created on Mar 25, 2022
Forked from HTML Starter

This example shows a simple area chart mapping “Marks Obtained” on the x-axis against “No. of Students” on the y-axis, with an unfilled, semi-transparent purple region beneath a stroked upper boundary. It uses D3 v7’s `scaleLinear`, `area` generator, and `axisLeft`/`axisBottom` to render axes and the path within an SVG. The hardcoded dataset of 21 x/y pairs is drawn directly, with axis labels added as rotated text.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Simple Line Chart

This visualization displays a simple line chart mapping student marks (x-axis) against the number of students achieving those marks (y-axis), with axis labels clarifying the relationship. The chart is rendered as an SVG element using D3 v7 within a React-adjacent HTML page. The code uses `d3.scaleLinear` to map data coordinates to pixel positions, `d3.line()` to generate the path, and the `axisLeft` and `axisBottom` functions from D3 to draw labeled axes. Data is provided as a static array of x/y pairs, and the line itself is stroked in orange with no fill.

Ss-pranathi
84% match
Loading thumbnail…

area chart

This area chart displays the total marks of the top 10 students from a CSV dataset, with student names on the x-axis and marks on the y-axis. It uses D3.js v7 with SVG rendering, employing `d3.scalePoint` and `d3.scaleLinear` for axes, and `d3.area()` to generate the shaded region. The chart includes labeled axes, rotated student name labels, orange circles marking each data point, and a title, with the area filled in light steel blue and outlined in steel blue.

Vvenigallajaanu@gmail.com
81% match
Loading thumbnail…

ICE -7 AreaChart

This area chart visualizes student marks distribution using D3.js v7, rendering an SVG with a steelblue gradient fill beneath the line. The chart loads CSV data from a GitHub gist, parsing label and students columns, then maps them to x and y axes using `scaleLinear`. It constructs the area path via `d3.area()`, applies a `linearGradient` for the fill, and labels axes as “Total Marks” and “Students”. Styling includes a bordered, rounded container background.

Cchalasanigayaetiri@gmail.com
78% match
Loading thumbnail…

question-2

This area chart visualizes the distribution of student counts across total marks. The chart uses a green gradient fill beneath the line to emphasize the area under the curve, with labeled axes for "Total Marks" and "no_of_Students." The visualization is built with D3 v7, loading CSV data from a GitHub gist, parsing it with `d3.csv`, and scaling the x and y axes with `d3.scaleLinear`. The area path is generated using the `d3.area` function, and a custom `linearGradient` is defined and applied to the SVG path.

RRJVENKATESH789@GMAIL.COM
77% match
Loading thumbnail…

D3 Area - Multiarea

This example shows a multi-area chart built with D3 v7, displaying a gray band between upper and lower y-values across six x-axis points. The chart uses a linear scale to map input values (0–100) to pixel coordinates, while a d3.area() generator computes the path for the filled region. The data is provided as an inline array of objects with x, y0, and y1 fields, and the result is rendered as a single SVG path element inside a 700×400 viewport.

SSubhendu Karmakar
76% match
Loading thumbnail…

D3 Area Chart

This example displays a stepped area chart of a time series where values rise in distinct plateaus from zero to 80,000, then fall back to zero. The chart uses an SVG path generated by d3.area, with d3.axisBottom and d3.axisLeft for scales, and linear scales for both x and y dimensions. Data is provided as a hardcoded array mapped to x/y points, rendered with yellow fill on a red background. The visualization demonstrates how d3.v7 constructs area shapes from discrete data points.

AAmeer Nuri
76% match
Loading thumbnail…

Area Chart Of the data

This area chart example visualizes how a dataset changes over time or across categories, with the filled region beneath the line providing a clear sense of magnitude and trends. The chart uses React to render the SVG-based visualization, while D3.js handles the scale computations and path generation for the area shape. The code likely relies on `d3.area()` to construct the smooth or stepped curve and `d3.scaleTime()` for the x-axis mapping, with styling managed through inline CSS. The underlying data appears to be fetched from a local source (v3), though the specific dataset is not shown in the provided files.

Ttejasviteegala@my.unt.edu
76% match
Loading thumbnail…

Fork of student Strength Area Chart

This area chart visualizes the number of students over a series of years, with the y-axis labeled "No.Of Students" and the x-axis representing time. The chart uses a green filled area beneath a smooth curve to emphasize the trend. Built with D3 v6, the visualization employs `scaleTime` and `scaleLinear` for axes, `axisLeft` and `axisBottom` for ticks, and the `area` generator with `curveBasis` for the smoothed path. Data is loaded from a CSV file, with year strings parsed via `d3.timeParse` and student counts converted to numbers before rendering as an SVG.

Ccharanchand9
76% match