Awesome

d3plus-network

Javascript network visualizations built upon d3 modules.

Installing

If using npm, npm install d3plus-network. Otherwise, you can download the latest release from GitHub or load from a CDN.

import modules from "d3plus-network";

d3plus-network can be loaded as a standalone library or bundled as part of D3plus. ES modules, AMD, CommonJS, and vanilla environments are supported. In vanilla, a d3plus global is exported:

<script src="https://cdn.jsdelivr.net/npm/d3plus-network@1"></script>
<script>
  console.log(d3plus);
</script>

Examples

Live examples can be found on d3plus.org, which includes a collection of example visualizations using d3plus-react. These examples are powered by the d3plus-storybook repo, and PRs are always welcome. :beers:

API Reference

Network
Rings
Sankey

<a name="Network"></a>

Network <>

This is a global class, and extends all of the methods and functionality of <code>Viz</code>.

Network ⇐ <code>Viz</code>
- new Network()
- .hover([value]) ↩︎
- .links(links, [formatter]) ↩︎
- .linkSize([value]) ↩︎
- .linkSizeMin([value]) ↩︎
- .linkSizeScale([value]) ↩︎
- .nodeGroupBy([value]) ↩︎
- .nodes(nodes, [formatter]) ↩︎
- .size([value]) ↩︎
- .sizeMax([value]) ↩︎
- .sizeMin([value]) ↩︎
- .sizeScale([value]) ↩︎
- .x([value]) ↩︎
- .y([value]) ↩︎
- .linkSize([value]) ↩︎
- .linkSizeMin([value]) ↩︎
- .linkSizeScale([value]) ↩︎

<a name="new_Network_new" href="#new_Network_new">#</a> new Network()

Creates a network visualization based on a defined set of nodes and edges. Click here for help getting started using the Network class.

<a name="Network.hover" href="#Network.hover">#</a> Network.hover([value]) <>

If value is specified, sets the hover method to the specified function and returns the current class instance.

This is a static method of <code>Network</code>, and is chainable with other methods of this Class.

<a name="Network.links" href="#Network.links">#</a> Network.links(links, [formatter]) <>

A predefined Array of edges that connect each object passed to the node method. The source and target keys in each link need to map to the nodes in one of three ways:

The index of the node in the nodes array (as in this example).
The actual node Object itself.
A String value matching the id of the node.

The value passed should either be an Array of data or a String representing a filepath or URL to be loaded. An optional formatting function can be passed as a second argument to this method. This custom function will be passed the data that has been loaded, as long as there are no errors. This function should return the final links Array.

This is a static method of <code>Network</code>, and is chainable with other methods of this Class.

Param	Type	Description
links	<code>Array</code> \| <code>String</code>	= []
[formatter]	<code>function</code>

<a name="Network.linkSize" href="#Network.linkSize">#</a> Network.linkSize([value]) <>

Defines the thickness of the links connecting each node. The value provided can be either a pixel Number to be used for all links, or an accessor function that returns a specific data value to be used in an automatically calculated linear scale.

This is a static method of <code>Network</code>, and is chainable with other methods of this Class.

<a name="Network.linkSizeMin" href="#Network.linkSizeMin">#</a> Network.linkSizeMin([value]) <>

Defines the minimum pixel stroke width used in link sizing.

This is a static method of <code>Network</code>, and is chainable with other methods of this Class.

<a name="Network.linkSizeScale" href="#Network.linkSizeScale">#</a> Network.linkSizeScale([value]) <>

Sets the specific type of continuous d3-scale used when calculating the pixel size of links in the network.

This is a static method of <code>Network</code>, and is chainable with other methods of this Class.

<a name="Network.nodeGroupBy" href="#Network.nodeGroupBy">#</a> Network.nodeGroupBy([value]) <>

If value is specified, sets the node group accessor(s) to the specified string, function, or array of values and returns the current class instance. This method overrides the default .groupBy() function from being used with the data passed to .nodes(). If value is not specified, returns the current node group accessor.

