Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Claude 3.7 Test

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

3dc306800ddd41e0ab12a364969962ff

Open

Claude 3.7 Test

0 stars0🌍 Public
CCurran Kelleher
Last edited Feb 25, 2025
Created on Feb 24, 2025
Forked from D3 Starter

This stacked bar chart displays four groups with five categorical segments each, using a harmonious color palette with white strokes between segments. The visualization includes grid lines behind the bars, axes with labels, a legend, and a title. Built with D3.js v7, the code uses d3.stack(), d3.scaleBand(), and d3.scaleLinear() to generate the chart, with data hardcoded in the script and rendered as SVG that fills the browser window.

AI-generated description

D3 Pie Chart Example

This is a simple example that demonstrates how to create a pie chart using D3.js. The visualization includes:

  • A pie chart with 5 categories
  • Percentage labels inside each slice
  • A legend showing each category
  • A title

The SVG is set to fill the entire page, and each slice has a different color with a white stroke for better visibility.

Features

  • Responsive layout that fills the browser window
  • Color-coded pie slices
  • Percentage labels
  • Legend showing category names

Running the Example

  1. Install dependencies: npm install
  2. Build the project: npm run build
  3. Open index.html in your browser