shadreza

@shadreza·3 public vizzes

Labeling the pie and doughnut charts

This example demonstrates how to label pie and doughnut charts with value annotations and pointer lines. It renders a single dataset of apple counts as a doughnut chart using `d3.layout.pie()` and `d3.svg.arc()`, with a categorical color scale. Labels are positioned at the outer edge of each arc using trigonometric calculations on start and end angles, then connected to their corresponding slices via small marker-tipped paths. The implementation uses D3 v3 APIs like `d3.select`, `d3.svg.arc`, and SVG `getBBox()` to compute text dimensions for accurate line placement.

Mar 20, 2022

Loading thumbnail…

D3 Chart

This example displays six D3.js charts—horizontal and vertical bar charts, a line chart, an area chart, a pie chart, and a donut chart—all rendered as SVG elements. Each visualization uses the d3.csv function to load population data by country from a local CSV file. The code applies d3.scaleLinear and d3.scaleBand for axes, d3.line and d3.area with curveBasis for path generation, and d3.scaleOrdinal with schemeSet2 for categorical colors, while d3.axisLeft and d3.axisBottom create the tick marks.

Mar 10, 2022

Loading thumbnail…

Fork of HTML Starter

A smiling face made of basic SVG shapes comes to life with animated eyebrows. The circle head, elliptical eyes, and arc-based mouth are drawn using D3 selections and the `arc` generator. Eyebrow rectangles move vertically through chained `transition` calls with different durations, creating a playful, asynchronous blinking effect. The visualization uses D3 v7 in a React project, rendering static SVG elements combined with timed animations.

Feb 28, 2022