d3-axis

What is d3-axis?

The d3-axis package is part of the D3 (Data-Driven Documents) library, which provides a way to easily create and manipulate axes in SVG for data visualization. It supports various types of axes, including horizontal and vertical axes, and allows for customization of tick marks, labels, and other axis properties.

What are d3-axis's main functionalities?

Creating a Bottom Axis

This feature allows you to create a horizontal axis to be placed at the bottom of a chart. The 'scale' argument is a scale function that maps domain values to the range of the axis.

d3.axisBottom(scale)

Creating a Left Axis

This feature enables the creation of a vertical axis to be placed on the left side of a chart. Similar to axisBottom, it requires a scale function that defines the mapping from data values to the graphical representation.

d3.axisLeft(scale)

Customizing Tick Values

With this feature, you can specify the exact values where ticks should be placed on the axis. This is useful for highlighting specific data points or for customizing the distribution of ticks.

axis.tickValues([values])

Other packages similar to d3-axis

chart.js

Chart.js is a powerful, flexible JavaScript charting library. While it provides functionalities for creating various types of charts, including the axes, it differs from d3-axis in that it is a more comprehensive charting solution rather than a specialized tool for axis manipulation.

plotly.js

Plotly.js is another comprehensive charting library that supports a wide range of chart types and interactive features. Similar to Chart.js, it includes capabilities for axis creation and customization but is part of a broader toolkit for data visualization.

README

d3-axis

…

Installing

If you use NPM, npm install d3-axis. Otherwise, download the latest release. The released bundle supports AMD, CommonJS, and vanilla environments. Create a custom build using Rollup or your preferred bundler. You can also load directly from d3js.org:

<script src="https://d3js.org/d3-array.v0.7.min.js"></script>
<script src="https://d3js.org/d3-collection.v0.1.min.js"></script>
<script src="https://d3js.org/d3-color.v0.3.min.js"></script>
<script src="https://d3js.org/d3-format.v0.5.min.js"></script>
<script src="https://d3js.org/d3-interpolate.v0.4.min.js"></script>
<script src="https://d3js.org/d3-time.v0.2.min.js"></script>
<script src="https://d3js.org/d3-time-format.v0.3.min.js"></script>
<script src="https://d3js.org/d3-scale.v0.5.min.js"></script>
<script src="https://d3js.org/d3-selection.v0.5.min.js"></script>
<script src="https://d3js.org/d3-axis.v0.0.min.js"></script>

(If you’re not using time scales, you can omit d3-time and d3-time-format.) In a vanilla environment, a d3_axis global is exported. Try d3-axis in your browser.

API Reference

# d3.axis()

Constructs a new axis generator with a default linear scale, bottom orientation, empty tick arguments, a tick size of 6 and tick padding of 3.

# axis(selection)

…

# axis.scale([scale])

…

# axis.orient([orient])

…

# axis.ticks(arguments…)

A convenience function for setting the tick arguments. For example, this:

axis.ticks(10);

Is equivalent to:

axis.tickArguments([10]);

# axis.tickArguments([arguments])

… Most commonly, a count and a format specifier.

# axis.tickValues([values])

…

# axis.tickFormat([format])

…

# axis.tickSize([size])

…

# axis.tickSizeInner([size])

…

# axis.tickSizeOuter([size])

…

# axis.tickPadding([padding])

…

Axis Orientations

For use with axis.orient.

# d3.axisOrientTop

…

# d3.axisOrientRight

…

# d3.axisOrientBottom

…

# d3.axisOrientLeft

…