Skip to main content
SimilarExport ZIP
100%

Fork of D3 Starter

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

This example displays an area chart that visualizes the area of various geometric shapes, with the x-axis showing a sequential shape index and the y-axis representing the measured area. The area is rendered as a filled lightsteelblue path with a steelblue stroke, created using the `d3.area` generator and appended as an SVG path element. Data is loaded asynchronously from a CSV file via `d3.csv`, parsed, and scaled using `d3.scaleLinear` for both axes. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, with labels for "Shape Index" and "Area".

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of D3 Starter

This line chart visualizes how the area of different geometric shapes varies by their order in a dataset, with each shape indexed sequentially along the x-axis and its area plotted on the y-axis. The SVG chart uses d3.csv to load the shapes_data.csv file, then applies d3.scaleLinear for both axes and d3.line to draw a single steelblue path connecting the data points. Axis labels for “Shape Index” and “Area” are added via d3.axisBottom and d3.axisLeft, with the chart rendered using the D3 v7 library.

Bbalaaswitha@gmail.com
93% match
Loading thumbnail…

Fork of D3 Starter

This example visualizes the area (blue bars) and perimeter (orange line with points) of various shapes, using a dual-axis layout with the shape name on the shared x-axis, area scaled on the left y-axis, and perimeter on the right. Data is loaded asynchronously from a CSV file via `d3.csv` and filtered to include only finite numeric values. The visualization uses `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for both y-axes, `d3.axisLeft`, `d3.axisRight`, and `d3.axisBottom` for ticks, and `d3.line` to generate the perimeter path. A legend and rotated axis labels clarify the two data series.

Bbalaaswitha@gmail.com
90% match
Loading thumbnail…

Fork of D3 Starter

A scatter plot displays the relationship between Area and Perimeter for a shapes dataset, with steel-blue circles plotted on SVG axes. It loads CSV data from a GitHub gist and filters for numeric rows. The code uses D3 v6 methods including `csv`, `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `selectAll` with `join` to render circles. Axis labels indicate “Area” on the x-axis and “Perimeter” on the y-axis, with margins and a fixed 600x400 chart size.

Bbalaaswitha@gmail.com
89% match
Loading thumbnail…

Fork of D3 Starter

A scatter plot maps the area and perimeter of ten synthetic shapes, with points colored by shape category (round, triangle, quadrilateral, or polygon) using a legend. The visualization loads a CSV file via `d3.csv`, parses numeric fields, and renders SVG circles with `d3.scaleLinear` axes for area and perimeter. Shape grouping is determined by the number of sides, and `d3.schemeSet2` provides the categorical color palette. The chart uses margin conventions and axis labels to present the relationship between geometric measurements.

Bbalaaswitha@gmail.com
87% match
Loading thumbnail…

Fork of D3 Starter

This example displays a bar chart comparing the areas of ten different geometric shapes, such as circles, triangles, and hexagons. The bars are rendered as SVG rectangles with rounded corners and a blue gradient fill, and each shape’s name appears below its corresponding bar on the x-axis. The data is loaded via `d3.csv` from a remote Gist, and the chart uses `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the y-axis. The React application maps the parsed data to the SVG elements, with y-axis tick labels generated manually. Light horizontal gridlines are also included via `d3.axisLeft`.

Bbalaaswitha@gmail.com
87% match
Loading thumbnail…

Fork of Area Chart

This fork of an area chart displays yearly sales data from an embedded sample dataset using D3 v6. It renders a steelblue area path with an SVG canvas, using `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, with an `d3.area` generator. The chart includes labeled axes and axis ticks via `d3.axisBottom` and `d3.axisLeft`, with margins defining the plot area.

Nnishanththouta16@gmail.com
82% 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
82% 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
82% match