Visual Essay Network Tags - JSTOR-Labs/juncture GitHub Wiki

The network viewer is used to associate and display a network graph with a text element. There are 3 different types of network graphs available:

D3Plus Simple Network

Overview

This tag renders a basic network diagram using the D3Plus library. D3plus is a JavaScript re-usable chart library that extends the popular D3.js to enable the easy creation of visualizations. Example diagrams can be seen at https://d3plus.org/examples/. Documentation is available at https://d3plus.org/docs/. The ve-d3plus-network tag is used to generate this diagram and currently supports comma separated (CSV) or tab separated (TSV) delimited text files as input data.

Below is an example of the D3Plus network component:

Syntax

<param ve-d3plus-network>

Options

  • url: url to the input data file. *required

Usage examples

The data used in this example is defined in a TSV (tab separated values) file that can be seen at https://github.com/JSTOR-Labs/plant-humanities/blob/master/graphs/medici.tsv.

<param ve-d3plus-network url="https://jstor-labs.github.io/ve-components/public/data/medici.tsv">

D3Plus Ring Network

Overview

This tag renders a ring network diagram using the D3Plus library. Rings are a way to view network connections focused on 1 node in the network. This visualization shows primary and secondary connections of a specific node, and allows the user to click on a node to recenter the visualization on that selected node. The ve-d3plus-ring tag is used to generate this diagram and currently supports comma separated (CSV) or tab separated (TSV) delimited text files as input data. It also uses a center attribute to identify the name of the network'ss central node.

Below is an example of the D3Plus ring network component:

Syntax

<param ve-d3plus-ring-network>

Options

  • url: url to the input data file. *required
  • center: name of central node in network. *required

Usage examples

This example uses the same TSV input file used in the simple network example above.

<param ve-d3plus-ring-network 
       url="https://jstor-labs.github.io/ve-components/public/data/medici.tsv"
       center="Anna Maria Luisa de' Medici">

Vis.js Network

Overview

This tag renders a network diagram using the Vis.js library, a dynamic, browser based visualization JavaScript library. Examples of network graphs created in Vis.js can be seen at https://visjs.github.io/vis-network/examples/. The documentation for networks can be viewed at https://visjs.github.io/vis-network/docs/network/. The ve-vis-network tag is used to generate this graph and currently supports comma separated (CSV) or tab separated (TSV) delimited text files as input data. An optional title attribute can be defined to give the network graph a title.

Below is an example of the Vis.js network component:

Syntax

<param ve-vis-network>

Options

  • url: url to the input data file. *required
  • title: title of network graph.

Usage examples

The data file used in this example can be viewed at https://jstor-labs.github.io/plant-humanities/graphs/heliconia-v3.tsv.

<param ve-vis-network title="Heliconia imbricata and hummingbird mutualistic interactions" url="https://jstor-labs.github.io/plant-humanities/graphs/heliconia-v3.tsv">