Skip to main content
SimilarExport ZIP
100%

Fork of D3 Starter

✓ Published1🌍 Public
Bbalaaswitha@gmail.com
Last edited Oct 20, 2025
Created on Oct 20, 2025
Forked from 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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of 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".

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
89% match
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
88% 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
86% match
Loading thumbnail…

Fork of D3 Starter

This fork of the D3 Starter example displays a quantitative area chart of scientific data, using a dataset loaded from an external CSV. The visualization renders an orange, semi-transparent filled area with a darkorange outline to show the trend of the `Value1` metric across categories on the x-axis. It uses `d3.csv` to fetch the data, `d3.scalePoint` and `d3.scaleLinear` for the axes, and the `d3.area` generator to create the SVG path. The chart is drawn with `d3.axisBottom` and `d3.axisLeft`, incorporating labeled axes for "Category" and "Value1".

Kkmuddana@gitam.in
84% match
Loading thumbnail…

Fork of D3 Starter

This pie chart displays the distribution of geometric shapes grouped into four categories—Round, Triangle, Quadrilateral, and Polygon—based on their number of sides. The visualization loads a CSV file containing shape properties such as area and perimeter, then uses d3.csv to parse the data and d3.rollups to aggregate counts per category. Slices are rendered using d3.pie and d3.arc, with colors assigned via d3.scaleOrdinal and d3.schemeSet2. A legend is appended manually to the SVG, and the chart updates based on the selected value mode defined in the code.

Bbalaaswitha@gmail.com
82% match
Loading thumbnail…

Fork of D3 Starter

This visualization displays the distribution of counts across dataset categories as circles arranged horizontally in an SVG canvas. The code loads CSV data from a GitHub repository using `d3.csv`, converts the count values to numbers with the unary plus operator, and calculates total rows and sum via `d3.sum`. A summary line above the chart reports these aggregate values. Each circle’s radius reflects its count value, rendered with a steelblue fill and positioned at fixed x-intervals. The implementation uses D3 v7 selection, data join, and enter/append methods to create the SVG circles.

Ccsesomarajuaswini@gmail.com
81% match