dianaow / d3-network-time

d3 plugin to create a temporal network visualization

d3-network-time

This is a d3 plugin to create a temporal network visualization.

d3-force is used to construct the graph layout. This plugin can be used in two ways:

• dynamic: animates the evolution of the network over time, with the option to display each iteration between dates, or just a single step transition between two dates
• static: only displays the network at a specific point in time

Examples

• an example for a highly connected graph
• an example for a disjointed graph, showing how to use the API with element styling
• Observable notebook

Installing

If you use NPM, npm install d3-network-time and import it with

import { network } from "d3-network-time"

Otherwise, download the latest build. AMD, CommonJS, and vanilla environments are supported. In vanilla, you must include a script tag with the d3 library before including d3-network-time.js, and a d3 global is exported:

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="d3-network-map.js"></script>
<script>
  var network = d3.network()

  var simulation = d3.forceSimulation()

  var radiusScale = d3.scaleSqrt().domain([1, 50]).range([3, 25])
  var radiusAccessor = (d) => radiusScale(d.value)

  network(simulation)
    .selector(".Network")
    .width(1200)
    .height(800)
    .start(1217567877000)
    .end(1218036494000)
    .animation({ mode: "auto", step: "day", show_time: true })
    .style({ radiusAccessor })(data)
</script>

API Reference

# d3.network()

Constructs a new network generator with the default configuration values.

# network(data)

Creates a network layout with the specified data. The animation starts automatically.

The dataset must contain an object of nodes and links with the following attributes:

Timestamps of nodes and links must be in UNIX Epoch time.

var data = {
  nodes: [
    {
      id: "1",
      date: 1217567877000,
    },
    {
      id: "2",
      date: 1217567877000,
    },
    {
      id: "3",
      date: 1218036494000,
    },
  ],
  links: [
    {
      start_id: "1",
      end_id: "2",
      date: 1217567877000,
    },
    {
      start_id: "1",
      end_id: "3",
      date: 1218036494000,
    },
  ],
}

# network([simulation])

This is the new simulation to initialize. Users can specify forces to layout the graph according to their requirements. Nodes and edges should not be specified here.

# network.selector([selector])

This is the CSS selector for the div element containing the svg element in which the network is rendered in.

# network.height([height])

This height gives the height of the svg element in which the network is rendered in. If height is not specified, it defaults to 800 pixels.

# network.width([width])

This width gives the width of the svg element in which the network is rendered in. If width is not specified, it defaults to 800 pixels.

# network.start([start])

start represents the date (a UNIX Epoch timestamp) which the animation begins at. If start is not specified, returns the first date found in data.links.

# network.end([end])

end represents the date (a UNIX Epoch timestamp) which the animation stops. If end is not specified, returns the last date found in data.links.

# network.animation([animation])

The animation represents the animation parameters. If animation is not specified, it defaults to {mode: null, step: 'day', show_time: false}. This is a static render of graph only at the specified start value, ignoring the end value, if provided.

If animation.mode is 'auto', the animation runs upon function invocation, displaying each iteration between a range of dates between start and end value. If style.mode is 'step', then only a transition between start and end value is displayed.

animation.step: represents the time iteration gap and has to be any of the following values: ['year', 'month', 'day', 'week', 'hour', 'minute', 'second', 'millisecond']

animation.show_time: allows user to show or hide the timestamp header

# network.style([style])

The style represents the style of the graph elements. If style is not specified, it defaults to the styles specified in consts.js. Some attributes such as node and edge color and opacity have to be represented as accessors, while some attributes such as text size and color are represented as a single value.

npm version history:

0.0.1-0.0.3: Time iteration based on YYYY-MM-DD datetime string 0.1.0: Time iteration based on UNIX epoch timstamp 0.2.0: Allow user to style graph elements and customize force-directed layout

d3-network-time's Issues

need help to implement multilevel inner circle

Hi,

https://observablehq.com/@dianaow/force-directed-graph-with-circle-packing/2
you are doing great work on d3 force-directed-graph-with-circle-packing, I try to add multiple inner circles into d3 but I can't achieve it.

For Example
Draw the two inner circles into the root node like

we try to add two or more circle into child circle like below