Skip to main content
SimilarExport ZIP
100%

Fork of D3 Starter

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

AI-generated description
MIT Licensed

Similar vizzes

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

Fork of D3 Starter

This example shows a scatter plot of automobile data, mapping cylinders to the x-axis and horsepower to the y-axis, with each car represented as a semi-transparent circle. The visualization is built using D3 v7, loading data from a CSV file via `d3.csv` and rendering SVG elements with `scaleLinear`, `axisBottom`, and `axisLeft`. Axis labels are added with rotated text, while margins define the chart’s inner dimensions. The code demonstrates a basic D3 starter template, including data type conversion and appended circle elements.

Ssplit56
81% match
Loading thumbnail…

Fork of D3 Starter

This example displays the first five rows of a shapes dataset in a styled HTML table. It fetches a remote CSV file and renders its columns and rows using the D3.js library’s `d3.csv` method and DOM selection API. The table features a dark blue header, alternating row colors, and hover highlighting via inline CSS. The code explicitly uses `d3.select`, `d3.append`, and `.data()` to build the table structure, while pulling data from a Gist-hosted CSV containing columns like Shape, Color, and Number of Sides.

Bbalaaswitha@gmail.com
80% match