https://github.com/vasturiano/d3-radial-axis
A radial implementation of the D3 axis component
https://github.com/vasturiano/d3-radial-axis
curve d3-axis d3js data-visualization polar radial spiral
Last synced: 2 months ago
JSON representation
A radial implementation of the D3 axis component
- Host: GitHub
- URL: https://github.com/vasturiano/d3-radial-axis
- Owner: vasturiano
- License: mit
- Created: 2017-02-09T05:27:44.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2025-04-09T19:46:18.000Z (6 months ago)
- Last Synced: 2025-07-14T17:50:00.658Z (3 months ago)
- Topics: curve, d3-axis, d3js, data-visualization, polar, radial, spiral
- Language: JavaScript
- Homepage: https://vasturiano.github.io/d3-radial-axis/example/arc-axis.html
- Size: 143 KB
- Stars: 25
- Watchers: 3
- Forks: 5
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
d3-radial-axis
==============
[![NPM package][npm-img]][npm-url]
[![Build Size][build-size-img]][build-size-url]
[![NPM Downloads][npm-downloads-img]][npm-downloads-url]
A radial implementation of the [D3 axis](https://github.com/d3/d3-axis) component.
To use for instance in a [clock](https://observablehq.com/@vasturiano/analog-clock) or a [gauge meter](https://observablehq.com/@vasturiano/gauge-meter).
## Quick start
```js
import { axisRadialInner, axisRadialOuter } from 'd3-radial-axis';
```
or using a *script* tag
```html
```
then
```js
const myAngleScale = d3.scaleLinear()
.domain([-10, 10])
.range([-Math.PI, Math.PI]);
const myRadius = 100;
const myRadialAxis = d3.axisRadialInner(myAngleScale, myRadius);
d3.select().call(myRadialAxis);
```
## API reference
Same features as the regular [D3 axis](https://github.com/d3/d3-axis#api-reference).
```
d3.axisRadialOuter()
.ticks()
.tickArguments()
.tickValues()
.tickFormat()
.tickSize()
.tickSizeInner()
.tickSizeOuter()
.tickPadding()
```
Includes additional properties to configure the radial axis, the `angleScale`, and the axis `radius`.
Also supports the representation of a [spiral axis](https://vasturiano.github.io/d3-radial-axis/example/spiral-axis.html) when setting a pair of `startRadius` and `endRadius`.
```
d3.axisRadialOuter()
.angleScale()
.radius()
.startRadius()
.endRadius()
```
[npm-img]: https://img.shields.io/npm/v/d3-radial-axis.svg
[npm-url]: https://npmjs.org/package/d3-radial-axis
[build-size-img]: https://img.shields.io/bundlephobia/minzip/d3-radial-axis.svg
[build-size-url]: https://bundlephobia.com/result?p=d3-radial-axis
[npm-downloads-img]: https://img.shields.io/npm/dt/d3-radial-axis
[npm-downloads-url]: https://www.npmtrends.com/d3-radial-axis