Overview
An application programming interface (API) is a connection between computers or applications that allows specified interactions to expose services to be provided.
D3.js (where 'D3' is short for 'Data Driven Documents') is a JavaScript library which is designed to produce data visualisations. It does this by binding data to the Domain Object Model (DOM) which can be presented in the browser.
D3 provides the specification for a data driven approach to DOM manipulation and as such the d3.js library provides the API for the interaction between the data and the DOM.
API structure
The D3.js API contains several hundred functions, and they can be grouped into following logical units:
- Arrays: Array manipulation, ordering, searching, summarizing, etc.
- Axes: Human-readable reference marks for scales.
- Brushes: Select a one- or two-dimensional region using the mouse or touch.
- Chords: Visualize relationships or network flow with a circular layout
- Colors: Color manipulation and color space conversion.
- Color Schemes: Color ramps and palettes for quantitative, ordinal and categorical scales.
- Contours: Compute contour polygons using marching squares.
- Voronoi Diagrams: Compute the Voronoi diagram of a set of two-dimensional points.
- Dispatches: Separate concerns using named callbacks.
- Dragging: Drag and drop SVG, HTML or Canvas using mouse or touch input.
- Delimiter-Separated Values: Parse and format delimiter-separated values, most commonly CSV and TSV.
- Easings: Easing functions for smooth animation.
- Fetches: Convenience methods on top of the Fetch API.
- Forces: Force-directed graph layout using velocity Verlet integration.
- Number Formats: Format numbers for human consumption.
- Geographies: Geographic projections, shapes and math.
- Hierarchies: Layout algorithms for visualizing hierarchical data.
- Interpolators: Interpolate numbers, colors, strings, arrays, objects, whatever!
- Paths: Serialize Canvas path commands to SVG.
- Polygons: Geometric operations for two-dimensional polygons.
- Quadtrees: Two-dimensional recursive spatial subdivision.
- Random Numbers: Generate random numbers from various distributions.
- Scales: Encodings that map abstract data to visual representation.
- Selections: Transform the DOM by selecting elements and joining to data.
- Shapes: Graphical primitives for visualization.
- Time Formats: Parse and format times, inspired by strptime and strftime.
- Time Intervals: A calculator for humanity’s peculiar conventions of time.
- Timers: An efficient queue for managing thousands of concurrent animations.
- Transitions: Animated transitions for selections.
- Zooming: Pan and zoom SVG, HTML or Canvas using mouse or touch input.
Each of these categories provides access to standard specified interactions that allow data bound to the DOM elements to be manipulated and presented to the user.
Example
To access the d3-array function in an html document we can either load the d3.js library in full or just the specific module. If we were doing this from a traditional CDN service that might look something like the following when loading the full library;
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
... or like the following when loading just the d3-array module ...
<script src="https://cdn.jsdelivr.net/npm/d3-array@3"></script>
To test the function to find the mean value of an array of numbers, we can use the d3.mean function like so;
<script>
var a = [10, 53, 8, 99, 1, 6];
new_size = d3.mean(a);
console.log(new_size);
</script>
The output to the console will be the value 29.5 which is the mean value of the numbers 10, 53, 8, 99, 1 and 6.
To extend the example slightly the following adds two paragraph lines to an html page, computes the mean value of an array and then selects the first of our paragraphs and changes the size of the text to the mean value;
<body>
<!-- load the d3.js library -->
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<p>This is the first line</p>
<p>This is the second line</p>
<script>
var a = [10, 53, 8, 99, 1, 6];
new_size = d3.mean(a);
console.log(new_size);
d3.select("p").style("font-size", new_size + "px");
</script>
</body>
And what we see should look like the following in the browser....
This is the first line
This is the second line
