3 Ways to Read Network Data in D3.js Library


By Tamer Khraisha



An important library in Javascript is the D3.js library (where D3 stands for Data-Driven Documents). To read about this library you can visit the official website. Among the most common visualizations in D3 are networks. Networks are a collection of nodes and links between them. In this article, you can find three ways of reading network data in a D3 code. Even if you have already picked your favorite way of doing it, it helps to know some alternatives in order to read other people's code. The examples provided below are taken from the bl.ocks.org website.

1 - Including the data Within the html file

The first way of reading data in a D3 code is by creating a Javascript array inside the script that should be included in the body of the HTML page that contains the information about the nodes and links and any possible attribute. This option results convenient if we have a small number of links.

        
        
 <body>
 ..
 ..
 <script> # this is the D3 script for our visualization.
 
 var links = [
   {source: "Node1", target: "Nod2", Weight:10},
   {source: "Node1", target: "Node3", Weight: 5},
   {source: "Node4", target: "Node2", Weight: 13},
   {source: "Node6", target: "Node4", Weight: 1},

 ];
 .
 .
 .
 ....The remaining D3 code 

 </script>
	        
    


Basic examples with code could be found here and here.

2- From a CSV file

The second option is to load data from a CSV file. In my experience, I could find that there are two ways to create CSV files for a D3 network visualization, the first is to create a unique CSV files that contains the list of links and their properties and the second is to create one CSV file for nodes and another CSV for links.

A single CSV would look like this :

        
        
 source,target,value
 Harry,Sally,1.2
 Harry,Mario,1.3
 Sarah,Alice,0.2
 Eveie,Alice,0.5
 Peter,Alice,1.6
 Mario,Alice,0.4
 James,Alice,0.6
 Harry,Carol,0.7
 Harry,Nicky,0.8
	        
    


Basic example with code could be found here . Click here.

Separate csv files of the links and nodes. Example from this source

        

 nodes.csv

 node,group
 celery,group1
 peanut butter,group2
 hummus,group1
 banana,group1
 honey,group2
 ranch dressing,group2


 links.csv

 source,target,type
 banana,peanut butter,type1
 celery,peanut butter,type1
 celery,ranch dressing,type2
 banana,honey,type2
 hummus,celery,type2

	        
    


2- Reading data from a JSON file.

JSON files are among the most common formats for storing network data. The basic structure of a JSON file containing network data is the following :

        
        
 GraphJson = {
   	 "nodes": [
	 	 {"id": "0", "name":"Node1", "group":1,"degree":10}, 
		 {"id": "1", "name":"Node2", "group":1,"degree":20}, 
		 {"id": "2", "name":"Node3", "group":3,"degree":15}, 
		 {"id": "3", "name":"Node4", "group":2,"degree":10}, 
		 {"id": "4", "name":"Node5", "group":2,"degree":5}, 
		 {"id": "5", "name":"Node6", "group":3,"degree":20}, 
		 {"id": "6", "name":"Node7", "group":1,"degree":10}, 
	 ],
	 "links": [
		 {"source": 0, "target": 1, "weight": 6}, 
		 {"source": 0, "target": 7, "weight": 4},
		 {"source": 1, "target": 2, "weight": 6}, 
		 {"source": 2, "target": 7, "weight": 4}

	 ]
 }
	        
    


A good example that uses JSON file to plot data is available here


1 August 2017 – coding
5 min – 300 words
Tamer Khraisha – Email : tamer.khraisha2@gmail.com– Address : Nádor u., Budapest, 1051