Intelligent and customizable network chart components for react.
Only works with React projects. React must be installed separately.
npm install replot-network
Then with a module bundler like webpack/browserify that supports CommonJS/ES2015 modules, use as you would anything else.
import {NetworkChart} from 'replot-network'
replot-network is designed to create beautiful network charts right out of the box. The only required input is properly formatted data.
In the simplest case, just supply data and specify the keys for parents and childs of links:
render() {
let trades = [
{exporter: "Germany", importer: "European Union", volume: 1468990},
{exporter: "Netherlands", importer: "European Union", volume: 798744},
{exporter: "European Union", importer: "France", volume: 745931},
...
]
return(
<NetworkChart
data={trades}
parentKey="exporter"
childKey="importer"
/>
)
}
data
is the only required propsparentKey
defaults to"parent"
childKey
defaults to"child"
Dimensions may be specified by passing in width
and height
props with numbers, in the unit of pixels.
render() {
return(
<NetworkChart
data={trades} parentKey="exporter" childKey="importer"
width={600}
height={450}
/>
)
}
width
defaults to800
height
defaults to600
Width dimensions may also be specified with a string, as a percentage. The width will then be calculated as a proportion of the parent container.
render() {
return(
<NetworkChart
data={trades} parentKey="exporter" childKey="importer"
width="50%"
height={450}
/>
)
}
Default | width={600} height={450} | width="50%" height={450} |
---|---|---|
![]() |
![]() |
![]() |
Link color may be specified by passing in lineColor
prop with a hex string.
render() {
return(
<NetworkChart
data={trades} parentKey="exporter" childKey="importer"
lineColor="#52b3d9"
/>
)
}
lineColor
defaults to"#AAA"
Link opacity may be specified by passing in lineOpacity
prop with a number between 0 to 1.
render() {
return(
<NetworkChart
data={trades} parentKey="exporter" childKey="importer"
lineOpacity={1}
/>
)
}
lineOpacity
defaults to0.25
Link width may be specified by passing in lineWidth
prop with a number in the unit of pixels.
render() {
return(
<NetworkChart
data={trades} parentKey="exporter" childKey="importer"
lineWidth={5}
/>
)
}
lineWidth
defaults to1
lineColor="#52b3d9" | lineOpacity={1} | lineWidth={5} |
---|---|---|
![]() |
![]() |
![]() |
Link width may be weighted by setting the weightedLinks
prop to true
. Optionally, supply the linkKey
prop with the key of link weights and/or to the minLineWidth
and maxLineWidth
props with the minimum and maximum link widths in the unit of pixels.
Weighted link widths will range between minLineWidth
and maxLineWidth
.
render() {
return(
<NetworkChart
data={trades} parentKey="exporter" childKey="importer"
weightedLinks={true}
linkKey="volume"
minLineWidth={1}
maxLineWidth={20}
/>
)
}
weightedLinks
defaults tofalse
linkKey
defaults tonull
minLineWidth
defaults to1
maxLineWidth
defaults to10
If weightedLinks
is true
, but no linkKey
is supplied, link width is weighted by how many times the same link appears in data.
Default | linkKey="volume" | linkKey="volume" maxLineWidth={20} |
---|---|---|
![]() |
![]() |
![]() |
Node color may be specified through 2 different mechanisms, both through a color
prop.
If none of the mechanisms are specified, NetworkChart defaults to a built-in
color palette.
Users can supply the nodes
, nodeKey
, and groupKey
props to color nodes by groups. nodeKey
is the key of node IDs and groupKey
is the key of node groups.
render() {
let nodes = [
{region: "America", country: "Canada", exports: 402400},
{region: "Europe", country: "Belgium", exports: 250800},
{region: "Asia", country: "China", exports: 2011000},
...
]
return(
<NetworkChart
data={trades} parentKey="exporter" childKey="importer"
nodes={nodes}
nodeKey="country"
groupKey="region"
/>
)
}
nodes
defaults tonull
nodeKey
defaults toid
groupKey
defaults tonull
Default | groupKey="region" |
---|---|
![]() |
![]() |
Users can specify a list of colors to use as a palette, passed to the color
prop.
render() {
let colors = ["#fea9ac", "#f46b72", "#caa56f", "#8ebc57"]
return(
<NetworkChart
data={trades} parentKey="exporter" childKey="importer"
nodes={nodes} nodeKey="country" groupKey="region"
color={colors}
/>
)
}
color={colors} | color={colors} groupKey="region" |
---|---|
![]() |
![]() |
When node
and nodeKey
are supplied, users can also specify a function to assign colors to different nodes. Expected argument to the function is the data for each node.
colorByExports(node) {
if (node['exports'] > 1000000){
return "red"
} else {
return "black"
}
}
render() {
return(
<NetworkChart
data={trades} parentKey="exporter" childKey="importer"
nodes={nodes} nodeKey="country"
color={this.colorByExports}
/>
)
}
Node radius may be specified by passing in nodeRadius
prop with a number in the unit of pixels.
render() {
return(
<NetworkChart
data={trades} parentKey="exporter" childKey="importer"
nodeRadius={10}
/>
)
}
nodeRadius
defaults to5
Default | nodeRadius={10} |
---|---|
![]() |
![]() |
Node radius may be weighted by supplying nodes
, nodeKey
, and nodeWeightKey
props. nodeKey
is the key of node IDs and nodeWeightKey
is the key of node weights.
Optionally, supply the minRadius
and maxRadius
props with the minimum and maximum node radiuses in the unit of pixels. Weighted node radius will range between minRadius
and maxRadius
.
render() {
let nodes = [
{region: "America", country: "Canada", exports: 402400},
{region: "Europe", country: "Belgium", exports: 250800},
{region: "Asia", country: "China", exports: 2011000},
...
]
return(
<NetworkChart
data={trades} parentKey="exporter" childKey="importer"
nodes={nodes}
nodeKey="country"
nodeWeightKey="exports"
minRadius={5}
maxRadius={20}
/>
)
}
nodes
defaults tonull
nodeKey
defaults toid
nodeWeightKey
defaults tonull
minRadius
defaults to5
maxRadius
defaults to10
Default | nodeWeightKey="exports" | nodeWeightKey="exports" maxRadius={20} |
---|---|---|
![]() |
![]() |
![]() |
Node labels may be switched on by setting the showLabels
prop to true
.
render() {
return(
<NetworkChart
data={trades} parentKey="exporter" childKey="importer"
showLabels={true}
/>
)
}
showLabels
defaults tofalse
,true
displays the labels
Node labels display their IDs by default when switched on.
Node label color may be specified by passing in labelColor
prop with a hex string.
render() {
return(
<NetworkChart
data={trades} parentKey="exporter" childKey="importer"
showLabels={true}
labelColor="#52b3d9"
/>
)
}
labelColor
defaults to"#AAA"
showLabels={true} | showLabels={true} labelColor="#52b3d9" |
---|---|
![]() |
![]() |
Node label font size may be specified by passing in labelFontSize
prop with a number.
render() {
return(
<NetworkChart
data={trades} parentKey="exporter" childKey="importer"
showLabels={true}
labelFontSize={20}
/>
)
}
labelFontSize
defaults tonull
If labelFontSize
is not specified, labels are displayed in medium fonts.
Node label font family may be specified by passing in labelFontFamily
prop with a string.
render() {
return(
<NetworkChart
data={trades} parentKey="exporter" childKey="importer"
showLabels={true}
labelFontFamily="Courier"
/>
)
}
labelFontFamily
defaults tonull
If labelFontFamily
is not specified, labels inherit font family.
labelFontSize={20} | labelFontFamily="Courier" |
---|---|
![]() |
![]() |
Optionally, supply the the nodes
, nodeKey
, and labelKey
props to specify the label contents. nodeKey
is the key of node IDs and groupKey
is the key of node labels.
render() {
let nodes = [
{region: "America", country: "Canada", exports: 402400},
{region: "Europe", country: "Belgium", exports: 250800},
{region: "Asia", country: "China", exports: 2011000},
...
]
return(
<NetworkChart
data={trades} parentKey="exporter" childKey="importer"
showLabels={true}
nodes={nodes}
nodeKey="country"
labelKey="region"
/>
)
}
nodes
defaults tonull
nodeKey
defaults toid
labelKey
defaults tonull
Density of nodes may be specified by passing in attractionFactor
prop with a number.
render() {
return(
<NetworkChart
data={trades} parentKey="exporter" childKey="importer"
attractionFactor={5}
/>
)
}
attractionFactor
defaults to1
Default | attractionFactors={5} |
---|---|
![]() |
![]() |
Tooltips can display more specific information about a data series.
render() {
return(
<NetworkChart
data={trades} parentKey="exporter" childKey="importer"
tooltip={true}
tooltipColor="light"
/>
)
}
tooltip
defaults totrue
,false
turns the tooltip offtooltipColor
defaults tolight
, it can be set tolight
ordark
tooltipContents
defaults to data associated with the node (ID, group and weight if applicable)
Default (tooltipColor="light") | tooltipColor="dark" | tooltip={false} |
---|---|---|
![]() |
![]() |
![]() |
Users can customize what is displayed inside the tooltip with a function. Expected arguments to the function are the title of the location and the data for the specific location hovered over. The function should return JSX.
fillTooltip(data){
return(
<div>
<span>The data for this node looks like: {JSON.stringify(data)}</span>
</div>
)
}
render() {
return(
<NetworkChart
data={trades} parentKey="exporter" childKey="importer"
tooltip={true}
tooltipColor="dark"
tooltipContents={this.fillTooltip}
/>
)
}
Users can control the initial animation of the network chart, nodes falling into their positions.
animate
defaults totrue
,false
turns off the animation.