Visual Essay Network Tags
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:
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:
<param ve-d3plus-network>- url: url to the input data file. *required
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">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:
<param ve-d3plus-ring-network>- url: url to the input data file. *required
- center: name of central node in network. *required
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">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:
<param ve-vis-network>- url: url to the input data file. *required
- title: title of network graph.
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">