Skip to main content
100%

Arc Chart

✓ Published0🌍 Public
Aabrown004
Last edited Jun 7, 2019
Created on May 28, 2019

This visualization displays a single numeric value as a semicircular arc chart, with the value shown as a large centered label and a colored arc representing its proportion relative to a 0–100 scale. The background arc is gray and semi-transparent, while the foreground arc and text use a color scale that transitions from red through yellow to green. Built with D3 v4, it uses `d3.arc` for the path geometry, `d3.scaleLinear` for both the angle mapping and color interpolation, and SVG rendering. The chart adapts to the window size and rotates the arcs by -90 degrees to start at the top.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

donut chart

This donut chart displays three proportional values as colored arc segments, with percentage labels positioned outside the chart. The visualization uses D3 v4’s `d3.pie()` and `d3.arc()` functions to compute segment angles and paths, rendering the SVG chart dynamically. An interactive element positions HTML labels via absolute styling, calculating their coordinates from the arc centroids and canvas dimensions. The static data is embedded in the code, with colors and suffixes defined per segment. Bare bones and functional, it demonstrates a simple, clean alternative to a standard pie chart.

PPatrick Wojda
77% match
Loading thumbnail…

Circular Layout (Arc)

A circular layout of concentric arcs radiates outward from a central point, with each arc’s color shifting from brown to steel blue as its radius increases. The visualization encodes two linear scales—one mapping radius size and another mapping fill color—onto a grid of 180 rotated groups. Built with D3 v3, the code uses `d3.svg.arc` to generate each path segment, with `innerRadius` and `outerRadius` driven by the same scale. Rotating each group by successive 2-degree increments creates the full circular pattern. The data is generated synthetically via `d3.range`, not from an external source.

Mmbostock
77% match
Loading thumbnail…

Arc and path lab

The Arc and path lab demonstrates a circular visualization of hierarchical data, where topics and sub-topics are positioned in a radial layout. It uses D3 v6 to render SVG shapes, including arcs generated with `d3.arc` and circles appended directly. The data is loaded from an embedded JSON file containing topic hierarchies with associated metadata like size and sentiment. The visualization adapts to the screen width, centering its elements within a responsive SVG container, and applies basic styling for orange-filled shapes and white text labels.

LLiml
76% match
Loading thumbnail…

Untitled

This example shows a pie chart where each arc segment represents a portion of a population value, with colors assigned from a categorical ordinal scale. The visualization uses a D3.js layout and SVG rendering, constructing the chart with `d3.svg.arc` for the arcs and `d3.layout.pie` to compute the angles from the data. The chart is centered on an SVG canvas of 960 by 500 pixels, with white strokes separating each arc for clarity. The code relies on D3’s ordinal color range to distinguish the segments visually.

Ssaenanan
76% match
Loading thumbnail…

Arc

This example visualizes the four possible arc paths defined by the SVG elliptical arc command, using D3.js v6 to generate paths from a fixed start point, specified radii, a rotation angle, and four combinations of the large-arc and sweep flags. Each path is rendered in a distinct color from `d3.schemeSet3` and styled with a thick stroke, without any fill. The arcs are drawn in an SVG container and offset via a transformation, demonstrating the geometric differences between the arc flag choices in a clean, minimal setup. The dataset `socfb-Caltech36.json` is referenced but not used in the rendering logic.

Vvivianaaai@qq.com
76% match
Loading thumbnail…

Arc Tween

The visualization demonstrates smooth animated transitions of arc segments using D3 v4’s `transition.attrTween`. It shows a circular foreground arc that repeatedly updates its angle, while a secondary set of colored arcs animates inward and outward between paired data values. The `d3.arc` generator builds SVG path strings with bound start/end angles, and the tween interpolates the endAngle over 750 milliseconds for the main arc and 1750 milliseconds for the colored segments. Random angle targets drive the main arc, while paired arrays (e.g., `[0, 0.25, 0.4, 0.65, 0.9, 1]`) control the secondary arcs’ expansion and contraction.

SSpaceActuary
76% match
Loading thumbnail…

Untitled

This visualization displays two arc-shaped bars representing values from a CSV file, with each bar’s arc length proportional to its value. The arcs use a green color scale and animate their growth when clicked, triggering a random value update. Built with React and D3.js, the code loads data via `d3.csv`, constructs arcs using `d3.svg.arc`, and animates transitions with `transition.attrTween`. Labels appear above each arc, and clicking anywhere on the SVG starts the simulation.

Lluckytrue
76% match
Loading thumbnail…

Arc generator (centroid)

This example demonstrates how to compute and display the centroid of each arc in a donut chart, using the centroid to position labels. The visualization renders five colored arcs with white text labels placed at their geometric centers. The code uses the D3.js library, specifically the `d3.arc()` generator with `innerRadius` and `outerRadius` settings, and calls `arcGenerator.centroid()` to calculate label coordinates. The SVG output is styled with orange fills and bold white text, with data provided as an array of angle values in radians.

FFrissAnalytics
75% match