This is a static method of <code>Network</code>, and is chainable with other methods of this Class.

<a name="Network.nodes" href="#Network.nodes">#</a> Network.nodes(nodes, [formatter]) <>

The list of nodes to be used for drawing the network. The value passed should either be an Array of data or a String representing a filepath or URL to be loaded.

Additionally, a custom formatting function can be passed as a second argument to this method. This custom function will be passed the data that has been loaded, as long as there are no errors. This function should return the final node Array.

This is a static method of <code>Network</code>, and is chainable with other methods of this Class.

Param	Type	Description
nodes	<code>Array</code> \| <code>String</code>	= []
[formatter]	<code>function</code>

<a name="Network.size" href="#Network.size">#</a> Network.size([value]) <>

If value is specified, sets the size accessor to the specified function or data key and returns the current class instance. If value is not specified, returns the current size accessor.

This is a static method of <code>Network</code>, and is chainable with other methods of this Class.

<a name="Network.sizeMax" href="#Network.sizeMax">#</a> Network.sizeMax([value]) <>

Defines the maximum pixel radius used in size scaling. By default, the maximum size is determined by half the distance of the two closest nodes.

This is a static method of <code>Network</code>, and is chainable with other methods of this Class.

<a name="Network.sizeMin" href="#Network.sizeMin">#</a> Network.sizeMin([value]) <>

Defines the minimum pixel radius used in size scaling.

This is a static method of <code>Network</code>, and is chainable with other methods of this Class.

<a name="Network.sizeScale" href="#Network.sizeScale">#</a> Network.sizeScale([value]) <>

Sets the specific type of continuous d3-scale used when calculating the pixel size of nodes in the network.

This is a static method of <code>Network</code>, and is chainable with other methods of this Class.

<a name="Network.x" href="#Network.x">#</a> Network.x([value]) <>

If value is specified, sets the x accessor to the specified function or string matching a key in the data and returns the current class instance. The data passed to .data() takes priority over the .nodes() data array. If value is not specified, returns the current x accessor. By default, the x and y positions are determined dynamically based on default force layout properties.

This is a static method of <code>Network</code>, and is chainable with other methods of this Class.

<a name="Network.y" href="#Network.y">#</a> Network.y([value]) <>

If value is specified, sets the y accessor to the specified function or string matching a key in the data and returns the current class instance. The data passed to .data() takes priority over the .nodes() data array. If value is not specified, returns the current y accessor. By default, the x and y positions are determined dynamically based on default force layout properties.

This is a static method of <code>Network</code>, and is chainable with other methods of this Class.

<a name="Network.linkSize" href="#Network.linkSize">#</a> Network.linkSize([value]) <>

Defines the thickness of the links connecting each node. The value provided can be either a pixel Number to be used for all links, or an accessor function that returns a specific data value to be used in an automatically calculated linear scale.

This is a static method of <code>Network</code>, and is chainable with other methods of this Class.

<a name="Network.linkSizeMin" href="#Network.linkSizeMin">#</a> Network.linkSizeMin([value]) <>

Defines the minimum pixel stroke width used in link sizing.

This is a static method of <code>Network</code>, and is chainable with other methods of this Class.

<a name="Network.linkSizeScale" href="#Network.linkSizeScale">#</a> Network.linkSizeScale([value]) <>

Sets the specific type of continuous d3-scale used when calculating the pixel size of links in the network.

This is a static method of <code>Network</code>, and is chainable with other methods of this Class.

<a name="Rings"></a>

Rings <>

This is a global class, and extends all of the methods and functionality of <code>Viz</code>.

Rings ⇐ <code>Viz</code>
- new Rings()
- .center(_) ↩︎
- .hover([value]) ↩︎
- .links(links, [formatter]) ↩︎
- .nodeGroupBy([value]) ↩︎
- .nodes(nodes, [formatter]) ↩︎
- .size([value]) ↩︎
- .sizeMax([value]) ↩︎
- .sizeMin([value]) ↩︎
- .sizeScale([value]) ↩︎

