Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/dianaow/d3-network-time

d3 plugin to create a temporal network visualization
https://github.com/dianaow/d3-network-time

d3 d3-module d3js d3v4 data-visualization graph graph-drawing network-visualization temporal-graphs

Last synced: 2 months ago
JSON representation

d3 plugin to create a temporal network visualization

Awesome Lists containing this project

README 

        
# d3-network-time



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



[d3-force](https://github.com/d3/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



![alt text](https://github.com/dianaow/d3-network-time/raw/master/d3-network-time-gif.gif "Example GIF")



## Examples



- an [example](https://github.com/dianaow/d3-network-time/blob/master/example/index.html) for a highly connected graph

- an [example](https://github.com/dianaow/d3-network-time/blob/master/example/index1.html) for a disjointed graph, showing how to use the API with element styling

- [Observable notebook](https://observablehq.com/@dianaow/temporal-network-visualization/3)



## Installing



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



```js

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

```



Otherwise, download the [latest build](https://github.com/dianaow/d3-network-time/tree/master/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:



```html



  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)



```



## 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.



```js

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](https://github.com/dianaow/d3-network-time/blob/master/src/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