Skip to main content
100%

Arcs and Chevrons

✓ Published0🌍 Public
Aandrew-reid
Last edited Mar 16, 2017
Created on Dec 17, 2016

Arcs and Chevrons is a custom D3.js visualization that creates arc-shaped segments with pointed "chevron" tails at their starting angles, rendered as SVG. Using the d3-shape library, the example extends the standard arc generator to produce curved, tapered sectors with angled corners. The data is a simple hardcoded array of two arc objects, each specifying a start angle, end angle, and implicitly an inner/outer radius, which are drawn into a 500x500 SVG canvas. The custom chevronArc function computes the geometry for each arc, including corner tangents and tail coordinates, to generate the distinctive chevron-shaped ends. This demonstrates how D3's modular shape utilities can be adapted to create novel, non-standard geometric forms.

AI-generated description

This block uses d3.js v4 with a custom module.

A very basic modification of d3.arc() to produce an arc that ends with a chevron/point, d3.chevronArc. This block serves primarily as a proof of concept - and not as a demo of a decent module/plugin. It is based entirely off of the d3-shape module's (https://github.com/d3/d3-shape) arc function with few changes and a lot of code removed. In creating it, many or all of the checks for different cases or exceptions were removed.

Four methods are available for chevronArc(), these are:

  • innerRadius()
  • outerRadius()
  • startAngle() - in radians
  • endAngle() - in radians

All behave the same as with d3.arc().

Similar vizzes