<a name="new_Rings_new" href="#new_Rings_new">#</a> new Rings()

Creates a ring visualization based on a defined set of nodes and edges. Click here for help getting started using the Rings class.

<a name="Rings.center" href="#Rings.center">#</a> Rings.center(_) <>

Sets the center node to be the node with the given id.

This is a static method of <code>Rings</code>, and is chainable with other methods of this Class.

<a name="Rings.hover" href="#Rings.hover">#</a> Rings.hover([value]) <>

If value is specified, sets the hover method to the specified function and returns the current class instance.

This is a static method of <code>Rings</code>, and is chainable with other methods of this Class.

<a name="Rings.links" href="#Rings.links">#</a> Rings.links(links, [formatter]) <>

A predefined Array of edges that connect each object passed to the node method. The source and target keys in each link need to map to the nodes in one of three ways:

The index of the node in the nodes array (as in this example).
The actual node Object itself.
A String value matching the id of the node.

The value passed should either be an Array of data or a String representing a filepath or URL to be loaded. An optional formatting function can be passed as a second argument to this method. This custom function will be passed the data that has been loaded, as long as there are no errors. This function should return the final links Array.

This is a static method of <code>Rings</code>, and is chainable with other methods of this Class.

Param	Type	Description
links	<code>Array</code> \| <code>String</code>	= []
[formatter]	<code>function</code>

<a name="Rings.nodeGroupBy" href="#Rings.nodeGroupBy">#</a> Rings.nodeGroupBy([value]) <>

If value is specified, sets the node group accessor(s) to the specified string, function, or array of values and returns the current class instance. This method overrides the default .groupBy() function from being used with the data passed to .nodes(). If value is not specified, returns the current node group accessor.

This is a static method of <code>Rings</code>, and is chainable with other methods of this Class.

<a name="Rings.nodes" href="#Rings.nodes">#</a> Rings.nodes(nodes, [formatter]) <>

The list of nodes to be used for drawing the rings network. The value passed should either be an Array of data or a String representing a filepath or URL to be loaded.

Additionally, a custom formatting function can be passed as a second argument to this method. This custom function will be passed the data that has been loaded, as long as there are no errors. This function should return the final node Array.

This is a static method of <code>Rings</code>, and is chainable with other methods of this Class.

Param	Type	Description
nodes	<code>Array</code> \| <code>String</code>	= []
[formatter]	<code>function</code>

<a name="Rings.size" href="#Rings.size">#</a> Rings.size([value]) <>

If value is specified, sets the size accessor to the specified function or data key and returns the current class instance. If value is not specified, returns the current size accessor.

This is a static method of <code>Rings</code>, and is chainable with other methods of this Class.

<a name="Rings.sizeMax" href="#Rings.sizeMax">#</a> Rings.sizeMax([value]) <>

If value is specified, sets the size scale maximum to the specified number and returns the current class instance. If value is not specified, returns the current size scale maximum. By default, the maximum size is determined by half the distance of the two closest nodes.

This is a static method of <code>Rings</code>, and is chainable with other methods of this Class.

<a name="Rings.sizeMin" href="#Rings.sizeMin">#</a> Rings.sizeMin([value]) <>

If value is specified, sets the size scale minimum to the specified number and returns the current class instance. If value is not specified, returns the current size scale minimum.

This is a static method of <code>Rings</code>, and is chainable with other methods of this Class.

<a name="Rings.sizeScale" href="#Rings.sizeScale">#</a> Rings.sizeScale([value]) <>

If value is specified, sets the size scale to the specified string and returns the current class instance. If value is not specified, returns the current size scale.

This is a static method of <code>Rings</code>, and is chainable with other methods of this Class.

<a name="Sankey"></a>

Sankey <>

This is a global class, and extends all of the methods and functionality of <code>Viz</code>.

Sankey ⇐ <code>Viz</code>
- new Sankey()
- .hover([value]) ↩︎
- .links(links) ↩︎
- .linksSource([value]) ↩︎
- .linksTarget([value]) ↩︎
- .nodeAlign([value]) ↩︎
- .nodeId([value]) ↩︎
- .nodes(nodes) ↩︎
- .nodePadding([value]) ↩︎
- .nodeWidth([value]) ↩︎
- .value(value)

<a name="new_Sankey_new" href="#new_Sankey_new">#</a> new Sankey()

Creates a sankey visualization based on a defined set of nodes and links. Click here for help getting started using the Sankey class.

<a name="Sankey.hover" href="#Sankey.hover">#</a> Sankey.hover([value]) <>

If value is specified, sets the hover method to the specified function and returns the current class instance.

This is a static method of <code>Sankey</code>, and is chainable with other methods of this Class.

<a name="Sankey.links" href="#Sankey.links">#</a> Sankey.links(links) <>

A predefined Array of edges that connect each object passed to the node method. The source and target keys in each link need to map to the nodes in one of one way:

A String value matching the id of the node.

The value passed should be an Array of data. An optional formatting function can be passed as a second argument to this method. This custom function will be passed the data that has been loaded, as long as there are no errors. This function should return the final links Array.

This is a static method of <code>Sankey</code>, and is chainable with other methods of this Class.

<a name="Sankey.linksSource" href="#Sankey.linksSource">#</a> Sankey.linksSource([value]) <>

The key inside of each link Object that references the source node.

This is a static method of <code>Sankey</code>, and is chainable with other methods of this Class.

<a name="Sankey.linksTarget" href="#Sankey.linksTarget">#</a> Sankey.linksTarget([value]) <>

The key inside of each link Object that references the target node.

This is a static method of <code>Sankey</code>, and is chainable with other methods of this Class.

<a name="Sankey.nodeAlign" href="#Sankey.nodeAlign">#</a> Sankey.nodeAlign([value]) <>

Sets the nodeAlign property of the sankey layout, which can either be "left", "right", "center", or "justify".

This is a static method of <code>Sankey</code>, and is chainable with other methods of this Class.

<a name="Sankey.nodeId" href="#Sankey.nodeId">#</a> Sankey.nodeId([value]) <>

If value is specified, sets the node id accessor(s) to the specified array of values and returns the current class instance. If value is not specified, returns the current node group accessor.

This is a static method of <code>Sankey</code>, and is chainable with other methods of this Class.

<a name="Sankey.nodes" href="#Sankey.nodes">#</a> Sankey.nodes(nodes) <>

The list of nodes to be used for drawing the network. The value passed must be an Array of data.

Additionally, a custom formatting function can be passed as a second argument to this method. This custom function will be passed the data that has been loaded, as long as there are no errors. This function should return the final node Array.

This is a static method of <code>Sankey</code>, and is chainable with other methods of this Class.

<a name="Sankey.nodePadding" href="#Sankey.nodePadding">#</a> Sankey.nodePadding([value]) <>

If value is specified, sets the padding of the node and returns the current class instance. If value is not specified, returns the current nodePadding. By default, the nodePadding size is 8.

This is a static method of <code>Sankey</code>, and is chainable with other methods of this Class.

<a name="Sankey.nodeWidth" href="#Sankey.nodeWidth">#</a> Sankey.nodeWidth([value]) <>

If value is specified, sets the width of the node and returns the current class instance. If value is not specified, returns the current nodeWidth. By default, the nodeWidth size is 30.

This is a static method of <code>Sankey</code>, and is chainable with other methods of this Class.

<a name="Sankey.value" href="#Sankey.value">#</a> Sankey.value(value) <>

If value is specified, sets the width of the links and returns the current class instance. If value is not specified, returns the current value accessor.

This is a static method of <code>Sankey</code>.

function value(d) {
  return d.value;
}

<sub>Documentation generated on Wed, 25 Jan 2023 17:33:01 GMT</sub>