network visualization based on json and...
TRANSCRIPT
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Network visualizationbased on JSON and D3js
Vladimir Batagelj
IMFM Ljubljana and IAM UP Koper
Second European Conference on Social NetworksJune 14-17 2016 Paris
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Outline
1 Introduction2 Description of networks3 JSON4 JSON and D3js5 JSON and R6 Displayer7 To do8 References
Vladimir Batagelj vladimirbatageljfmfuni-ljsi
Current version of slides (14 junij 2016 ob 14 40)EUSNrsquo16 slides PDF
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Motivation
Work in progress
A year and half ago I wanted to vi-sualize some networks in Python Iwas not satisfied with existing op-tions The library matplotlib (alsoused by NetworkX) is developedfor visualization of statistical dataand resultsOn the other side there exists anexcellent library D3js for interac-tive visualization on the web (andlocally) in SVG format Most ofthe network data for D3js are pre-pared in the JSON format Thereexist many nice D3js based ne-twork visualizations
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Networks in D3js
bull Force Force-Directed Graph Force Layout amp Matrix MarketFormat 3D Force Layout An A to Z of extra features for the d3force layout
bull Directed Directed Graph Editor Directed Edges (Curves andArrow Markers) Mobile Patent Suits
bull Matrix Co-occurrence Matrix
bull Hive Hive Plots
bull Chord Chord Diagram Hierarchical Edge Bundling
bull Applications Linked JAZZ Ontology Visualization VisualizingPackage Dependencies Connectome explorer for the rdquobrainrdquo ofC elegans Gene functional interaction networks
bull More D3 gallery The Big List of D3js Examples - ChristopheViau Over 2000 D3js Examples and Demos
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Project
bull netJSON develop a JSON based format for description ofnetworks It should be ldquocompleterdquo ndash it can be used also todescribe multi-relational temporal two-mode networks andcollections of networks netJSON network description can beextended with a layout information (jsongraph)
bull netD3js collect and adapt for netJSON selected existingnetwork visualization solutions based on D3js and develop newones
netJSON could serve as a data exchange format among networkanalysis programs (conversion program fromto netJSON)
Programers may export their results in netJSON and use net3Djs fortheir visualization
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
netJSON and netD3js for SNA analysts
network rarr netJSON rarr SVG rarr PDF PNG EPS
bull Prepare your network data in netJSON format (in a text editorfrom Excel tables using R export from SNA programs andconvert to netJSON) Add the layout information
bull Use selected netD3js templates to visualize the network
bull Optionally save the SVG picture enhance it in some vectorgraphics editor (AI Inkscape) and export it in selected format(PDF ESP PNG )
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Networks
A network is based on two sets ndash set of nodes (vertices) thatrepresent the selected units and set of links (lines) that representties between units They determine a graph A line can be directed ndashan arc or undirected ndash an edgeAdditional data about nodes or links may be known ndash their properties(attributes) For example namelabel type value
Network = Graph + DataA network N = (VLPW) consists of
bull a graph G = (VL) where V is the set of nodes A is the set ofarcs E is the set of edges and L = E cup A is the set of linksn = |V| m = |L|
bull P vertex value functions properties p V rarr A
bull W line value functions weights w L rarr B
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Description of networks
How to describe a network N In principle the answer is simple ndash welist its components VLP and W
The simplest way is to describe a network N by providing (VP) and(LW) in a form of two tables
As an example let us describe a part of network determined by thefollowing worksGeneralized blockmodeling Clustering with relational constraintPartitioning signed social networks The Strength of Weak Ties
There are nodes of different types (modes) persons papers booksseries journals publishers and different relations among themauthor of editor of contained in cites published by
Both tables are often maintained in Excel They can be exported as
text in CSV (Comma Separated Values) format
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibNodescsv
namemodecountrysexyearvolnumfPagelPagexyBatagelj VladimirpersonSIm80916537Doreian PatrickpersonUSm35856791Ferligoj AnuskapersonSIf61956807Granovetter MarkpersonUSm14566605Moustaki IrinipersonUKf78302280Mrvar AndrejpersonSIm47806301Clustering with relational constraintpaper19824741342668413801The Strength of Weak Tiespaper19737861360138011133294Partitioning signed social networkspaper200931111140803378Generalized Blockmodelingbook200524138553304459Psychometrikajournal74180861Social Networksjournal32142365The American Journal of Sociologyjournal11131689Structural Analysis in the Social Sciencesseries31040828Cambridge University PresspublisherUK53432382SpringerpublisherUS88461740
bibNodescsv
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibLinkscsv
fromrelationtoBatagelj VladimirauthorOfGeneralized BlockmodelingDoreian PatrickauthorOfGeneralized BlockmodelingFerligoj AnuskaauthorOfGeneralized BlockmodelingBatagelj VladimirauthorOfClustering with relational constraintFerligoj AnuskaauthorOfClustering with relational constraintGranovetter MarkauthorOfThe Strength of Weak TiesGranovetter MarkeditorOfStructural Analysis in the Social SciencesDoreian PatrickauthorOfPartitioning signed social networksMrvar AndrejauthorOfPartitioning signed social networksMoustaki IrinieditorOfPsychometrikaDoreian PatrickeditorOfSocial NetworksGeneralized BlockmodelingcontainedInStructural Analysis in the Social SciencesClustering with relational constraintcontainedInPsychometrikaThe Strength of Weak TiescontainedInThe American Journal of SociologyPartitioning signed social networkscontainedInSocial NetworksPartitioning signed social networkscitesGeneralized BlockmodelingGeneralized BlockmodelingcitesClustering with relational constraintStructural Analysis in the Social SciencespublishedByCambridge University PressPsychometrikapublishedBySpringer
bibLinkscsv
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
CSV2PajekR
transforming CSV file to Pajek files by Vladimir Batagelj June 2016setwd(CUsersbatageljworkPythongraphSVGEUSN)colC lt- c(rep(character4)rep(integer7)) nas lt- c(NANaN)nodes lt- readcsv2(bibNodescsvencoding=rsquoUTF-8rsquocolClasses=colCnastrings=nas)n lt- nrow(nodes) M lt- factor(nodes$mode) S lt- factor(nodes$sex)mod lt- levels(M) sx lt- levels(S) S lt- asnumeric(S) S[isna(S)] lt- 0links lt- readcsv2(bibLinkscsvencoding=rsquoUTF-8rsquocolClasses=character)F lt- factor(links$fromlevels=nodes$nameordered=TRUE)T lt- factor(links$tolevels=nodes$nameordered=TRUE)R lt- factor(links$relation) rel lt- levels(R)net lt- file(bibnetw) cat(rsquovertices rsquonrsquonrsquofile=net)clu lt- file(bibModecluw) sex lt- file(bibSexcluw)cat(rsquorsquofile=clu) cat(rsquorsquofile=sex)for(i in 1length(mod)) cat(rsquo rsquoimod[i]file=clu)cat(rsquonvertices rsquonrsquonrsquofile=clu)for(i in 1length(sx)) cat(rsquo rsquoisx[i]file=sex)cat(rsquonvertices rsquonrsquonrsquofile=sex)for(v in 1n) cat(vrsquo rsquonodes$name[v]rsquonrsquosep=rsquorsquofile=net)cat(M[v]rsquonrsquofile=clu) cat(S[v]rsquonrsquofile=sex)
for(r in 1length(rel)) cat(rsquoarcs rsquorrsquo rsquorel[r]rsquonrsquosep=rsquorsquofile=net)cat(rsquoarcsnrsquofile=net)for(a in 1nrow(links))cat(R[a]rsquo rsquoF[a]rsquo rsquoT[a]rsquo 1 l rsquorel[R[a]]rsquonrsquosep=rsquorsquofile=net)
close(net) close(clu) close(sex)
CSV2PajekR
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibnet
vertices 16 arcs1 Batagelj Vladimir 1 1 10 1 l authorOf2 Doreian Patrick 1 2 10 1 l authorOf3 Ferligoj Anuska 1 3 10 1 l authorOf4 Granovetter Mark 1 1 7 1 l authorOf5 Moustaki Irini 1 3 7 1 l authorOf6 Mrvar Andrej 1 4 8 1 l authorOf7 Clustering with relational constraint 4 4 14 1 l editorOf8 The Strength of Weak Ties 1 2 9 1 l authorOf9 Partitioning signed social networks 1 6 9 1 l authorOf10 Generalized Blockmodeling 4 5 11 1 l editorOf11 Psychometrika 4 2 12 1 l editorOf12 Social Networks 3 10 14 1 l containedIn13 The American Journal of Sociology 3 7 11 1 l containedIn14 Structural Analysis in the Social Sciences 3 8 13 1 l containedIn15 Cambridge University Press 3 9 12 1 l containedIn16 Springer 2 9 10 1 l citesarcs 1 authorOf 2 10 7 1 l citesarcs 2 cites 5 14 15 1 l publishedByarcs 3 containedIn 5 11 16 1 l publishedByarcs 4 editorOfarcs 5 publishedBy
bibnet bibModeclu bibSexclu
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Bibliographic network ndash picture Pajek
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
XML api ndash JSON api
In near past for description of structured data the XML (ExtensibleMarkup Language) was mostly used In last five years a JSON formatstarted to replace it Google trends
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON
JSON (JavaScript Object Notation) is a text data format thatpreserves the structure of data objects It is ldquocompatiblerdquo with basicdata structures in modern programming languages
The initial version of JSON vas developed by Douglas Crockford(around 2002) He based it on the Javascript notation The principalidea is if we apply on a string (sequence of characters) containing adescription of a data object the Javascript function eval we get asits result the corresponding data object JSON is a programminglanguage independent open code standard for exchange of dataamong programs
Two JSON standards exist
bull The JSON Data Interchange Format Standard ECMA-404October 2013
bull The JavaScript Object Notation (JSON) Data InterchangeFormat Request for Comments 7159 March 2014
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON
firstName JohnlastName SmithisAlive trueage 25address streetAddress 21 2nd Streetcity New Yorkstate NYpostalCode 10021-3100
phoneNumbers [
type homenumber 212 555-1234
type officenumber 646 555-4567
]children []spouse null
Wikipedia
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON
XML is appropriate for describing the structure of textual dataJSON is becoming the first choice for describing structured dataJSON has much simpler grammar is more readable and compatiblewith basic data structures in modern programming languagesAll keys (names of fields) are in double quotes
JSON files are by default based on the encoding Unicode (UTF-8)
The MIME type for JSON files is applicationjson therecommended file extension is json
For work with JSON there exists supporting libraries for all importantprogramming languages httpwwwjsonorg
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
eval and JSONparseevalhtml
lthtmlgtltheadgtlttitlegtJSON eval and parselttitlegtltheadgtltbodygtltscriptgtvar data=rsquo[abca[true null314]bBBBBBc12e+5]rsquoalert(JSON + data)documentwrite(JSONltttgt+data+ltttgtltbrgt)var value = eval(rsquo(rsquo + data + rsquo)rsquo)consolelog(eval) consolelog(value)documentwrite(evalltttgt+JSONstringify(value)+ltttgtltbrgt)var json = JSONparse(data)consolelog(JSONparse) consolelog(json)ltscriptgtltbodygtlthtmlgt
To run the Javascript code I used the Google Chrome browser To get theconsole we selectCustomize and Control GC More tools Developer tools
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
eval and JSONparse
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Importing data as Javascript assignmentimporthtml
lthtmlgtltheadgtlttitlegtJSON importlttitlegtltscript src=personjsgtltscriptgtltheadgtltbodygtltscriptgtdocumentwrite(JSONltttgt+person+ltttgtltbrgt)documentwrite(stringltttgt+JSONstringify(person)+ltttgtltbrgt)consolelog(JSON) consolelog(person)ltscriptgtltbodygtlthtmlgt
personjs
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Well formed and valid JSON files
A JSON file is well formed iff it respects JSONrsquos grammarIs my file well formed service JSONlint - another checker
JSON editor
Similar to XMLrsquos DTD files or schema we can imposeadditional restrictions to the structure of JSON files describingspecial types of data using JSON schema ndash the JSON filesrespecting these additional restrictions are called valid
Github validation JSON Schema Lint JSON Schemavalidator
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Simple examplegraphjson
infoorg0nNodes4nodes[nameAnnx02y02Num1Size100nameBenx02y08Num4Size500nameTimx08y02Num2Size200nameZoex08y08Num3Size400
]links[source0target1Count1Weight100source1target2Count1Weight100source2target3Count1Weight100source1target3Count2Weight300
]
In graphjs the JSON description is assigned to the variable graph
graph = infoorg0nNodes4nodes[
]
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Circular layoutadapted from Brath and Jonker p 257-258
ltDOCTYPE htmlgtlthtmlgtltheadgtltmeta charset=utf-8gtltscript src=graphjsgtltscriptgtlt-- script src=classjsgtltscript --gtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltscriptgt set up the drawing areavar width = 500
height = 500var svg = d3select(body)append(svg)
attr(width width)
attr(height height)
attr(xmlns httpwwww3org2000svg) angle and radius for layout assistancevar ang = 2 MathPI graphnodeslengthvar rad = width 25
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Circular layout
create the linksvar link = svgselectAll(line)data(graphlinks)enter()append(line)style(strokeblue)attr(stroke-width2)attr(x1function(d)return(radMathcos(dsourceang)+5width))attr(y1function(d)return(radMathsin(dsourceang)+5width))attr(x2function(d)return(radMathcos(dtargetang)+5width))attr(y2function(d)return(radMathsin(dtargetang)+5width))
create the nodes and set out in a circular layoutvar node = svgselectAll(circle)data(graphnodes)enter()append(circle)attr(r10)attr(cxfunction(di)return(radMathcos(iang)+5width))attr(cyfunction(di)return(radMathsin(iang)+5width))attr(fillyellow)attr(strokered)
ltscriptgtltbodygt
graphCirclehtml classjson classjs classCirclehtml+ labels classCircleLhtml+ permutation classPjson classPjs classCirclePhtm
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
SVG
ltxml version=10 encoding=UTF-8 standalone=yesgtltsvg width=500 height=500 xmlns=httpwwww3org2000svggtltline stroke-width=2 x1=450 y1=250 x2=250 y2=450 style=stroke bluegtltlinegtltline stroke-width=2 x1=250 y1=450 x2=50 y2=250 style=stroke bluegtltlinegtltline stroke-width=2 x1=50 y1=250 x2=250 y2=50 style=stroke bluegtltlinegtltline stroke-width=2 x1=250 y1=450 x2=250 y2=50 style=stroke bluegtltlinegtltcircle r=10 cx=450 cy=250 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=250 cy=450 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=50 cy=250 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=250 cy=50 fill=yellow stroke=redgtltcirclegtltsvggt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Networks in JSON format basic netJSONclassjson
netJSON basicinfo network class org 1 nNodes 15
nArcs 30 nEdges 13 nWeak 1title borrowing study materialsmeta date October 2015 author V Batagelj
nodes [
id 1 short m02 x 01857 y 02781 size 1 id 2 short m03 x 05482 y 06169 size 1 id 3 short w07 x 02219 y 04526 size 2 id 4 short w09 x 08078 y 03223 size 2
id 14 short m89 x 04000 y 08469 size 1 id 15 short m96 x 03482 y 01778 size 1
]links [
type arc source 6 target 15 weight 1 type arc source 2 target 7 weight 1
type arc source15 target 3 weight 1 type edge source 6 target 12 weight 1
type edge source 4 target 12 weight 1 type edge source 6 target 13 weight 1
]
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON and RTransforming Pajek NET and CLU files in to JSON
nodes[nameMyrielgroup1nameNapoleongroup1 nameBrujongroup4nameMmeHucheloupgroup8]
links[source1target0value1source2target0value8 source76target48value1source76target58value1]
setwd(CUsersBatageljtestpython2012amazon)library(rjson)
net2json lt- function(netFcluFjsonF)net lt- file(netFr) clu lt- file(cluFr)b lt- unlist(strsplit(readLines(netn=1) ))n lt- asinteger(b[length(b)])N lt- readLines(netn=n) nam lt- character(n)for(i in 1n) nam[i] lt- unlist(strsplit(N[i]rsquorsquo))[2]skip lt- readLines(clun=1) C lt- asinteger(readLines(clun=n))skip lt- readLines(netn=1) L lt- readLines(netn=-1)M lt- matrix(asinteger(unlist(strsplit(sub(rsquo^s+rsquorsquorsquoL)rsquos+rsquo)))ncol=3byrow=TRUE)nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(name=nam[i]group=C[i])m lt- nrow(M) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(source=M[i1]-1target=M[i2]-1value=M[i3])data lt- list(nodes=nodslinks=lnks)jstr lt- toJSON(data)json lt- file(jsonFw) cat(jstrfile=json)close(json) close(net) close(clu)
net2json(islandsnetislandscluislandsjson)
islands island 1 island 4 force islands
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
CSV2JSONR
transforming CSV files to JSON file by Vladimir Batagelj June 2016setwd(CUsersbatageljworkPythongraphSVGEUSN)library(rjson)colC lt- c(rep(character4)rep(numeric5)) nas lt- c(NANaN)nodes lt- readcsv2(bibNodesXYcsvencoding=rsquoUTF-8rsquocolClasses=colCnastrings=nas)M lt- factor(nodes$mode) mod lt- levels(M) M lt- asnumeric(M)S lt- factor(nodes$sex) sx lt- levels(S) S lt- asnumeric(S) S[isna(S)] lt- 0links lt- readcsv2(bibLinkscsvencoding=rsquoUTF-8rsquocolClasses=character)F lt- asnumeric(factor(links$fromlevels=nodes$nameordered=TRUE))T lt- asnumeric(factor(links$tolevels=nodes$nameordered=TRUE))R lt- factor(links$relation) rel lt-levels(R) R lt- asnumeric(R)n lt- nrow(nodes) nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(id=iname=nodes$name[i]mode=M[i]
sex=S[i]x=asnumeric(nodes$x[i])1000y=asnumeric(nodes$y[i])1000)m lt- nrow(links) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(type=arcsource=F[i]target=T[i]
rel=R[i]weight=1)meta lt- list(date=June 112016author=Vladimir Batagelj)leg lt- list(mode=modsex=sxrel=rel)inf lt- list(network=biborg=1nNodes=nnArcs=mtitle=Example for EUSNrsquo16legend=legmeta=meta)
data lt- list(netJSON=basicinfo=infnodes=nodslinks=lnks)json lt- file(bibjsonw) cat(toJSON(data)file=json) close(json)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibjson
netJSONbasicinfonetworkbiborg1nNodes16nArcs19titleExample for EUSNrsquo16legendmode[bookjournalpaperpersonpublisherseries]sex[fm]rel[authorOfcitescontainedIneditorOfpublishedBy]
metadateJune 112016authorVladimir Batageljnodes[id1nameBatagelj Vladimirmode4sex2x08091y06537id2nameDoreian Patrickmode4sex2x03585y06791id3nameFerligoj Anuu0161kamode4sex1x06195y06807id4nameGranovetter Markmode4sex2x01456y06605id5nameMoustaki Irinimode4sex1x0783y0228id6nameMrvar Andrejmode4sex2x0478y06301id7nameClustering with relational constraintmode3sex0x06841y03801
id15nameCambridge University Pressmode5sex0x05343y02382id16nameSpringermode5sex0x08846y0174]links[typearcsource1target10rel1weight1typearcsource2target10rel1weight1typearcsource3target10rel1weight1typearcsource1target7rel1weight1typearcsource3target7rel1weight1typearcsource4target8rel1weight1typearcsource4target14rel4weight1
typearcsource10target7rel2weight1typearcsource14target15rel5weight1typearcsource11target16rel5weight1
]
bibjson picture bibV Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON files anddisplaying a network with given nodesrsquo coordinates
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltinput type=rsquofilersquo accept=rsquoapplicationjsonrsquo onchange=rsquoopenFile(event)rsquogtltscriptgtfunction process(graph) set up the drawing areavar width = 500height = 500 s = graphattributesorg
var svg = d3select(body)append(svg)attr(width width)attr(height height)attr(xmlns httpwwww3org2000svg)
draw the linksvar link = svgselectAll(line)data(graphlinks)enter()append(line)style(stroke function(di) return((dtype==arc magenta blue)))attr(stroke-width 2)attr(x1 function(d) return(graphnodes[dsource-s]xwidth))attr(y1 function(d) return(graphnodes[dsource-s]yheight))attr(x2 function(d) return(graphnodes[dtarget-s]xwidth))attr(y2 function(d) return(graphnodes[dtarget-s]yheight))
draw the nodesvar node = svgselectAll(circle)data(graphnodes)enter()append(circle)attr(r 15)attr(cx function(di) return(dxwidth))attr(cy function(di) return(dyheight))attr(fill yellow)attr(stroke red)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
readingadapted from Matt West Reading Files Using The HTML5 FileReader API
var openFile = function(event) var input = eventtargetvar reader = new FileReader()readeronload = function()process(JSONparse(readerresult))
readerreadAsText(inputfiles[0])
ltscriptgtltbodygt
graphReadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON file from serveradapted from Ying Kit Yuen jQuery amp Javascript -ndash Read JSON files on server
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtlttitlegtLoad JSON file from serverlttitlegtlt-- httpeurekaykyueninfo20130925jquery-javascript-read-json-files-on-server --gtltscript src=httpajaxgoogleapiscomajaxlibsjquery1102jqueryminjsgtltscriptgtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltselect id=datagtltoption value=graphjsongtgraphjsonltoptiongtltoption value=classjsongtclassjsonltoptiongt
ltselectgtltbutton id=btngtReadltbuttongtltscriptgtfunction process(graph) set up the drawing area the body of function process is the same as in the previous exampleattr(stroke red)
$(btn)click(function()$getJSON($(data)val() function(json) process(json))
)ltscriptgtltbodygt
graphLoadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Network displayer graphXY
drawNetjs
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
graphXYgen
ltDOCTYPE htmlgtltmeta charset=utf-8gtltbodygtlt-- script src=graphAjsgtltscript --gtltscript src=graphBjsgtltscriptgtlt-- script src=classSjsgtltscript --gtltscript src=drawNetjsgtltscriptgtltscript src=d3d3jsgtltscriptgtltscriptgtvars = graphinfoorgwidth = graphstylecanvaswidthheight = graphstylecanvasheightvar lw = 1if ( typeof graphstyle == rsquoundefinedrsquo ampamp graphstyle) if ( typeof graphstylelink == rsquoundefinedrsquo ampamp graphstylelink )
if ( typeof graphstylelinkwidth == rsquoundefinedrsquo ampamp graphstylelinkwidth ) var lw = graphstylelinkwidth
if(graphnetJSON==rsquogeneralrsquo) var OK = drawNet(graphpersonsdatagraphfrienddata)
else var OK = drawNet(graphnodesgraphlinks)
ltscriptgtltbodygt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Saving SVG pictureS Murray Interactive Data Visualization for the Web p 235
In Google Chrome we draw a picture and open the Developer ToolsIn the Elements we identify the SVG subobject select it copy it intosome text editor and save with extension svg
To enhance the picture or to transform it to other picture formats we
process it using some vector graphics editor
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
To do
bull displayer templates can be based on GUI
bull for a description of multirelational networks we use the rel
attribute in the general version they can be treated asseparate sets of links
bull properties are considered as attributes in the general versionthey can be represented as special objects vector partitionpermutation and cluster
bull use temporal quantities for describing temporal networks
bull extend the list of info-attributes attributes type (simpletemporal) twoModeOrg nStrong nRelations planar
bull icons can be used for visualization of nodes Font AwesomeMaterial Icons tests
bull links can be visually represented in many different ways that canbe described in style
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
to do
bull style can be attached as an attribute also to an element(node link) thus changing the default settings
bull add the visualization of arcs with arrows Directed Graph EditorD3 Tips and Tricks
bull to be included in netD3js vzmetno risanje Force in urejanjeSpringy Matrix with permutations
bull can some attributes be renamed from tail nodeA rarrsource to head nodeB rarr target may be the simplestsolution is a replace in some text editor
bull implement saving of the obtained SVG picture to a file ExportSVG with Style d3jsSVG Export demo
bull include in netJSON elements useful in some applications suchas hooks or inout-ports background image etc
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Sources
Ideas for visualization styles can be found in GoJS - InteractiveDiagrams for JavaScript and HTML Visjs in VisualComplexity
GoJS mdashSankey Diagram Family Tree Logic Circuit DynamicPortsVega - a visualization grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References I
Vladimir Batagelj Complex Networks Visualization of RA Meyersed Encyclopedia of Complexity and Systems Science Springer 20091253-1268
Vladimir Batagelj Andrej Mrvar Pajek manual
Jernej Bodlaj Network Data File Formats in Reda Alhajj Jon Rokne(eds) Encyclopedia of Social Network Analysis and Mining SpringerNew York 2014 p 1076-1091
Richard Brath David Jonker Graph Analysis and VisualizationDiscovering Business Opportunity in Linked Data John Wiley amp SonsIndianapolis Indiana 2015
Emden Gansner Eleftherios Koutsofios Stephen North Drawinggraphs with dot January 26 2006
Scott Murray Interactive Data Visualization for the Web OrsquoReillySebastopol 2013
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References II
Wouter De Nooy Andrej Mrvar Vladimir Batagelj Exploratory SocialNetwork Analysis with Pajek Revised and Expanded Second EditionStructural Analysis in the Social Sciences Cambridge UniversityPress September 2011
Matthew Roughan Jonathan Tuke Unravelling Graph-Exchange FileFormats arXiv150302781 submitted on 10 Mar 2015
Wikipedia JSON
Leland Wilkinson The Grammar of Graphics Springer-Verlag NewYork 2005
V Batagelj JSON amp D3js
- Introduction
- Description of networks
- JSON
- JSON and D3js
- JSON and R
- Displayer
- To do
- References
-
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Outline
1 Introduction2 Description of networks3 JSON4 JSON and D3js5 JSON and R6 Displayer7 To do8 References
Vladimir Batagelj vladimirbatageljfmfuni-ljsi
Current version of slides (14 junij 2016 ob 14 40)EUSNrsquo16 slides PDF
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Motivation
Work in progress
A year and half ago I wanted to vi-sualize some networks in Python Iwas not satisfied with existing op-tions The library matplotlib (alsoused by NetworkX) is developedfor visualization of statistical dataand resultsOn the other side there exists anexcellent library D3js for interac-tive visualization on the web (andlocally) in SVG format Most ofthe network data for D3js are pre-pared in the JSON format Thereexist many nice D3js based ne-twork visualizations
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Networks in D3js
bull Force Force-Directed Graph Force Layout amp Matrix MarketFormat 3D Force Layout An A to Z of extra features for the d3force layout
bull Directed Directed Graph Editor Directed Edges (Curves andArrow Markers) Mobile Patent Suits
bull Matrix Co-occurrence Matrix
bull Hive Hive Plots
bull Chord Chord Diagram Hierarchical Edge Bundling
bull Applications Linked JAZZ Ontology Visualization VisualizingPackage Dependencies Connectome explorer for the rdquobrainrdquo ofC elegans Gene functional interaction networks
bull More D3 gallery The Big List of D3js Examples - ChristopheViau Over 2000 D3js Examples and Demos
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Project
bull netJSON develop a JSON based format for description ofnetworks It should be ldquocompleterdquo ndash it can be used also todescribe multi-relational temporal two-mode networks andcollections of networks netJSON network description can beextended with a layout information (jsongraph)
bull netD3js collect and adapt for netJSON selected existingnetwork visualization solutions based on D3js and develop newones
netJSON could serve as a data exchange format among networkanalysis programs (conversion program fromto netJSON)
Programers may export their results in netJSON and use net3Djs fortheir visualization
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
netJSON and netD3js for SNA analysts
network rarr netJSON rarr SVG rarr PDF PNG EPS
bull Prepare your network data in netJSON format (in a text editorfrom Excel tables using R export from SNA programs andconvert to netJSON) Add the layout information
bull Use selected netD3js templates to visualize the network
bull Optionally save the SVG picture enhance it in some vectorgraphics editor (AI Inkscape) and export it in selected format(PDF ESP PNG )
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Networks
A network is based on two sets ndash set of nodes (vertices) thatrepresent the selected units and set of links (lines) that representties between units They determine a graph A line can be directed ndashan arc or undirected ndash an edgeAdditional data about nodes or links may be known ndash their properties(attributes) For example namelabel type value
Network = Graph + DataA network N = (VLPW) consists of
bull a graph G = (VL) where V is the set of nodes A is the set ofarcs E is the set of edges and L = E cup A is the set of linksn = |V| m = |L|
bull P vertex value functions properties p V rarr A
bull W line value functions weights w L rarr B
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Description of networks
How to describe a network N In principle the answer is simple ndash welist its components VLP and W
The simplest way is to describe a network N by providing (VP) and(LW) in a form of two tables
As an example let us describe a part of network determined by thefollowing worksGeneralized blockmodeling Clustering with relational constraintPartitioning signed social networks The Strength of Weak Ties
There are nodes of different types (modes) persons papers booksseries journals publishers and different relations among themauthor of editor of contained in cites published by
Both tables are often maintained in Excel They can be exported as
text in CSV (Comma Separated Values) format
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibNodescsv
namemodecountrysexyearvolnumfPagelPagexyBatagelj VladimirpersonSIm80916537Doreian PatrickpersonUSm35856791Ferligoj AnuskapersonSIf61956807Granovetter MarkpersonUSm14566605Moustaki IrinipersonUKf78302280Mrvar AndrejpersonSIm47806301Clustering with relational constraintpaper19824741342668413801The Strength of Weak Tiespaper19737861360138011133294Partitioning signed social networkspaper200931111140803378Generalized Blockmodelingbook200524138553304459Psychometrikajournal74180861Social Networksjournal32142365The American Journal of Sociologyjournal11131689Structural Analysis in the Social Sciencesseries31040828Cambridge University PresspublisherUK53432382SpringerpublisherUS88461740
bibNodescsv
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibLinkscsv
fromrelationtoBatagelj VladimirauthorOfGeneralized BlockmodelingDoreian PatrickauthorOfGeneralized BlockmodelingFerligoj AnuskaauthorOfGeneralized BlockmodelingBatagelj VladimirauthorOfClustering with relational constraintFerligoj AnuskaauthorOfClustering with relational constraintGranovetter MarkauthorOfThe Strength of Weak TiesGranovetter MarkeditorOfStructural Analysis in the Social SciencesDoreian PatrickauthorOfPartitioning signed social networksMrvar AndrejauthorOfPartitioning signed social networksMoustaki IrinieditorOfPsychometrikaDoreian PatrickeditorOfSocial NetworksGeneralized BlockmodelingcontainedInStructural Analysis in the Social SciencesClustering with relational constraintcontainedInPsychometrikaThe Strength of Weak TiescontainedInThe American Journal of SociologyPartitioning signed social networkscontainedInSocial NetworksPartitioning signed social networkscitesGeneralized BlockmodelingGeneralized BlockmodelingcitesClustering with relational constraintStructural Analysis in the Social SciencespublishedByCambridge University PressPsychometrikapublishedBySpringer
bibLinkscsv
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
CSV2PajekR
transforming CSV file to Pajek files by Vladimir Batagelj June 2016setwd(CUsersbatageljworkPythongraphSVGEUSN)colC lt- c(rep(character4)rep(integer7)) nas lt- c(NANaN)nodes lt- readcsv2(bibNodescsvencoding=rsquoUTF-8rsquocolClasses=colCnastrings=nas)n lt- nrow(nodes) M lt- factor(nodes$mode) S lt- factor(nodes$sex)mod lt- levels(M) sx lt- levels(S) S lt- asnumeric(S) S[isna(S)] lt- 0links lt- readcsv2(bibLinkscsvencoding=rsquoUTF-8rsquocolClasses=character)F lt- factor(links$fromlevels=nodes$nameordered=TRUE)T lt- factor(links$tolevels=nodes$nameordered=TRUE)R lt- factor(links$relation) rel lt- levels(R)net lt- file(bibnetw) cat(rsquovertices rsquonrsquonrsquofile=net)clu lt- file(bibModecluw) sex lt- file(bibSexcluw)cat(rsquorsquofile=clu) cat(rsquorsquofile=sex)for(i in 1length(mod)) cat(rsquo rsquoimod[i]file=clu)cat(rsquonvertices rsquonrsquonrsquofile=clu)for(i in 1length(sx)) cat(rsquo rsquoisx[i]file=sex)cat(rsquonvertices rsquonrsquonrsquofile=sex)for(v in 1n) cat(vrsquo rsquonodes$name[v]rsquonrsquosep=rsquorsquofile=net)cat(M[v]rsquonrsquofile=clu) cat(S[v]rsquonrsquofile=sex)
for(r in 1length(rel)) cat(rsquoarcs rsquorrsquo rsquorel[r]rsquonrsquosep=rsquorsquofile=net)cat(rsquoarcsnrsquofile=net)for(a in 1nrow(links))cat(R[a]rsquo rsquoF[a]rsquo rsquoT[a]rsquo 1 l rsquorel[R[a]]rsquonrsquosep=rsquorsquofile=net)
close(net) close(clu) close(sex)
CSV2PajekR
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibnet
vertices 16 arcs1 Batagelj Vladimir 1 1 10 1 l authorOf2 Doreian Patrick 1 2 10 1 l authorOf3 Ferligoj Anuska 1 3 10 1 l authorOf4 Granovetter Mark 1 1 7 1 l authorOf5 Moustaki Irini 1 3 7 1 l authorOf6 Mrvar Andrej 1 4 8 1 l authorOf7 Clustering with relational constraint 4 4 14 1 l editorOf8 The Strength of Weak Ties 1 2 9 1 l authorOf9 Partitioning signed social networks 1 6 9 1 l authorOf10 Generalized Blockmodeling 4 5 11 1 l editorOf11 Psychometrika 4 2 12 1 l editorOf12 Social Networks 3 10 14 1 l containedIn13 The American Journal of Sociology 3 7 11 1 l containedIn14 Structural Analysis in the Social Sciences 3 8 13 1 l containedIn15 Cambridge University Press 3 9 12 1 l containedIn16 Springer 2 9 10 1 l citesarcs 1 authorOf 2 10 7 1 l citesarcs 2 cites 5 14 15 1 l publishedByarcs 3 containedIn 5 11 16 1 l publishedByarcs 4 editorOfarcs 5 publishedBy
bibnet bibModeclu bibSexclu
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Bibliographic network ndash picture Pajek
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
XML api ndash JSON api
In near past for description of structured data the XML (ExtensibleMarkup Language) was mostly used In last five years a JSON formatstarted to replace it Google trends
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON
JSON (JavaScript Object Notation) is a text data format thatpreserves the structure of data objects It is ldquocompatiblerdquo with basicdata structures in modern programming languages
The initial version of JSON vas developed by Douglas Crockford(around 2002) He based it on the Javascript notation The principalidea is if we apply on a string (sequence of characters) containing adescription of a data object the Javascript function eval we get asits result the corresponding data object JSON is a programminglanguage independent open code standard for exchange of dataamong programs
Two JSON standards exist
bull The JSON Data Interchange Format Standard ECMA-404October 2013
bull The JavaScript Object Notation (JSON) Data InterchangeFormat Request for Comments 7159 March 2014
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON
firstName JohnlastName SmithisAlive trueage 25address streetAddress 21 2nd Streetcity New Yorkstate NYpostalCode 10021-3100
phoneNumbers [
type homenumber 212 555-1234
type officenumber 646 555-4567
]children []spouse null
Wikipedia
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON
XML is appropriate for describing the structure of textual dataJSON is becoming the first choice for describing structured dataJSON has much simpler grammar is more readable and compatiblewith basic data structures in modern programming languagesAll keys (names of fields) are in double quotes
JSON files are by default based on the encoding Unicode (UTF-8)
The MIME type for JSON files is applicationjson therecommended file extension is json
For work with JSON there exists supporting libraries for all importantprogramming languages httpwwwjsonorg
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
eval and JSONparseevalhtml
lthtmlgtltheadgtlttitlegtJSON eval and parselttitlegtltheadgtltbodygtltscriptgtvar data=rsquo[abca[true null314]bBBBBBc12e+5]rsquoalert(JSON + data)documentwrite(JSONltttgt+data+ltttgtltbrgt)var value = eval(rsquo(rsquo + data + rsquo)rsquo)consolelog(eval) consolelog(value)documentwrite(evalltttgt+JSONstringify(value)+ltttgtltbrgt)var json = JSONparse(data)consolelog(JSONparse) consolelog(json)ltscriptgtltbodygtlthtmlgt
To run the Javascript code I used the Google Chrome browser To get theconsole we selectCustomize and Control GC More tools Developer tools
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
eval and JSONparse
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Importing data as Javascript assignmentimporthtml
lthtmlgtltheadgtlttitlegtJSON importlttitlegtltscript src=personjsgtltscriptgtltheadgtltbodygtltscriptgtdocumentwrite(JSONltttgt+person+ltttgtltbrgt)documentwrite(stringltttgt+JSONstringify(person)+ltttgtltbrgt)consolelog(JSON) consolelog(person)ltscriptgtltbodygtlthtmlgt
personjs
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Well formed and valid JSON files
A JSON file is well formed iff it respects JSONrsquos grammarIs my file well formed service JSONlint - another checker
JSON editor
Similar to XMLrsquos DTD files or schema we can imposeadditional restrictions to the structure of JSON files describingspecial types of data using JSON schema ndash the JSON filesrespecting these additional restrictions are called valid
Github validation JSON Schema Lint JSON Schemavalidator
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Simple examplegraphjson
infoorg0nNodes4nodes[nameAnnx02y02Num1Size100nameBenx02y08Num4Size500nameTimx08y02Num2Size200nameZoex08y08Num3Size400
]links[source0target1Count1Weight100source1target2Count1Weight100source2target3Count1Weight100source1target3Count2Weight300
]
In graphjs the JSON description is assigned to the variable graph
graph = infoorg0nNodes4nodes[
]
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Circular layoutadapted from Brath and Jonker p 257-258
ltDOCTYPE htmlgtlthtmlgtltheadgtltmeta charset=utf-8gtltscript src=graphjsgtltscriptgtlt-- script src=classjsgtltscript --gtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltscriptgt set up the drawing areavar width = 500
height = 500var svg = d3select(body)append(svg)
attr(width width)
attr(height height)
attr(xmlns httpwwww3org2000svg) angle and radius for layout assistancevar ang = 2 MathPI graphnodeslengthvar rad = width 25
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Circular layout
create the linksvar link = svgselectAll(line)data(graphlinks)enter()append(line)style(strokeblue)attr(stroke-width2)attr(x1function(d)return(radMathcos(dsourceang)+5width))attr(y1function(d)return(radMathsin(dsourceang)+5width))attr(x2function(d)return(radMathcos(dtargetang)+5width))attr(y2function(d)return(radMathsin(dtargetang)+5width))
create the nodes and set out in a circular layoutvar node = svgselectAll(circle)data(graphnodes)enter()append(circle)attr(r10)attr(cxfunction(di)return(radMathcos(iang)+5width))attr(cyfunction(di)return(radMathsin(iang)+5width))attr(fillyellow)attr(strokered)
ltscriptgtltbodygt
graphCirclehtml classjson classjs classCirclehtml+ labels classCircleLhtml+ permutation classPjson classPjs classCirclePhtm
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
SVG
ltxml version=10 encoding=UTF-8 standalone=yesgtltsvg width=500 height=500 xmlns=httpwwww3org2000svggtltline stroke-width=2 x1=450 y1=250 x2=250 y2=450 style=stroke bluegtltlinegtltline stroke-width=2 x1=250 y1=450 x2=50 y2=250 style=stroke bluegtltlinegtltline stroke-width=2 x1=50 y1=250 x2=250 y2=50 style=stroke bluegtltlinegtltline stroke-width=2 x1=250 y1=450 x2=250 y2=50 style=stroke bluegtltlinegtltcircle r=10 cx=450 cy=250 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=250 cy=450 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=50 cy=250 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=250 cy=50 fill=yellow stroke=redgtltcirclegtltsvggt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Networks in JSON format basic netJSONclassjson
netJSON basicinfo network class org 1 nNodes 15
nArcs 30 nEdges 13 nWeak 1title borrowing study materialsmeta date October 2015 author V Batagelj
nodes [
id 1 short m02 x 01857 y 02781 size 1 id 2 short m03 x 05482 y 06169 size 1 id 3 short w07 x 02219 y 04526 size 2 id 4 short w09 x 08078 y 03223 size 2
id 14 short m89 x 04000 y 08469 size 1 id 15 short m96 x 03482 y 01778 size 1
]links [
type arc source 6 target 15 weight 1 type arc source 2 target 7 weight 1
type arc source15 target 3 weight 1 type edge source 6 target 12 weight 1
type edge source 4 target 12 weight 1 type edge source 6 target 13 weight 1
]
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON and RTransforming Pajek NET and CLU files in to JSON
nodes[nameMyrielgroup1nameNapoleongroup1 nameBrujongroup4nameMmeHucheloupgroup8]
links[source1target0value1source2target0value8 source76target48value1source76target58value1]
setwd(CUsersBatageljtestpython2012amazon)library(rjson)
net2json lt- function(netFcluFjsonF)net lt- file(netFr) clu lt- file(cluFr)b lt- unlist(strsplit(readLines(netn=1) ))n lt- asinteger(b[length(b)])N lt- readLines(netn=n) nam lt- character(n)for(i in 1n) nam[i] lt- unlist(strsplit(N[i]rsquorsquo))[2]skip lt- readLines(clun=1) C lt- asinteger(readLines(clun=n))skip lt- readLines(netn=1) L lt- readLines(netn=-1)M lt- matrix(asinteger(unlist(strsplit(sub(rsquo^s+rsquorsquorsquoL)rsquos+rsquo)))ncol=3byrow=TRUE)nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(name=nam[i]group=C[i])m lt- nrow(M) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(source=M[i1]-1target=M[i2]-1value=M[i3])data lt- list(nodes=nodslinks=lnks)jstr lt- toJSON(data)json lt- file(jsonFw) cat(jstrfile=json)close(json) close(net) close(clu)
net2json(islandsnetislandscluislandsjson)
islands island 1 island 4 force islands
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
CSV2JSONR
transforming CSV files to JSON file by Vladimir Batagelj June 2016setwd(CUsersbatageljworkPythongraphSVGEUSN)library(rjson)colC lt- c(rep(character4)rep(numeric5)) nas lt- c(NANaN)nodes lt- readcsv2(bibNodesXYcsvencoding=rsquoUTF-8rsquocolClasses=colCnastrings=nas)M lt- factor(nodes$mode) mod lt- levels(M) M lt- asnumeric(M)S lt- factor(nodes$sex) sx lt- levels(S) S lt- asnumeric(S) S[isna(S)] lt- 0links lt- readcsv2(bibLinkscsvencoding=rsquoUTF-8rsquocolClasses=character)F lt- asnumeric(factor(links$fromlevels=nodes$nameordered=TRUE))T lt- asnumeric(factor(links$tolevels=nodes$nameordered=TRUE))R lt- factor(links$relation) rel lt-levels(R) R lt- asnumeric(R)n lt- nrow(nodes) nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(id=iname=nodes$name[i]mode=M[i]
sex=S[i]x=asnumeric(nodes$x[i])1000y=asnumeric(nodes$y[i])1000)m lt- nrow(links) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(type=arcsource=F[i]target=T[i]
rel=R[i]weight=1)meta lt- list(date=June 112016author=Vladimir Batagelj)leg lt- list(mode=modsex=sxrel=rel)inf lt- list(network=biborg=1nNodes=nnArcs=mtitle=Example for EUSNrsquo16legend=legmeta=meta)
data lt- list(netJSON=basicinfo=infnodes=nodslinks=lnks)json lt- file(bibjsonw) cat(toJSON(data)file=json) close(json)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibjson
netJSONbasicinfonetworkbiborg1nNodes16nArcs19titleExample for EUSNrsquo16legendmode[bookjournalpaperpersonpublisherseries]sex[fm]rel[authorOfcitescontainedIneditorOfpublishedBy]
metadateJune 112016authorVladimir Batageljnodes[id1nameBatagelj Vladimirmode4sex2x08091y06537id2nameDoreian Patrickmode4sex2x03585y06791id3nameFerligoj Anuu0161kamode4sex1x06195y06807id4nameGranovetter Markmode4sex2x01456y06605id5nameMoustaki Irinimode4sex1x0783y0228id6nameMrvar Andrejmode4sex2x0478y06301id7nameClustering with relational constraintmode3sex0x06841y03801
id15nameCambridge University Pressmode5sex0x05343y02382id16nameSpringermode5sex0x08846y0174]links[typearcsource1target10rel1weight1typearcsource2target10rel1weight1typearcsource3target10rel1weight1typearcsource1target7rel1weight1typearcsource3target7rel1weight1typearcsource4target8rel1weight1typearcsource4target14rel4weight1
typearcsource10target7rel2weight1typearcsource14target15rel5weight1typearcsource11target16rel5weight1
]
bibjson picture bibV Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON files anddisplaying a network with given nodesrsquo coordinates
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltinput type=rsquofilersquo accept=rsquoapplicationjsonrsquo onchange=rsquoopenFile(event)rsquogtltscriptgtfunction process(graph) set up the drawing areavar width = 500height = 500 s = graphattributesorg
var svg = d3select(body)append(svg)attr(width width)attr(height height)attr(xmlns httpwwww3org2000svg)
draw the linksvar link = svgselectAll(line)data(graphlinks)enter()append(line)style(stroke function(di) return((dtype==arc magenta blue)))attr(stroke-width 2)attr(x1 function(d) return(graphnodes[dsource-s]xwidth))attr(y1 function(d) return(graphnodes[dsource-s]yheight))attr(x2 function(d) return(graphnodes[dtarget-s]xwidth))attr(y2 function(d) return(graphnodes[dtarget-s]yheight))
draw the nodesvar node = svgselectAll(circle)data(graphnodes)enter()append(circle)attr(r 15)attr(cx function(di) return(dxwidth))attr(cy function(di) return(dyheight))attr(fill yellow)attr(stroke red)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
readingadapted from Matt West Reading Files Using The HTML5 FileReader API
var openFile = function(event) var input = eventtargetvar reader = new FileReader()readeronload = function()process(JSONparse(readerresult))
readerreadAsText(inputfiles[0])
ltscriptgtltbodygt
graphReadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON file from serveradapted from Ying Kit Yuen jQuery amp Javascript -ndash Read JSON files on server
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtlttitlegtLoad JSON file from serverlttitlegtlt-- httpeurekaykyueninfo20130925jquery-javascript-read-json-files-on-server --gtltscript src=httpajaxgoogleapiscomajaxlibsjquery1102jqueryminjsgtltscriptgtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltselect id=datagtltoption value=graphjsongtgraphjsonltoptiongtltoption value=classjsongtclassjsonltoptiongt
ltselectgtltbutton id=btngtReadltbuttongtltscriptgtfunction process(graph) set up the drawing area the body of function process is the same as in the previous exampleattr(stroke red)
$(btn)click(function()$getJSON($(data)val() function(json) process(json))
)ltscriptgtltbodygt
graphLoadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Network displayer graphXY
drawNetjs
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
graphXYgen
ltDOCTYPE htmlgtltmeta charset=utf-8gtltbodygtlt-- script src=graphAjsgtltscript --gtltscript src=graphBjsgtltscriptgtlt-- script src=classSjsgtltscript --gtltscript src=drawNetjsgtltscriptgtltscript src=d3d3jsgtltscriptgtltscriptgtvars = graphinfoorgwidth = graphstylecanvaswidthheight = graphstylecanvasheightvar lw = 1if ( typeof graphstyle == rsquoundefinedrsquo ampamp graphstyle) if ( typeof graphstylelink == rsquoundefinedrsquo ampamp graphstylelink )
if ( typeof graphstylelinkwidth == rsquoundefinedrsquo ampamp graphstylelinkwidth ) var lw = graphstylelinkwidth
if(graphnetJSON==rsquogeneralrsquo) var OK = drawNet(graphpersonsdatagraphfrienddata)
else var OK = drawNet(graphnodesgraphlinks)
ltscriptgtltbodygt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Saving SVG pictureS Murray Interactive Data Visualization for the Web p 235
In Google Chrome we draw a picture and open the Developer ToolsIn the Elements we identify the SVG subobject select it copy it intosome text editor and save with extension svg
To enhance the picture or to transform it to other picture formats we
process it using some vector graphics editor
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
To do
bull displayer templates can be based on GUI
bull for a description of multirelational networks we use the rel
attribute in the general version they can be treated asseparate sets of links
bull properties are considered as attributes in the general versionthey can be represented as special objects vector partitionpermutation and cluster
bull use temporal quantities for describing temporal networks
bull extend the list of info-attributes attributes type (simpletemporal) twoModeOrg nStrong nRelations planar
bull icons can be used for visualization of nodes Font AwesomeMaterial Icons tests
bull links can be visually represented in many different ways that canbe described in style
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
to do
bull style can be attached as an attribute also to an element(node link) thus changing the default settings
bull add the visualization of arcs with arrows Directed Graph EditorD3 Tips and Tricks
bull to be included in netD3js vzmetno risanje Force in urejanjeSpringy Matrix with permutations
bull can some attributes be renamed from tail nodeA rarrsource to head nodeB rarr target may be the simplestsolution is a replace in some text editor
bull implement saving of the obtained SVG picture to a file ExportSVG with Style d3jsSVG Export demo
bull include in netJSON elements useful in some applications suchas hooks or inout-ports background image etc
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Sources
Ideas for visualization styles can be found in GoJS - InteractiveDiagrams for JavaScript and HTML Visjs in VisualComplexity
GoJS mdashSankey Diagram Family Tree Logic Circuit DynamicPortsVega - a visualization grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References I
Vladimir Batagelj Complex Networks Visualization of RA Meyersed Encyclopedia of Complexity and Systems Science Springer 20091253-1268
Vladimir Batagelj Andrej Mrvar Pajek manual
Jernej Bodlaj Network Data File Formats in Reda Alhajj Jon Rokne(eds) Encyclopedia of Social Network Analysis and Mining SpringerNew York 2014 p 1076-1091
Richard Brath David Jonker Graph Analysis and VisualizationDiscovering Business Opportunity in Linked Data John Wiley amp SonsIndianapolis Indiana 2015
Emden Gansner Eleftherios Koutsofios Stephen North Drawinggraphs with dot January 26 2006
Scott Murray Interactive Data Visualization for the Web OrsquoReillySebastopol 2013
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References II
Wouter De Nooy Andrej Mrvar Vladimir Batagelj Exploratory SocialNetwork Analysis with Pajek Revised and Expanded Second EditionStructural Analysis in the Social Sciences Cambridge UniversityPress September 2011
Matthew Roughan Jonathan Tuke Unravelling Graph-Exchange FileFormats arXiv150302781 submitted on 10 Mar 2015
Wikipedia JSON
Leland Wilkinson The Grammar of Graphics Springer-Verlag NewYork 2005
V Batagelj JSON amp D3js
- Introduction
- Description of networks
- JSON
- JSON and D3js
- JSON and R
- Displayer
- To do
- References
-
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Motivation
Work in progress
A year and half ago I wanted to vi-sualize some networks in Python Iwas not satisfied with existing op-tions The library matplotlib (alsoused by NetworkX) is developedfor visualization of statistical dataand resultsOn the other side there exists anexcellent library D3js for interac-tive visualization on the web (andlocally) in SVG format Most ofthe network data for D3js are pre-pared in the JSON format Thereexist many nice D3js based ne-twork visualizations
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Networks in D3js
bull Force Force-Directed Graph Force Layout amp Matrix MarketFormat 3D Force Layout An A to Z of extra features for the d3force layout
bull Directed Directed Graph Editor Directed Edges (Curves andArrow Markers) Mobile Patent Suits
bull Matrix Co-occurrence Matrix
bull Hive Hive Plots
bull Chord Chord Diagram Hierarchical Edge Bundling
bull Applications Linked JAZZ Ontology Visualization VisualizingPackage Dependencies Connectome explorer for the rdquobrainrdquo ofC elegans Gene functional interaction networks
bull More D3 gallery The Big List of D3js Examples - ChristopheViau Over 2000 D3js Examples and Demos
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Project
bull netJSON develop a JSON based format for description ofnetworks It should be ldquocompleterdquo ndash it can be used also todescribe multi-relational temporal two-mode networks andcollections of networks netJSON network description can beextended with a layout information (jsongraph)
bull netD3js collect and adapt for netJSON selected existingnetwork visualization solutions based on D3js and develop newones
netJSON could serve as a data exchange format among networkanalysis programs (conversion program fromto netJSON)
Programers may export their results in netJSON and use net3Djs fortheir visualization
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
netJSON and netD3js for SNA analysts
network rarr netJSON rarr SVG rarr PDF PNG EPS
bull Prepare your network data in netJSON format (in a text editorfrom Excel tables using R export from SNA programs andconvert to netJSON) Add the layout information
bull Use selected netD3js templates to visualize the network
bull Optionally save the SVG picture enhance it in some vectorgraphics editor (AI Inkscape) and export it in selected format(PDF ESP PNG )
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Networks
A network is based on two sets ndash set of nodes (vertices) thatrepresent the selected units and set of links (lines) that representties between units They determine a graph A line can be directed ndashan arc or undirected ndash an edgeAdditional data about nodes or links may be known ndash their properties(attributes) For example namelabel type value
Network = Graph + DataA network N = (VLPW) consists of
bull a graph G = (VL) where V is the set of nodes A is the set ofarcs E is the set of edges and L = E cup A is the set of linksn = |V| m = |L|
bull P vertex value functions properties p V rarr A
bull W line value functions weights w L rarr B
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Description of networks
How to describe a network N In principle the answer is simple ndash welist its components VLP and W
The simplest way is to describe a network N by providing (VP) and(LW) in a form of two tables
As an example let us describe a part of network determined by thefollowing worksGeneralized blockmodeling Clustering with relational constraintPartitioning signed social networks The Strength of Weak Ties
There are nodes of different types (modes) persons papers booksseries journals publishers and different relations among themauthor of editor of contained in cites published by
Both tables are often maintained in Excel They can be exported as
text in CSV (Comma Separated Values) format
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibNodescsv
namemodecountrysexyearvolnumfPagelPagexyBatagelj VladimirpersonSIm80916537Doreian PatrickpersonUSm35856791Ferligoj AnuskapersonSIf61956807Granovetter MarkpersonUSm14566605Moustaki IrinipersonUKf78302280Mrvar AndrejpersonSIm47806301Clustering with relational constraintpaper19824741342668413801The Strength of Weak Tiespaper19737861360138011133294Partitioning signed social networkspaper200931111140803378Generalized Blockmodelingbook200524138553304459Psychometrikajournal74180861Social Networksjournal32142365The American Journal of Sociologyjournal11131689Structural Analysis in the Social Sciencesseries31040828Cambridge University PresspublisherUK53432382SpringerpublisherUS88461740
bibNodescsv
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibLinkscsv
fromrelationtoBatagelj VladimirauthorOfGeneralized BlockmodelingDoreian PatrickauthorOfGeneralized BlockmodelingFerligoj AnuskaauthorOfGeneralized BlockmodelingBatagelj VladimirauthorOfClustering with relational constraintFerligoj AnuskaauthorOfClustering with relational constraintGranovetter MarkauthorOfThe Strength of Weak TiesGranovetter MarkeditorOfStructural Analysis in the Social SciencesDoreian PatrickauthorOfPartitioning signed social networksMrvar AndrejauthorOfPartitioning signed social networksMoustaki IrinieditorOfPsychometrikaDoreian PatrickeditorOfSocial NetworksGeneralized BlockmodelingcontainedInStructural Analysis in the Social SciencesClustering with relational constraintcontainedInPsychometrikaThe Strength of Weak TiescontainedInThe American Journal of SociologyPartitioning signed social networkscontainedInSocial NetworksPartitioning signed social networkscitesGeneralized BlockmodelingGeneralized BlockmodelingcitesClustering with relational constraintStructural Analysis in the Social SciencespublishedByCambridge University PressPsychometrikapublishedBySpringer
bibLinkscsv
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
CSV2PajekR
transforming CSV file to Pajek files by Vladimir Batagelj June 2016setwd(CUsersbatageljworkPythongraphSVGEUSN)colC lt- c(rep(character4)rep(integer7)) nas lt- c(NANaN)nodes lt- readcsv2(bibNodescsvencoding=rsquoUTF-8rsquocolClasses=colCnastrings=nas)n lt- nrow(nodes) M lt- factor(nodes$mode) S lt- factor(nodes$sex)mod lt- levels(M) sx lt- levels(S) S lt- asnumeric(S) S[isna(S)] lt- 0links lt- readcsv2(bibLinkscsvencoding=rsquoUTF-8rsquocolClasses=character)F lt- factor(links$fromlevels=nodes$nameordered=TRUE)T lt- factor(links$tolevels=nodes$nameordered=TRUE)R lt- factor(links$relation) rel lt- levels(R)net lt- file(bibnetw) cat(rsquovertices rsquonrsquonrsquofile=net)clu lt- file(bibModecluw) sex lt- file(bibSexcluw)cat(rsquorsquofile=clu) cat(rsquorsquofile=sex)for(i in 1length(mod)) cat(rsquo rsquoimod[i]file=clu)cat(rsquonvertices rsquonrsquonrsquofile=clu)for(i in 1length(sx)) cat(rsquo rsquoisx[i]file=sex)cat(rsquonvertices rsquonrsquonrsquofile=sex)for(v in 1n) cat(vrsquo rsquonodes$name[v]rsquonrsquosep=rsquorsquofile=net)cat(M[v]rsquonrsquofile=clu) cat(S[v]rsquonrsquofile=sex)
for(r in 1length(rel)) cat(rsquoarcs rsquorrsquo rsquorel[r]rsquonrsquosep=rsquorsquofile=net)cat(rsquoarcsnrsquofile=net)for(a in 1nrow(links))cat(R[a]rsquo rsquoF[a]rsquo rsquoT[a]rsquo 1 l rsquorel[R[a]]rsquonrsquosep=rsquorsquofile=net)
close(net) close(clu) close(sex)
CSV2PajekR
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibnet
vertices 16 arcs1 Batagelj Vladimir 1 1 10 1 l authorOf2 Doreian Patrick 1 2 10 1 l authorOf3 Ferligoj Anuska 1 3 10 1 l authorOf4 Granovetter Mark 1 1 7 1 l authorOf5 Moustaki Irini 1 3 7 1 l authorOf6 Mrvar Andrej 1 4 8 1 l authorOf7 Clustering with relational constraint 4 4 14 1 l editorOf8 The Strength of Weak Ties 1 2 9 1 l authorOf9 Partitioning signed social networks 1 6 9 1 l authorOf10 Generalized Blockmodeling 4 5 11 1 l editorOf11 Psychometrika 4 2 12 1 l editorOf12 Social Networks 3 10 14 1 l containedIn13 The American Journal of Sociology 3 7 11 1 l containedIn14 Structural Analysis in the Social Sciences 3 8 13 1 l containedIn15 Cambridge University Press 3 9 12 1 l containedIn16 Springer 2 9 10 1 l citesarcs 1 authorOf 2 10 7 1 l citesarcs 2 cites 5 14 15 1 l publishedByarcs 3 containedIn 5 11 16 1 l publishedByarcs 4 editorOfarcs 5 publishedBy
bibnet bibModeclu bibSexclu
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Bibliographic network ndash picture Pajek
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
XML api ndash JSON api
In near past for description of structured data the XML (ExtensibleMarkup Language) was mostly used In last five years a JSON formatstarted to replace it Google trends
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON
JSON (JavaScript Object Notation) is a text data format thatpreserves the structure of data objects It is ldquocompatiblerdquo with basicdata structures in modern programming languages
The initial version of JSON vas developed by Douglas Crockford(around 2002) He based it on the Javascript notation The principalidea is if we apply on a string (sequence of characters) containing adescription of a data object the Javascript function eval we get asits result the corresponding data object JSON is a programminglanguage independent open code standard for exchange of dataamong programs
Two JSON standards exist
bull The JSON Data Interchange Format Standard ECMA-404October 2013
bull The JavaScript Object Notation (JSON) Data InterchangeFormat Request for Comments 7159 March 2014
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON
firstName JohnlastName SmithisAlive trueage 25address streetAddress 21 2nd Streetcity New Yorkstate NYpostalCode 10021-3100
phoneNumbers [
type homenumber 212 555-1234
type officenumber 646 555-4567
]children []spouse null
Wikipedia
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON
XML is appropriate for describing the structure of textual dataJSON is becoming the first choice for describing structured dataJSON has much simpler grammar is more readable and compatiblewith basic data structures in modern programming languagesAll keys (names of fields) are in double quotes
JSON files are by default based on the encoding Unicode (UTF-8)
The MIME type for JSON files is applicationjson therecommended file extension is json
For work with JSON there exists supporting libraries for all importantprogramming languages httpwwwjsonorg
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
eval and JSONparseevalhtml
lthtmlgtltheadgtlttitlegtJSON eval and parselttitlegtltheadgtltbodygtltscriptgtvar data=rsquo[abca[true null314]bBBBBBc12e+5]rsquoalert(JSON + data)documentwrite(JSONltttgt+data+ltttgtltbrgt)var value = eval(rsquo(rsquo + data + rsquo)rsquo)consolelog(eval) consolelog(value)documentwrite(evalltttgt+JSONstringify(value)+ltttgtltbrgt)var json = JSONparse(data)consolelog(JSONparse) consolelog(json)ltscriptgtltbodygtlthtmlgt
To run the Javascript code I used the Google Chrome browser To get theconsole we selectCustomize and Control GC More tools Developer tools
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
eval and JSONparse
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Importing data as Javascript assignmentimporthtml
lthtmlgtltheadgtlttitlegtJSON importlttitlegtltscript src=personjsgtltscriptgtltheadgtltbodygtltscriptgtdocumentwrite(JSONltttgt+person+ltttgtltbrgt)documentwrite(stringltttgt+JSONstringify(person)+ltttgtltbrgt)consolelog(JSON) consolelog(person)ltscriptgtltbodygtlthtmlgt
personjs
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Well formed and valid JSON files
A JSON file is well formed iff it respects JSONrsquos grammarIs my file well formed service JSONlint - another checker
JSON editor
Similar to XMLrsquos DTD files or schema we can imposeadditional restrictions to the structure of JSON files describingspecial types of data using JSON schema ndash the JSON filesrespecting these additional restrictions are called valid
Github validation JSON Schema Lint JSON Schemavalidator
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Simple examplegraphjson
infoorg0nNodes4nodes[nameAnnx02y02Num1Size100nameBenx02y08Num4Size500nameTimx08y02Num2Size200nameZoex08y08Num3Size400
]links[source0target1Count1Weight100source1target2Count1Weight100source2target3Count1Weight100source1target3Count2Weight300
]
In graphjs the JSON description is assigned to the variable graph
graph = infoorg0nNodes4nodes[
]
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Circular layoutadapted from Brath and Jonker p 257-258
ltDOCTYPE htmlgtlthtmlgtltheadgtltmeta charset=utf-8gtltscript src=graphjsgtltscriptgtlt-- script src=classjsgtltscript --gtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltscriptgt set up the drawing areavar width = 500
height = 500var svg = d3select(body)append(svg)
attr(width width)
attr(height height)
attr(xmlns httpwwww3org2000svg) angle and radius for layout assistancevar ang = 2 MathPI graphnodeslengthvar rad = width 25
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Circular layout
create the linksvar link = svgselectAll(line)data(graphlinks)enter()append(line)style(strokeblue)attr(stroke-width2)attr(x1function(d)return(radMathcos(dsourceang)+5width))attr(y1function(d)return(radMathsin(dsourceang)+5width))attr(x2function(d)return(radMathcos(dtargetang)+5width))attr(y2function(d)return(radMathsin(dtargetang)+5width))
create the nodes and set out in a circular layoutvar node = svgselectAll(circle)data(graphnodes)enter()append(circle)attr(r10)attr(cxfunction(di)return(radMathcos(iang)+5width))attr(cyfunction(di)return(radMathsin(iang)+5width))attr(fillyellow)attr(strokered)
ltscriptgtltbodygt
graphCirclehtml classjson classjs classCirclehtml+ labels classCircleLhtml+ permutation classPjson classPjs classCirclePhtm
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
SVG
ltxml version=10 encoding=UTF-8 standalone=yesgtltsvg width=500 height=500 xmlns=httpwwww3org2000svggtltline stroke-width=2 x1=450 y1=250 x2=250 y2=450 style=stroke bluegtltlinegtltline stroke-width=2 x1=250 y1=450 x2=50 y2=250 style=stroke bluegtltlinegtltline stroke-width=2 x1=50 y1=250 x2=250 y2=50 style=stroke bluegtltlinegtltline stroke-width=2 x1=250 y1=450 x2=250 y2=50 style=stroke bluegtltlinegtltcircle r=10 cx=450 cy=250 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=250 cy=450 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=50 cy=250 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=250 cy=50 fill=yellow stroke=redgtltcirclegtltsvggt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Networks in JSON format basic netJSONclassjson
netJSON basicinfo network class org 1 nNodes 15
nArcs 30 nEdges 13 nWeak 1title borrowing study materialsmeta date October 2015 author V Batagelj
nodes [
id 1 short m02 x 01857 y 02781 size 1 id 2 short m03 x 05482 y 06169 size 1 id 3 short w07 x 02219 y 04526 size 2 id 4 short w09 x 08078 y 03223 size 2
id 14 short m89 x 04000 y 08469 size 1 id 15 short m96 x 03482 y 01778 size 1
]links [
type arc source 6 target 15 weight 1 type arc source 2 target 7 weight 1
type arc source15 target 3 weight 1 type edge source 6 target 12 weight 1
type edge source 4 target 12 weight 1 type edge source 6 target 13 weight 1
]
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON and RTransforming Pajek NET and CLU files in to JSON
nodes[nameMyrielgroup1nameNapoleongroup1 nameBrujongroup4nameMmeHucheloupgroup8]
links[source1target0value1source2target0value8 source76target48value1source76target58value1]
setwd(CUsersBatageljtestpython2012amazon)library(rjson)
net2json lt- function(netFcluFjsonF)net lt- file(netFr) clu lt- file(cluFr)b lt- unlist(strsplit(readLines(netn=1) ))n lt- asinteger(b[length(b)])N lt- readLines(netn=n) nam lt- character(n)for(i in 1n) nam[i] lt- unlist(strsplit(N[i]rsquorsquo))[2]skip lt- readLines(clun=1) C lt- asinteger(readLines(clun=n))skip lt- readLines(netn=1) L lt- readLines(netn=-1)M lt- matrix(asinteger(unlist(strsplit(sub(rsquo^s+rsquorsquorsquoL)rsquos+rsquo)))ncol=3byrow=TRUE)nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(name=nam[i]group=C[i])m lt- nrow(M) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(source=M[i1]-1target=M[i2]-1value=M[i3])data lt- list(nodes=nodslinks=lnks)jstr lt- toJSON(data)json lt- file(jsonFw) cat(jstrfile=json)close(json) close(net) close(clu)
net2json(islandsnetislandscluislandsjson)
islands island 1 island 4 force islands
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
CSV2JSONR
transforming CSV files to JSON file by Vladimir Batagelj June 2016setwd(CUsersbatageljworkPythongraphSVGEUSN)library(rjson)colC lt- c(rep(character4)rep(numeric5)) nas lt- c(NANaN)nodes lt- readcsv2(bibNodesXYcsvencoding=rsquoUTF-8rsquocolClasses=colCnastrings=nas)M lt- factor(nodes$mode) mod lt- levels(M) M lt- asnumeric(M)S lt- factor(nodes$sex) sx lt- levels(S) S lt- asnumeric(S) S[isna(S)] lt- 0links lt- readcsv2(bibLinkscsvencoding=rsquoUTF-8rsquocolClasses=character)F lt- asnumeric(factor(links$fromlevels=nodes$nameordered=TRUE))T lt- asnumeric(factor(links$tolevels=nodes$nameordered=TRUE))R lt- factor(links$relation) rel lt-levels(R) R lt- asnumeric(R)n lt- nrow(nodes) nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(id=iname=nodes$name[i]mode=M[i]
sex=S[i]x=asnumeric(nodes$x[i])1000y=asnumeric(nodes$y[i])1000)m lt- nrow(links) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(type=arcsource=F[i]target=T[i]
rel=R[i]weight=1)meta lt- list(date=June 112016author=Vladimir Batagelj)leg lt- list(mode=modsex=sxrel=rel)inf lt- list(network=biborg=1nNodes=nnArcs=mtitle=Example for EUSNrsquo16legend=legmeta=meta)
data lt- list(netJSON=basicinfo=infnodes=nodslinks=lnks)json lt- file(bibjsonw) cat(toJSON(data)file=json) close(json)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibjson
netJSONbasicinfonetworkbiborg1nNodes16nArcs19titleExample for EUSNrsquo16legendmode[bookjournalpaperpersonpublisherseries]sex[fm]rel[authorOfcitescontainedIneditorOfpublishedBy]
metadateJune 112016authorVladimir Batageljnodes[id1nameBatagelj Vladimirmode4sex2x08091y06537id2nameDoreian Patrickmode4sex2x03585y06791id3nameFerligoj Anuu0161kamode4sex1x06195y06807id4nameGranovetter Markmode4sex2x01456y06605id5nameMoustaki Irinimode4sex1x0783y0228id6nameMrvar Andrejmode4sex2x0478y06301id7nameClustering with relational constraintmode3sex0x06841y03801
id15nameCambridge University Pressmode5sex0x05343y02382id16nameSpringermode5sex0x08846y0174]links[typearcsource1target10rel1weight1typearcsource2target10rel1weight1typearcsource3target10rel1weight1typearcsource1target7rel1weight1typearcsource3target7rel1weight1typearcsource4target8rel1weight1typearcsource4target14rel4weight1
typearcsource10target7rel2weight1typearcsource14target15rel5weight1typearcsource11target16rel5weight1
]
bibjson picture bibV Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON files anddisplaying a network with given nodesrsquo coordinates
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltinput type=rsquofilersquo accept=rsquoapplicationjsonrsquo onchange=rsquoopenFile(event)rsquogtltscriptgtfunction process(graph) set up the drawing areavar width = 500height = 500 s = graphattributesorg
var svg = d3select(body)append(svg)attr(width width)attr(height height)attr(xmlns httpwwww3org2000svg)
draw the linksvar link = svgselectAll(line)data(graphlinks)enter()append(line)style(stroke function(di) return((dtype==arc magenta blue)))attr(stroke-width 2)attr(x1 function(d) return(graphnodes[dsource-s]xwidth))attr(y1 function(d) return(graphnodes[dsource-s]yheight))attr(x2 function(d) return(graphnodes[dtarget-s]xwidth))attr(y2 function(d) return(graphnodes[dtarget-s]yheight))
draw the nodesvar node = svgselectAll(circle)data(graphnodes)enter()append(circle)attr(r 15)attr(cx function(di) return(dxwidth))attr(cy function(di) return(dyheight))attr(fill yellow)attr(stroke red)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
readingadapted from Matt West Reading Files Using The HTML5 FileReader API
var openFile = function(event) var input = eventtargetvar reader = new FileReader()readeronload = function()process(JSONparse(readerresult))
readerreadAsText(inputfiles[0])
ltscriptgtltbodygt
graphReadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON file from serveradapted from Ying Kit Yuen jQuery amp Javascript -ndash Read JSON files on server
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtlttitlegtLoad JSON file from serverlttitlegtlt-- httpeurekaykyueninfo20130925jquery-javascript-read-json-files-on-server --gtltscript src=httpajaxgoogleapiscomajaxlibsjquery1102jqueryminjsgtltscriptgtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltselect id=datagtltoption value=graphjsongtgraphjsonltoptiongtltoption value=classjsongtclassjsonltoptiongt
ltselectgtltbutton id=btngtReadltbuttongtltscriptgtfunction process(graph) set up the drawing area the body of function process is the same as in the previous exampleattr(stroke red)
$(btn)click(function()$getJSON($(data)val() function(json) process(json))
)ltscriptgtltbodygt
graphLoadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Network displayer graphXY
drawNetjs
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
graphXYgen
ltDOCTYPE htmlgtltmeta charset=utf-8gtltbodygtlt-- script src=graphAjsgtltscript --gtltscript src=graphBjsgtltscriptgtlt-- script src=classSjsgtltscript --gtltscript src=drawNetjsgtltscriptgtltscript src=d3d3jsgtltscriptgtltscriptgtvars = graphinfoorgwidth = graphstylecanvaswidthheight = graphstylecanvasheightvar lw = 1if ( typeof graphstyle == rsquoundefinedrsquo ampamp graphstyle) if ( typeof graphstylelink == rsquoundefinedrsquo ampamp graphstylelink )
if ( typeof graphstylelinkwidth == rsquoundefinedrsquo ampamp graphstylelinkwidth ) var lw = graphstylelinkwidth
if(graphnetJSON==rsquogeneralrsquo) var OK = drawNet(graphpersonsdatagraphfrienddata)
else var OK = drawNet(graphnodesgraphlinks)
ltscriptgtltbodygt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Saving SVG pictureS Murray Interactive Data Visualization for the Web p 235
In Google Chrome we draw a picture and open the Developer ToolsIn the Elements we identify the SVG subobject select it copy it intosome text editor and save with extension svg
To enhance the picture or to transform it to other picture formats we
process it using some vector graphics editor
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
To do
bull displayer templates can be based on GUI
bull for a description of multirelational networks we use the rel
attribute in the general version they can be treated asseparate sets of links
bull properties are considered as attributes in the general versionthey can be represented as special objects vector partitionpermutation and cluster
bull use temporal quantities for describing temporal networks
bull extend the list of info-attributes attributes type (simpletemporal) twoModeOrg nStrong nRelations planar
bull icons can be used for visualization of nodes Font AwesomeMaterial Icons tests
bull links can be visually represented in many different ways that canbe described in style
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
to do
bull style can be attached as an attribute also to an element(node link) thus changing the default settings
bull add the visualization of arcs with arrows Directed Graph EditorD3 Tips and Tricks
bull to be included in netD3js vzmetno risanje Force in urejanjeSpringy Matrix with permutations
bull can some attributes be renamed from tail nodeA rarrsource to head nodeB rarr target may be the simplestsolution is a replace in some text editor
bull implement saving of the obtained SVG picture to a file ExportSVG with Style d3jsSVG Export demo
bull include in netJSON elements useful in some applications suchas hooks or inout-ports background image etc
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Sources
Ideas for visualization styles can be found in GoJS - InteractiveDiagrams for JavaScript and HTML Visjs in VisualComplexity
GoJS mdashSankey Diagram Family Tree Logic Circuit DynamicPortsVega - a visualization grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References I
Vladimir Batagelj Complex Networks Visualization of RA Meyersed Encyclopedia of Complexity and Systems Science Springer 20091253-1268
Vladimir Batagelj Andrej Mrvar Pajek manual
Jernej Bodlaj Network Data File Formats in Reda Alhajj Jon Rokne(eds) Encyclopedia of Social Network Analysis and Mining SpringerNew York 2014 p 1076-1091
Richard Brath David Jonker Graph Analysis and VisualizationDiscovering Business Opportunity in Linked Data John Wiley amp SonsIndianapolis Indiana 2015
Emden Gansner Eleftherios Koutsofios Stephen North Drawinggraphs with dot January 26 2006
Scott Murray Interactive Data Visualization for the Web OrsquoReillySebastopol 2013
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References II
Wouter De Nooy Andrej Mrvar Vladimir Batagelj Exploratory SocialNetwork Analysis with Pajek Revised and Expanded Second EditionStructural Analysis in the Social Sciences Cambridge UniversityPress September 2011
Matthew Roughan Jonathan Tuke Unravelling Graph-Exchange FileFormats arXiv150302781 submitted on 10 Mar 2015
Wikipedia JSON
Leland Wilkinson The Grammar of Graphics Springer-Verlag NewYork 2005
V Batagelj JSON amp D3js
- Introduction
- Description of networks
- JSON
- JSON and D3js
- JSON and R
- Displayer
- To do
- References
-
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Networks in D3js
bull Force Force-Directed Graph Force Layout amp Matrix MarketFormat 3D Force Layout An A to Z of extra features for the d3force layout
bull Directed Directed Graph Editor Directed Edges (Curves andArrow Markers) Mobile Patent Suits
bull Matrix Co-occurrence Matrix
bull Hive Hive Plots
bull Chord Chord Diagram Hierarchical Edge Bundling
bull Applications Linked JAZZ Ontology Visualization VisualizingPackage Dependencies Connectome explorer for the rdquobrainrdquo ofC elegans Gene functional interaction networks
bull More D3 gallery The Big List of D3js Examples - ChristopheViau Over 2000 D3js Examples and Demos
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Project
bull netJSON develop a JSON based format for description ofnetworks It should be ldquocompleterdquo ndash it can be used also todescribe multi-relational temporal two-mode networks andcollections of networks netJSON network description can beextended with a layout information (jsongraph)
bull netD3js collect and adapt for netJSON selected existingnetwork visualization solutions based on D3js and develop newones
netJSON could serve as a data exchange format among networkanalysis programs (conversion program fromto netJSON)
Programers may export their results in netJSON and use net3Djs fortheir visualization
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
netJSON and netD3js for SNA analysts
network rarr netJSON rarr SVG rarr PDF PNG EPS
bull Prepare your network data in netJSON format (in a text editorfrom Excel tables using R export from SNA programs andconvert to netJSON) Add the layout information
bull Use selected netD3js templates to visualize the network
bull Optionally save the SVG picture enhance it in some vectorgraphics editor (AI Inkscape) and export it in selected format(PDF ESP PNG )
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Networks
A network is based on two sets ndash set of nodes (vertices) thatrepresent the selected units and set of links (lines) that representties between units They determine a graph A line can be directed ndashan arc or undirected ndash an edgeAdditional data about nodes or links may be known ndash their properties(attributes) For example namelabel type value
Network = Graph + DataA network N = (VLPW) consists of
bull a graph G = (VL) where V is the set of nodes A is the set ofarcs E is the set of edges and L = E cup A is the set of linksn = |V| m = |L|
bull P vertex value functions properties p V rarr A
bull W line value functions weights w L rarr B
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Description of networks
How to describe a network N In principle the answer is simple ndash welist its components VLP and W
The simplest way is to describe a network N by providing (VP) and(LW) in a form of two tables
As an example let us describe a part of network determined by thefollowing worksGeneralized blockmodeling Clustering with relational constraintPartitioning signed social networks The Strength of Weak Ties
There are nodes of different types (modes) persons papers booksseries journals publishers and different relations among themauthor of editor of contained in cites published by
Both tables are often maintained in Excel They can be exported as
text in CSV (Comma Separated Values) format
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibNodescsv
namemodecountrysexyearvolnumfPagelPagexyBatagelj VladimirpersonSIm80916537Doreian PatrickpersonUSm35856791Ferligoj AnuskapersonSIf61956807Granovetter MarkpersonUSm14566605Moustaki IrinipersonUKf78302280Mrvar AndrejpersonSIm47806301Clustering with relational constraintpaper19824741342668413801The Strength of Weak Tiespaper19737861360138011133294Partitioning signed social networkspaper200931111140803378Generalized Blockmodelingbook200524138553304459Psychometrikajournal74180861Social Networksjournal32142365The American Journal of Sociologyjournal11131689Structural Analysis in the Social Sciencesseries31040828Cambridge University PresspublisherUK53432382SpringerpublisherUS88461740
bibNodescsv
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibLinkscsv
fromrelationtoBatagelj VladimirauthorOfGeneralized BlockmodelingDoreian PatrickauthorOfGeneralized BlockmodelingFerligoj AnuskaauthorOfGeneralized BlockmodelingBatagelj VladimirauthorOfClustering with relational constraintFerligoj AnuskaauthorOfClustering with relational constraintGranovetter MarkauthorOfThe Strength of Weak TiesGranovetter MarkeditorOfStructural Analysis in the Social SciencesDoreian PatrickauthorOfPartitioning signed social networksMrvar AndrejauthorOfPartitioning signed social networksMoustaki IrinieditorOfPsychometrikaDoreian PatrickeditorOfSocial NetworksGeneralized BlockmodelingcontainedInStructural Analysis in the Social SciencesClustering with relational constraintcontainedInPsychometrikaThe Strength of Weak TiescontainedInThe American Journal of SociologyPartitioning signed social networkscontainedInSocial NetworksPartitioning signed social networkscitesGeneralized BlockmodelingGeneralized BlockmodelingcitesClustering with relational constraintStructural Analysis in the Social SciencespublishedByCambridge University PressPsychometrikapublishedBySpringer
bibLinkscsv
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
CSV2PajekR
transforming CSV file to Pajek files by Vladimir Batagelj June 2016setwd(CUsersbatageljworkPythongraphSVGEUSN)colC lt- c(rep(character4)rep(integer7)) nas lt- c(NANaN)nodes lt- readcsv2(bibNodescsvencoding=rsquoUTF-8rsquocolClasses=colCnastrings=nas)n lt- nrow(nodes) M lt- factor(nodes$mode) S lt- factor(nodes$sex)mod lt- levels(M) sx lt- levels(S) S lt- asnumeric(S) S[isna(S)] lt- 0links lt- readcsv2(bibLinkscsvencoding=rsquoUTF-8rsquocolClasses=character)F lt- factor(links$fromlevels=nodes$nameordered=TRUE)T lt- factor(links$tolevels=nodes$nameordered=TRUE)R lt- factor(links$relation) rel lt- levels(R)net lt- file(bibnetw) cat(rsquovertices rsquonrsquonrsquofile=net)clu lt- file(bibModecluw) sex lt- file(bibSexcluw)cat(rsquorsquofile=clu) cat(rsquorsquofile=sex)for(i in 1length(mod)) cat(rsquo rsquoimod[i]file=clu)cat(rsquonvertices rsquonrsquonrsquofile=clu)for(i in 1length(sx)) cat(rsquo rsquoisx[i]file=sex)cat(rsquonvertices rsquonrsquonrsquofile=sex)for(v in 1n) cat(vrsquo rsquonodes$name[v]rsquonrsquosep=rsquorsquofile=net)cat(M[v]rsquonrsquofile=clu) cat(S[v]rsquonrsquofile=sex)
for(r in 1length(rel)) cat(rsquoarcs rsquorrsquo rsquorel[r]rsquonrsquosep=rsquorsquofile=net)cat(rsquoarcsnrsquofile=net)for(a in 1nrow(links))cat(R[a]rsquo rsquoF[a]rsquo rsquoT[a]rsquo 1 l rsquorel[R[a]]rsquonrsquosep=rsquorsquofile=net)
close(net) close(clu) close(sex)
CSV2PajekR
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibnet
vertices 16 arcs1 Batagelj Vladimir 1 1 10 1 l authorOf2 Doreian Patrick 1 2 10 1 l authorOf3 Ferligoj Anuska 1 3 10 1 l authorOf4 Granovetter Mark 1 1 7 1 l authorOf5 Moustaki Irini 1 3 7 1 l authorOf6 Mrvar Andrej 1 4 8 1 l authorOf7 Clustering with relational constraint 4 4 14 1 l editorOf8 The Strength of Weak Ties 1 2 9 1 l authorOf9 Partitioning signed social networks 1 6 9 1 l authorOf10 Generalized Blockmodeling 4 5 11 1 l editorOf11 Psychometrika 4 2 12 1 l editorOf12 Social Networks 3 10 14 1 l containedIn13 The American Journal of Sociology 3 7 11 1 l containedIn14 Structural Analysis in the Social Sciences 3 8 13 1 l containedIn15 Cambridge University Press 3 9 12 1 l containedIn16 Springer 2 9 10 1 l citesarcs 1 authorOf 2 10 7 1 l citesarcs 2 cites 5 14 15 1 l publishedByarcs 3 containedIn 5 11 16 1 l publishedByarcs 4 editorOfarcs 5 publishedBy
bibnet bibModeclu bibSexclu
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Bibliographic network ndash picture Pajek
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
XML api ndash JSON api
In near past for description of structured data the XML (ExtensibleMarkup Language) was mostly used In last five years a JSON formatstarted to replace it Google trends
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON
JSON (JavaScript Object Notation) is a text data format thatpreserves the structure of data objects It is ldquocompatiblerdquo with basicdata structures in modern programming languages
The initial version of JSON vas developed by Douglas Crockford(around 2002) He based it on the Javascript notation The principalidea is if we apply on a string (sequence of characters) containing adescription of a data object the Javascript function eval we get asits result the corresponding data object JSON is a programminglanguage independent open code standard for exchange of dataamong programs
Two JSON standards exist
bull The JSON Data Interchange Format Standard ECMA-404October 2013
bull The JavaScript Object Notation (JSON) Data InterchangeFormat Request for Comments 7159 March 2014
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON
firstName JohnlastName SmithisAlive trueage 25address streetAddress 21 2nd Streetcity New Yorkstate NYpostalCode 10021-3100
phoneNumbers [
type homenumber 212 555-1234
type officenumber 646 555-4567
]children []spouse null
Wikipedia
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON
XML is appropriate for describing the structure of textual dataJSON is becoming the first choice for describing structured dataJSON has much simpler grammar is more readable and compatiblewith basic data structures in modern programming languagesAll keys (names of fields) are in double quotes
JSON files are by default based on the encoding Unicode (UTF-8)
The MIME type for JSON files is applicationjson therecommended file extension is json
For work with JSON there exists supporting libraries for all importantprogramming languages httpwwwjsonorg
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
eval and JSONparseevalhtml
lthtmlgtltheadgtlttitlegtJSON eval and parselttitlegtltheadgtltbodygtltscriptgtvar data=rsquo[abca[true null314]bBBBBBc12e+5]rsquoalert(JSON + data)documentwrite(JSONltttgt+data+ltttgtltbrgt)var value = eval(rsquo(rsquo + data + rsquo)rsquo)consolelog(eval) consolelog(value)documentwrite(evalltttgt+JSONstringify(value)+ltttgtltbrgt)var json = JSONparse(data)consolelog(JSONparse) consolelog(json)ltscriptgtltbodygtlthtmlgt
To run the Javascript code I used the Google Chrome browser To get theconsole we selectCustomize and Control GC More tools Developer tools
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
eval and JSONparse
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Importing data as Javascript assignmentimporthtml
lthtmlgtltheadgtlttitlegtJSON importlttitlegtltscript src=personjsgtltscriptgtltheadgtltbodygtltscriptgtdocumentwrite(JSONltttgt+person+ltttgtltbrgt)documentwrite(stringltttgt+JSONstringify(person)+ltttgtltbrgt)consolelog(JSON) consolelog(person)ltscriptgtltbodygtlthtmlgt
personjs
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Well formed and valid JSON files
A JSON file is well formed iff it respects JSONrsquos grammarIs my file well formed service JSONlint - another checker
JSON editor
Similar to XMLrsquos DTD files or schema we can imposeadditional restrictions to the structure of JSON files describingspecial types of data using JSON schema ndash the JSON filesrespecting these additional restrictions are called valid
Github validation JSON Schema Lint JSON Schemavalidator
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Simple examplegraphjson
infoorg0nNodes4nodes[nameAnnx02y02Num1Size100nameBenx02y08Num4Size500nameTimx08y02Num2Size200nameZoex08y08Num3Size400
]links[source0target1Count1Weight100source1target2Count1Weight100source2target3Count1Weight100source1target3Count2Weight300
]
In graphjs the JSON description is assigned to the variable graph
graph = infoorg0nNodes4nodes[
]
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Circular layoutadapted from Brath and Jonker p 257-258
ltDOCTYPE htmlgtlthtmlgtltheadgtltmeta charset=utf-8gtltscript src=graphjsgtltscriptgtlt-- script src=classjsgtltscript --gtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltscriptgt set up the drawing areavar width = 500
height = 500var svg = d3select(body)append(svg)
attr(width width)
attr(height height)
attr(xmlns httpwwww3org2000svg) angle and radius for layout assistancevar ang = 2 MathPI graphnodeslengthvar rad = width 25
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Circular layout
create the linksvar link = svgselectAll(line)data(graphlinks)enter()append(line)style(strokeblue)attr(stroke-width2)attr(x1function(d)return(radMathcos(dsourceang)+5width))attr(y1function(d)return(radMathsin(dsourceang)+5width))attr(x2function(d)return(radMathcos(dtargetang)+5width))attr(y2function(d)return(radMathsin(dtargetang)+5width))
create the nodes and set out in a circular layoutvar node = svgselectAll(circle)data(graphnodes)enter()append(circle)attr(r10)attr(cxfunction(di)return(radMathcos(iang)+5width))attr(cyfunction(di)return(radMathsin(iang)+5width))attr(fillyellow)attr(strokered)
ltscriptgtltbodygt
graphCirclehtml classjson classjs classCirclehtml+ labels classCircleLhtml+ permutation classPjson classPjs classCirclePhtm
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
SVG
ltxml version=10 encoding=UTF-8 standalone=yesgtltsvg width=500 height=500 xmlns=httpwwww3org2000svggtltline stroke-width=2 x1=450 y1=250 x2=250 y2=450 style=stroke bluegtltlinegtltline stroke-width=2 x1=250 y1=450 x2=50 y2=250 style=stroke bluegtltlinegtltline stroke-width=2 x1=50 y1=250 x2=250 y2=50 style=stroke bluegtltlinegtltline stroke-width=2 x1=250 y1=450 x2=250 y2=50 style=stroke bluegtltlinegtltcircle r=10 cx=450 cy=250 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=250 cy=450 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=50 cy=250 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=250 cy=50 fill=yellow stroke=redgtltcirclegtltsvggt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Networks in JSON format basic netJSONclassjson
netJSON basicinfo network class org 1 nNodes 15
nArcs 30 nEdges 13 nWeak 1title borrowing study materialsmeta date October 2015 author V Batagelj
nodes [
id 1 short m02 x 01857 y 02781 size 1 id 2 short m03 x 05482 y 06169 size 1 id 3 short w07 x 02219 y 04526 size 2 id 4 short w09 x 08078 y 03223 size 2
id 14 short m89 x 04000 y 08469 size 1 id 15 short m96 x 03482 y 01778 size 1
]links [
type arc source 6 target 15 weight 1 type arc source 2 target 7 weight 1
type arc source15 target 3 weight 1 type edge source 6 target 12 weight 1
type edge source 4 target 12 weight 1 type edge source 6 target 13 weight 1
]
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON and RTransforming Pajek NET and CLU files in to JSON
nodes[nameMyrielgroup1nameNapoleongroup1 nameBrujongroup4nameMmeHucheloupgroup8]
links[source1target0value1source2target0value8 source76target48value1source76target58value1]
setwd(CUsersBatageljtestpython2012amazon)library(rjson)
net2json lt- function(netFcluFjsonF)net lt- file(netFr) clu lt- file(cluFr)b lt- unlist(strsplit(readLines(netn=1) ))n lt- asinteger(b[length(b)])N lt- readLines(netn=n) nam lt- character(n)for(i in 1n) nam[i] lt- unlist(strsplit(N[i]rsquorsquo))[2]skip lt- readLines(clun=1) C lt- asinteger(readLines(clun=n))skip lt- readLines(netn=1) L lt- readLines(netn=-1)M lt- matrix(asinteger(unlist(strsplit(sub(rsquo^s+rsquorsquorsquoL)rsquos+rsquo)))ncol=3byrow=TRUE)nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(name=nam[i]group=C[i])m lt- nrow(M) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(source=M[i1]-1target=M[i2]-1value=M[i3])data lt- list(nodes=nodslinks=lnks)jstr lt- toJSON(data)json lt- file(jsonFw) cat(jstrfile=json)close(json) close(net) close(clu)
net2json(islandsnetislandscluislandsjson)
islands island 1 island 4 force islands
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
CSV2JSONR
transforming CSV files to JSON file by Vladimir Batagelj June 2016setwd(CUsersbatageljworkPythongraphSVGEUSN)library(rjson)colC lt- c(rep(character4)rep(numeric5)) nas lt- c(NANaN)nodes lt- readcsv2(bibNodesXYcsvencoding=rsquoUTF-8rsquocolClasses=colCnastrings=nas)M lt- factor(nodes$mode) mod lt- levels(M) M lt- asnumeric(M)S lt- factor(nodes$sex) sx lt- levels(S) S lt- asnumeric(S) S[isna(S)] lt- 0links lt- readcsv2(bibLinkscsvencoding=rsquoUTF-8rsquocolClasses=character)F lt- asnumeric(factor(links$fromlevels=nodes$nameordered=TRUE))T lt- asnumeric(factor(links$tolevels=nodes$nameordered=TRUE))R lt- factor(links$relation) rel lt-levels(R) R lt- asnumeric(R)n lt- nrow(nodes) nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(id=iname=nodes$name[i]mode=M[i]
sex=S[i]x=asnumeric(nodes$x[i])1000y=asnumeric(nodes$y[i])1000)m lt- nrow(links) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(type=arcsource=F[i]target=T[i]
rel=R[i]weight=1)meta lt- list(date=June 112016author=Vladimir Batagelj)leg lt- list(mode=modsex=sxrel=rel)inf lt- list(network=biborg=1nNodes=nnArcs=mtitle=Example for EUSNrsquo16legend=legmeta=meta)
data lt- list(netJSON=basicinfo=infnodes=nodslinks=lnks)json lt- file(bibjsonw) cat(toJSON(data)file=json) close(json)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibjson
netJSONbasicinfonetworkbiborg1nNodes16nArcs19titleExample for EUSNrsquo16legendmode[bookjournalpaperpersonpublisherseries]sex[fm]rel[authorOfcitescontainedIneditorOfpublishedBy]
metadateJune 112016authorVladimir Batageljnodes[id1nameBatagelj Vladimirmode4sex2x08091y06537id2nameDoreian Patrickmode4sex2x03585y06791id3nameFerligoj Anuu0161kamode4sex1x06195y06807id4nameGranovetter Markmode4sex2x01456y06605id5nameMoustaki Irinimode4sex1x0783y0228id6nameMrvar Andrejmode4sex2x0478y06301id7nameClustering with relational constraintmode3sex0x06841y03801
id15nameCambridge University Pressmode5sex0x05343y02382id16nameSpringermode5sex0x08846y0174]links[typearcsource1target10rel1weight1typearcsource2target10rel1weight1typearcsource3target10rel1weight1typearcsource1target7rel1weight1typearcsource3target7rel1weight1typearcsource4target8rel1weight1typearcsource4target14rel4weight1
typearcsource10target7rel2weight1typearcsource14target15rel5weight1typearcsource11target16rel5weight1
]
bibjson picture bibV Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON files anddisplaying a network with given nodesrsquo coordinates
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltinput type=rsquofilersquo accept=rsquoapplicationjsonrsquo onchange=rsquoopenFile(event)rsquogtltscriptgtfunction process(graph) set up the drawing areavar width = 500height = 500 s = graphattributesorg
var svg = d3select(body)append(svg)attr(width width)attr(height height)attr(xmlns httpwwww3org2000svg)
draw the linksvar link = svgselectAll(line)data(graphlinks)enter()append(line)style(stroke function(di) return((dtype==arc magenta blue)))attr(stroke-width 2)attr(x1 function(d) return(graphnodes[dsource-s]xwidth))attr(y1 function(d) return(graphnodes[dsource-s]yheight))attr(x2 function(d) return(graphnodes[dtarget-s]xwidth))attr(y2 function(d) return(graphnodes[dtarget-s]yheight))
draw the nodesvar node = svgselectAll(circle)data(graphnodes)enter()append(circle)attr(r 15)attr(cx function(di) return(dxwidth))attr(cy function(di) return(dyheight))attr(fill yellow)attr(stroke red)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
readingadapted from Matt West Reading Files Using The HTML5 FileReader API
var openFile = function(event) var input = eventtargetvar reader = new FileReader()readeronload = function()process(JSONparse(readerresult))
readerreadAsText(inputfiles[0])
ltscriptgtltbodygt
graphReadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON file from serveradapted from Ying Kit Yuen jQuery amp Javascript -ndash Read JSON files on server
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtlttitlegtLoad JSON file from serverlttitlegtlt-- httpeurekaykyueninfo20130925jquery-javascript-read-json-files-on-server --gtltscript src=httpajaxgoogleapiscomajaxlibsjquery1102jqueryminjsgtltscriptgtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltselect id=datagtltoption value=graphjsongtgraphjsonltoptiongtltoption value=classjsongtclassjsonltoptiongt
ltselectgtltbutton id=btngtReadltbuttongtltscriptgtfunction process(graph) set up the drawing area the body of function process is the same as in the previous exampleattr(stroke red)
$(btn)click(function()$getJSON($(data)val() function(json) process(json))
)ltscriptgtltbodygt
graphLoadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Network displayer graphXY
drawNetjs
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
graphXYgen
ltDOCTYPE htmlgtltmeta charset=utf-8gtltbodygtlt-- script src=graphAjsgtltscript --gtltscript src=graphBjsgtltscriptgtlt-- script src=classSjsgtltscript --gtltscript src=drawNetjsgtltscriptgtltscript src=d3d3jsgtltscriptgtltscriptgtvars = graphinfoorgwidth = graphstylecanvaswidthheight = graphstylecanvasheightvar lw = 1if ( typeof graphstyle == rsquoundefinedrsquo ampamp graphstyle) if ( typeof graphstylelink == rsquoundefinedrsquo ampamp graphstylelink )
if ( typeof graphstylelinkwidth == rsquoundefinedrsquo ampamp graphstylelinkwidth ) var lw = graphstylelinkwidth
if(graphnetJSON==rsquogeneralrsquo) var OK = drawNet(graphpersonsdatagraphfrienddata)
else var OK = drawNet(graphnodesgraphlinks)
ltscriptgtltbodygt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Saving SVG pictureS Murray Interactive Data Visualization for the Web p 235
In Google Chrome we draw a picture and open the Developer ToolsIn the Elements we identify the SVG subobject select it copy it intosome text editor and save with extension svg
To enhance the picture or to transform it to other picture formats we
process it using some vector graphics editor
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
To do
bull displayer templates can be based on GUI
bull for a description of multirelational networks we use the rel
attribute in the general version they can be treated asseparate sets of links
bull properties are considered as attributes in the general versionthey can be represented as special objects vector partitionpermutation and cluster
bull use temporal quantities for describing temporal networks
bull extend the list of info-attributes attributes type (simpletemporal) twoModeOrg nStrong nRelations planar
bull icons can be used for visualization of nodes Font AwesomeMaterial Icons tests
bull links can be visually represented in many different ways that canbe described in style
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
to do
bull style can be attached as an attribute also to an element(node link) thus changing the default settings
bull add the visualization of arcs with arrows Directed Graph EditorD3 Tips and Tricks
bull to be included in netD3js vzmetno risanje Force in urejanjeSpringy Matrix with permutations
bull can some attributes be renamed from tail nodeA rarrsource to head nodeB rarr target may be the simplestsolution is a replace in some text editor
bull implement saving of the obtained SVG picture to a file ExportSVG with Style d3jsSVG Export demo
bull include in netJSON elements useful in some applications suchas hooks or inout-ports background image etc
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Sources
Ideas for visualization styles can be found in GoJS - InteractiveDiagrams for JavaScript and HTML Visjs in VisualComplexity
GoJS mdashSankey Diagram Family Tree Logic Circuit DynamicPortsVega - a visualization grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References I
Vladimir Batagelj Complex Networks Visualization of RA Meyersed Encyclopedia of Complexity and Systems Science Springer 20091253-1268
Vladimir Batagelj Andrej Mrvar Pajek manual
Jernej Bodlaj Network Data File Formats in Reda Alhajj Jon Rokne(eds) Encyclopedia of Social Network Analysis and Mining SpringerNew York 2014 p 1076-1091
Richard Brath David Jonker Graph Analysis and VisualizationDiscovering Business Opportunity in Linked Data John Wiley amp SonsIndianapolis Indiana 2015
Emden Gansner Eleftherios Koutsofios Stephen North Drawinggraphs with dot January 26 2006
Scott Murray Interactive Data Visualization for the Web OrsquoReillySebastopol 2013
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References II
Wouter De Nooy Andrej Mrvar Vladimir Batagelj Exploratory SocialNetwork Analysis with Pajek Revised and Expanded Second EditionStructural Analysis in the Social Sciences Cambridge UniversityPress September 2011
Matthew Roughan Jonathan Tuke Unravelling Graph-Exchange FileFormats arXiv150302781 submitted on 10 Mar 2015
Wikipedia JSON
Leland Wilkinson The Grammar of Graphics Springer-Verlag NewYork 2005
V Batagelj JSON amp D3js
- Introduction
- Description of networks
- JSON
- JSON and D3js
- JSON and R
- Displayer
- To do
- References
-
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Project
bull netJSON develop a JSON based format for description ofnetworks It should be ldquocompleterdquo ndash it can be used also todescribe multi-relational temporal two-mode networks andcollections of networks netJSON network description can beextended with a layout information (jsongraph)
bull netD3js collect and adapt for netJSON selected existingnetwork visualization solutions based on D3js and develop newones
netJSON could serve as a data exchange format among networkanalysis programs (conversion program fromto netJSON)
Programers may export their results in netJSON and use net3Djs fortheir visualization
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
netJSON and netD3js for SNA analysts
network rarr netJSON rarr SVG rarr PDF PNG EPS
bull Prepare your network data in netJSON format (in a text editorfrom Excel tables using R export from SNA programs andconvert to netJSON) Add the layout information
bull Use selected netD3js templates to visualize the network
bull Optionally save the SVG picture enhance it in some vectorgraphics editor (AI Inkscape) and export it in selected format(PDF ESP PNG )
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Networks
A network is based on two sets ndash set of nodes (vertices) thatrepresent the selected units and set of links (lines) that representties between units They determine a graph A line can be directed ndashan arc or undirected ndash an edgeAdditional data about nodes or links may be known ndash their properties(attributes) For example namelabel type value
Network = Graph + DataA network N = (VLPW) consists of
bull a graph G = (VL) where V is the set of nodes A is the set ofarcs E is the set of edges and L = E cup A is the set of linksn = |V| m = |L|
bull P vertex value functions properties p V rarr A
bull W line value functions weights w L rarr B
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Description of networks
How to describe a network N In principle the answer is simple ndash welist its components VLP and W
The simplest way is to describe a network N by providing (VP) and(LW) in a form of two tables
As an example let us describe a part of network determined by thefollowing worksGeneralized blockmodeling Clustering with relational constraintPartitioning signed social networks The Strength of Weak Ties
There are nodes of different types (modes) persons papers booksseries journals publishers and different relations among themauthor of editor of contained in cites published by
Both tables are often maintained in Excel They can be exported as
text in CSV (Comma Separated Values) format
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibNodescsv
namemodecountrysexyearvolnumfPagelPagexyBatagelj VladimirpersonSIm80916537Doreian PatrickpersonUSm35856791Ferligoj AnuskapersonSIf61956807Granovetter MarkpersonUSm14566605Moustaki IrinipersonUKf78302280Mrvar AndrejpersonSIm47806301Clustering with relational constraintpaper19824741342668413801The Strength of Weak Tiespaper19737861360138011133294Partitioning signed social networkspaper200931111140803378Generalized Blockmodelingbook200524138553304459Psychometrikajournal74180861Social Networksjournal32142365The American Journal of Sociologyjournal11131689Structural Analysis in the Social Sciencesseries31040828Cambridge University PresspublisherUK53432382SpringerpublisherUS88461740
bibNodescsv
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibLinkscsv
fromrelationtoBatagelj VladimirauthorOfGeneralized BlockmodelingDoreian PatrickauthorOfGeneralized BlockmodelingFerligoj AnuskaauthorOfGeneralized BlockmodelingBatagelj VladimirauthorOfClustering with relational constraintFerligoj AnuskaauthorOfClustering with relational constraintGranovetter MarkauthorOfThe Strength of Weak TiesGranovetter MarkeditorOfStructural Analysis in the Social SciencesDoreian PatrickauthorOfPartitioning signed social networksMrvar AndrejauthorOfPartitioning signed social networksMoustaki IrinieditorOfPsychometrikaDoreian PatrickeditorOfSocial NetworksGeneralized BlockmodelingcontainedInStructural Analysis in the Social SciencesClustering with relational constraintcontainedInPsychometrikaThe Strength of Weak TiescontainedInThe American Journal of SociologyPartitioning signed social networkscontainedInSocial NetworksPartitioning signed social networkscitesGeneralized BlockmodelingGeneralized BlockmodelingcitesClustering with relational constraintStructural Analysis in the Social SciencespublishedByCambridge University PressPsychometrikapublishedBySpringer
bibLinkscsv
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
CSV2PajekR
transforming CSV file to Pajek files by Vladimir Batagelj June 2016setwd(CUsersbatageljworkPythongraphSVGEUSN)colC lt- c(rep(character4)rep(integer7)) nas lt- c(NANaN)nodes lt- readcsv2(bibNodescsvencoding=rsquoUTF-8rsquocolClasses=colCnastrings=nas)n lt- nrow(nodes) M lt- factor(nodes$mode) S lt- factor(nodes$sex)mod lt- levels(M) sx lt- levels(S) S lt- asnumeric(S) S[isna(S)] lt- 0links lt- readcsv2(bibLinkscsvencoding=rsquoUTF-8rsquocolClasses=character)F lt- factor(links$fromlevels=nodes$nameordered=TRUE)T lt- factor(links$tolevels=nodes$nameordered=TRUE)R lt- factor(links$relation) rel lt- levels(R)net lt- file(bibnetw) cat(rsquovertices rsquonrsquonrsquofile=net)clu lt- file(bibModecluw) sex lt- file(bibSexcluw)cat(rsquorsquofile=clu) cat(rsquorsquofile=sex)for(i in 1length(mod)) cat(rsquo rsquoimod[i]file=clu)cat(rsquonvertices rsquonrsquonrsquofile=clu)for(i in 1length(sx)) cat(rsquo rsquoisx[i]file=sex)cat(rsquonvertices rsquonrsquonrsquofile=sex)for(v in 1n) cat(vrsquo rsquonodes$name[v]rsquonrsquosep=rsquorsquofile=net)cat(M[v]rsquonrsquofile=clu) cat(S[v]rsquonrsquofile=sex)
for(r in 1length(rel)) cat(rsquoarcs rsquorrsquo rsquorel[r]rsquonrsquosep=rsquorsquofile=net)cat(rsquoarcsnrsquofile=net)for(a in 1nrow(links))cat(R[a]rsquo rsquoF[a]rsquo rsquoT[a]rsquo 1 l rsquorel[R[a]]rsquonrsquosep=rsquorsquofile=net)
close(net) close(clu) close(sex)
CSV2PajekR
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibnet
vertices 16 arcs1 Batagelj Vladimir 1 1 10 1 l authorOf2 Doreian Patrick 1 2 10 1 l authorOf3 Ferligoj Anuska 1 3 10 1 l authorOf4 Granovetter Mark 1 1 7 1 l authorOf5 Moustaki Irini 1 3 7 1 l authorOf6 Mrvar Andrej 1 4 8 1 l authorOf7 Clustering with relational constraint 4 4 14 1 l editorOf8 The Strength of Weak Ties 1 2 9 1 l authorOf9 Partitioning signed social networks 1 6 9 1 l authorOf10 Generalized Blockmodeling 4 5 11 1 l editorOf11 Psychometrika 4 2 12 1 l editorOf12 Social Networks 3 10 14 1 l containedIn13 The American Journal of Sociology 3 7 11 1 l containedIn14 Structural Analysis in the Social Sciences 3 8 13 1 l containedIn15 Cambridge University Press 3 9 12 1 l containedIn16 Springer 2 9 10 1 l citesarcs 1 authorOf 2 10 7 1 l citesarcs 2 cites 5 14 15 1 l publishedByarcs 3 containedIn 5 11 16 1 l publishedByarcs 4 editorOfarcs 5 publishedBy
bibnet bibModeclu bibSexclu
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Bibliographic network ndash picture Pajek
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
XML api ndash JSON api
In near past for description of structured data the XML (ExtensibleMarkup Language) was mostly used In last five years a JSON formatstarted to replace it Google trends
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON
JSON (JavaScript Object Notation) is a text data format thatpreserves the structure of data objects It is ldquocompatiblerdquo with basicdata structures in modern programming languages
The initial version of JSON vas developed by Douglas Crockford(around 2002) He based it on the Javascript notation The principalidea is if we apply on a string (sequence of characters) containing adescription of a data object the Javascript function eval we get asits result the corresponding data object JSON is a programminglanguage independent open code standard for exchange of dataamong programs
Two JSON standards exist
bull The JSON Data Interchange Format Standard ECMA-404October 2013
bull The JavaScript Object Notation (JSON) Data InterchangeFormat Request for Comments 7159 March 2014
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON
firstName JohnlastName SmithisAlive trueage 25address streetAddress 21 2nd Streetcity New Yorkstate NYpostalCode 10021-3100
phoneNumbers [
type homenumber 212 555-1234
type officenumber 646 555-4567
]children []spouse null
Wikipedia
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON
XML is appropriate for describing the structure of textual dataJSON is becoming the first choice for describing structured dataJSON has much simpler grammar is more readable and compatiblewith basic data structures in modern programming languagesAll keys (names of fields) are in double quotes
JSON files are by default based on the encoding Unicode (UTF-8)
The MIME type for JSON files is applicationjson therecommended file extension is json
For work with JSON there exists supporting libraries for all importantprogramming languages httpwwwjsonorg
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
eval and JSONparseevalhtml
lthtmlgtltheadgtlttitlegtJSON eval and parselttitlegtltheadgtltbodygtltscriptgtvar data=rsquo[abca[true null314]bBBBBBc12e+5]rsquoalert(JSON + data)documentwrite(JSONltttgt+data+ltttgtltbrgt)var value = eval(rsquo(rsquo + data + rsquo)rsquo)consolelog(eval) consolelog(value)documentwrite(evalltttgt+JSONstringify(value)+ltttgtltbrgt)var json = JSONparse(data)consolelog(JSONparse) consolelog(json)ltscriptgtltbodygtlthtmlgt
To run the Javascript code I used the Google Chrome browser To get theconsole we selectCustomize and Control GC More tools Developer tools
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
eval and JSONparse
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Importing data as Javascript assignmentimporthtml
lthtmlgtltheadgtlttitlegtJSON importlttitlegtltscript src=personjsgtltscriptgtltheadgtltbodygtltscriptgtdocumentwrite(JSONltttgt+person+ltttgtltbrgt)documentwrite(stringltttgt+JSONstringify(person)+ltttgtltbrgt)consolelog(JSON) consolelog(person)ltscriptgtltbodygtlthtmlgt
personjs
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Well formed and valid JSON files
A JSON file is well formed iff it respects JSONrsquos grammarIs my file well formed service JSONlint - another checker
JSON editor
Similar to XMLrsquos DTD files or schema we can imposeadditional restrictions to the structure of JSON files describingspecial types of data using JSON schema ndash the JSON filesrespecting these additional restrictions are called valid
Github validation JSON Schema Lint JSON Schemavalidator
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Simple examplegraphjson
infoorg0nNodes4nodes[nameAnnx02y02Num1Size100nameBenx02y08Num4Size500nameTimx08y02Num2Size200nameZoex08y08Num3Size400
]links[source0target1Count1Weight100source1target2Count1Weight100source2target3Count1Weight100source1target3Count2Weight300
]
In graphjs the JSON description is assigned to the variable graph
graph = infoorg0nNodes4nodes[
]
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Circular layoutadapted from Brath and Jonker p 257-258
ltDOCTYPE htmlgtlthtmlgtltheadgtltmeta charset=utf-8gtltscript src=graphjsgtltscriptgtlt-- script src=classjsgtltscript --gtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltscriptgt set up the drawing areavar width = 500
height = 500var svg = d3select(body)append(svg)
attr(width width)
attr(height height)
attr(xmlns httpwwww3org2000svg) angle and radius for layout assistancevar ang = 2 MathPI graphnodeslengthvar rad = width 25
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Circular layout
create the linksvar link = svgselectAll(line)data(graphlinks)enter()append(line)style(strokeblue)attr(stroke-width2)attr(x1function(d)return(radMathcos(dsourceang)+5width))attr(y1function(d)return(radMathsin(dsourceang)+5width))attr(x2function(d)return(radMathcos(dtargetang)+5width))attr(y2function(d)return(radMathsin(dtargetang)+5width))
create the nodes and set out in a circular layoutvar node = svgselectAll(circle)data(graphnodes)enter()append(circle)attr(r10)attr(cxfunction(di)return(radMathcos(iang)+5width))attr(cyfunction(di)return(radMathsin(iang)+5width))attr(fillyellow)attr(strokered)
ltscriptgtltbodygt
graphCirclehtml classjson classjs classCirclehtml+ labels classCircleLhtml+ permutation classPjson classPjs classCirclePhtm
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
SVG
ltxml version=10 encoding=UTF-8 standalone=yesgtltsvg width=500 height=500 xmlns=httpwwww3org2000svggtltline stroke-width=2 x1=450 y1=250 x2=250 y2=450 style=stroke bluegtltlinegtltline stroke-width=2 x1=250 y1=450 x2=50 y2=250 style=stroke bluegtltlinegtltline stroke-width=2 x1=50 y1=250 x2=250 y2=50 style=stroke bluegtltlinegtltline stroke-width=2 x1=250 y1=450 x2=250 y2=50 style=stroke bluegtltlinegtltcircle r=10 cx=450 cy=250 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=250 cy=450 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=50 cy=250 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=250 cy=50 fill=yellow stroke=redgtltcirclegtltsvggt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Networks in JSON format basic netJSONclassjson
netJSON basicinfo network class org 1 nNodes 15
nArcs 30 nEdges 13 nWeak 1title borrowing study materialsmeta date October 2015 author V Batagelj
nodes [
id 1 short m02 x 01857 y 02781 size 1 id 2 short m03 x 05482 y 06169 size 1 id 3 short w07 x 02219 y 04526 size 2 id 4 short w09 x 08078 y 03223 size 2
id 14 short m89 x 04000 y 08469 size 1 id 15 short m96 x 03482 y 01778 size 1
]links [
type arc source 6 target 15 weight 1 type arc source 2 target 7 weight 1
type arc source15 target 3 weight 1 type edge source 6 target 12 weight 1
type edge source 4 target 12 weight 1 type edge source 6 target 13 weight 1
]
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON and RTransforming Pajek NET and CLU files in to JSON
nodes[nameMyrielgroup1nameNapoleongroup1 nameBrujongroup4nameMmeHucheloupgroup8]
links[source1target0value1source2target0value8 source76target48value1source76target58value1]
setwd(CUsersBatageljtestpython2012amazon)library(rjson)
net2json lt- function(netFcluFjsonF)net lt- file(netFr) clu lt- file(cluFr)b lt- unlist(strsplit(readLines(netn=1) ))n lt- asinteger(b[length(b)])N lt- readLines(netn=n) nam lt- character(n)for(i in 1n) nam[i] lt- unlist(strsplit(N[i]rsquorsquo))[2]skip lt- readLines(clun=1) C lt- asinteger(readLines(clun=n))skip lt- readLines(netn=1) L lt- readLines(netn=-1)M lt- matrix(asinteger(unlist(strsplit(sub(rsquo^s+rsquorsquorsquoL)rsquos+rsquo)))ncol=3byrow=TRUE)nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(name=nam[i]group=C[i])m lt- nrow(M) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(source=M[i1]-1target=M[i2]-1value=M[i3])data lt- list(nodes=nodslinks=lnks)jstr lt- toJSON(data)json lt- file(jsonFw) cat(jstrfile=json)close(json) close(net) close(clu)
net2json(islandsnetislandscluislandsjson)
islands island 1 island 4 force islands
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
CSV2JSONR
transforming CSV files to JSON file by Vladimir Batagelj June 2016setwd(CUsersbatageljworkPythongraphSVGEUSN)library(rjson)colC lt- c(rep(character4)rep(numeric5)) nas lt- c(NANaN)nodes lt- readcsv2(bibNodesXYcsvencoding=rsquoUTF-8rsquocolClasses=colCnastrings=nas)M lt- factor(nodes$mode) mod lt- levels(M) M lt- asnumeric(M)S lt- factor(nodes$sex) sx lt- levels(S) S lt- asnumeric(S) S[isna(S)] lt- 0links lt- readcsv2(bibLinkscsvencoding=rsquoUTF-8rsquocolClasses=character)F lt- asnumeric(factor(links$fromlevels=nodes$nameordered=TRUE))T lt- asnumeric(factor(links$tolevels=nodes$nameordered=TRUE))R lt- factor(links$relation) rel lt-levels(R) R lt- asnumeric(R)n lt- nrow(nodes) nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(id=iname=nodes$name[i]mode=M[i]
sex=S[i]x=asnumeric(nodes$x[i])1000y=asnumeric(nodes$y[i])1000)m lt- nrow(links) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(type=arcsource=F[i]target=T[i]
rel=R[i]weight=1)meta lt- list(date=June 112016author=Vladimir Batagelj)leg lt- list(mode=modsex=sxrel=rel)inf lt- list(network=biborg=1nNodes=nnArcs=mtitle=Example for EUSNrsquo16legend=legmeta=meta)
data lt- list(netJSON=basicinfo=infnodes=nodslinks=lnks)json lt- file(bibjsonw) cat(toJSON(data)file=json) close(json)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibjson
netJSONbasicinfonetworkbiborg1nNodes16nArcs19titleExample for EUSNrsquo16legendmode[bookjournalpaperpersonpublisherseries]sex[fm]rel[authorOfcitescontainedIneditorOfpublishedBy]
metadateJune 112016authorVladimir Batageljnodes[id1nameBatagelj Vladimirmode4sex2x08091y06537id2nameDoreian Patrickmode4sex2x03585y06791id3nameFerligoj Anuu0161kamode4sex1x06195y06807id4nameGranovetter Markmode4sex2x01456y06605id5nameMoustaki Irinimode4sex1x0783y0228id6nameMrvar Andrejmode4sex2x0478y06301id7nameClustering with relational constraintmode3sex0x06841y03801
id15nameCambridge University Pressmode5sex0x05343y02382id16nameSpringermode5sex0x08846y0174]links[typearcsource1target10rel1weight1typearcsource2target10rel1weight1typearcsource3target10rel1weight1typearcsource1target7rel1weight1typearcsource3target7rel1weight1typearcsource4target8rel1weight1typearcsource4target14rel4weight1
typearcsource10target7rel2weight1typearcsource14target15rel5weight1typearcsource11target16rel5weight1
]
bibjson picture bibV Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON files anddisplaying a network with given nodesrsquo coordinates
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltinput type=rsquofilersquo accept=rsquoapplicationjsonrsquo onchange=rsquoopenFile(event)rsquogtltscriptgtfunction process(graph) set up the drawing areavar width = 500height = 500 s = graphattributesorg
var svg = d3select(body)append(svg)attr(width width)attr(height height)attr(xmlns httpwwww3org2000svg)
draw the linksvar link = svgselectAll(line)data(graphlinks)enter()append(line)style(stroke function(di) return((dtype==arc magenta blue)))attr(stroke-width 2)attr(x1 function(d) return(graphnodes[dsource-s]xwidth))attr(y1 function(d) return(graphnodes[dsource-s]yheight))attr(x2 function(d) return(graphnodes[dtarget-s]xwidth))attr(y2 function(d) return(graphnodes[dtarget-s]yheight))
draw the nodesvar node = svgselectAll(circle)data(graphnodes)enter()append(circle)attr(r 15)attr(cx function(di) return(dxwidth))attr(cy function(di) return(dyheight))attr(fill yellow)attr(stroke red)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
readingadapted from Matt West Reading Files Using The HTML5 FileReader API
var openFile = function(event) var input = eventtargetvar reader = new FileReader()readeronload = function()process(JSONparse(readerresult))
readerreadAsText(inputfiles[0])
ltscriptgtltbodygt
graphReadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON file from serveradapted from Ying Kit Yuen jQuery amp Javascript -ndash Read JSON files on server
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtlttitlegtLoad JSON file from serverlttitlegtlt-- httpeurekaykyueninfo20130925jquery-javascript-read-json-files-on-server --gtltscript src=httpajaxgoogleapiscomajaxlibsjquery1102jqueryminjsgtltscriptgtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltselect id=datagtltoption value=graphjsongtgraphjsonltoptiongtltoption value=classjsongtclassjsonltoptiongt
ltselectgtltbutton id=btngtReadltbuttongtltscriptgtfunction process(graph) set up the drawing area the body of function process is the same as in the previous exampleattr(stroke red)
$(btn)click(function()$getJSON($(data)val() function(json) process(json))
)ltscriptgtltbodygt
graphLoadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Network displayer graphXY
drawNetjs
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
graphXYgen
ltDOCTYPE htmlgtltmeta charset=utf-8gtltbodygtlt-- script src=graphAjsgtltscript --gtltscript src=graphBjsgtltscriptgtlt-- script src=classSjsgtltscript --gtltscript src=drawNetjsgtltscriptgtltscript src=d3d3jsgtltscriptgtltscriptgtvars = graphinfoorgwidth = graphstylecanvaswidthheight = graphstylecanvasheightvar lw = 1if ( typeof graphstyle == rsquoundefinedrsquo ampamp graphstyle) if ( typeof graphstylelink == rsquoundefinedrsquo ampamp graphstylelink )
if ( typeof graphstylelinkwidth == rsquoundefinedrsquo ampamp graphstylelinkwidth ) var lw = graphstylelinkwidth
if(graphnetJSON==rsquogeneralrsquo) var OK = drawNet(graphpersonsdatagraphfrienddata)
else var OK = drawNet(graphnodesgraphlinks)
ltscriptgtltbodygt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Saving SVG pictureS Murray Interactive Data Visualization for the Web p 235
In Google Chrome we draw a picture and open the Developer ToolsIn the Elements we identify the SVG subobject select it copy it intosome text editor and save with extension svg
To enhance the picture or to transform it to other picture formats we
process it using some vector graphics editor
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
To do
bull displayer templates can be based on GUI
bull for a description of multirelational networks we use the rel
attribute in the general version they can be treated asseparate sets of links
bull properties are considered as attributes in the general versionthey can be represented as special objects vector partitionpermutation and cluster
bull use temporal quantities for describing temporal networks
bull extend the list of info-attributes attributes type (simpletemporal) twoModeOrg nStrong nRelations planar
bull icons can be used for visualization of nodes Font AwesomeMaterial Icons tests
bull links can be visually represented in many different ways that canbe described in style
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
to do
bull style can be attached as an attribute also to an element(node link) thus changing the default settings
bull add the visualization of arcs with arrows Directed Graph EditorD3 Tips and Tricks
bull to be included in netD3js vzmetno risanje Force in urejanjeSpringy Matrix with permutations
bull can some attributes be renamed from tail nodeA rarrsource to head nodeB rarr target may be the simplestsolution is a replace in some text editor
bull implement saving of the obtained SVG picture to a file ExportSVG with Style d3jsSVG Export demo
bull include in netJSON elements useful in some applications suchas hooks or inout-ports background image etc
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Sources
Ideas for visualization styles can be found in GoJS - InteractiveDiagrams for JavaScript and HTML Visjs in VisualComplexity
GoJS mdashSankey Diagram Family Tree Logic Circuit DynamicPortsVega - a visualization grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References I
Vladimir Batagelj Complex Networks Visualization of RA Meyersed Encyclopedia of Complexity and Systems Science Springer 20091253-1268
Vladimir Batagelj Andrej Mrvar Pajek manual
Jernej Bodlaj Network Data File Formats in Reda Alhajj Jon Rokne(eds) Encyclopedia of Social Network Analysis and Mining SpringerNew York 2014 p 1076-1091
Richard Brath David Jonker Graph Analysis and VisualizationDiscovering Business Opportunity in Linked Data John Wiley amp SonsIndianapolis Indiana 2015
Emden Gansner Eleftherios Koutsofios Stephen North Drawinggraphs with dot January 26 2006
Scott Murray Interactive Data Visualization for the Web OrsquoReillySebastopol 2013
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References II
Wouter De Nooy Andrej Mrvar Vladimir Batagelj Exploratory SocialNetwork Analysis with Pajek Revised and Expanded Second EditionStructural Analysis in the Social Sciences Cambridge UniversityPress September 2011
Matthew Roughan Jonathan Tuke Unravelling Graph-Exchange FileFormats arXiv150302781 submitted on 10 Mar 2015
Wikipedia JSON
Leland Wilkinson The Grammar of Graphics Springer-Verlag NewYork 2005
V Batagelj JSON amp D3js
- Introduction
- Description of networks
- JSON
- JSON and D3js
- JSON and R
- Displayer
- To do
- References
-
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
netJSON and netD3js for SNA analysts
network rarr netJSON rarr SVG rarr PDF PNG EPS
bull Prepare your network data in netJSON format (in a text editorfrom Excel tables using R export from SNA programs andconvert to netJSON) Add the layout information
bull Use selected netD3js templates to visualize the network
bull Optionally save the SVG picture enhance it in some vectorgraphics editor (AI Inkscape) and export it in selected format(PDF ESP PNG )
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Networks
A network is based on two sets ndash set of nodes (vertices) thatrepresent the selected units and set of links (lines) that representties between units They determine a graph A line can be directed ndashan arc or undirected ndash an edgeAdditional data about nodes or links may be known ndash their properties(attributes) For example namelabel type value
Network = Graph + DataA network N = (VLPW) consists of
bull a graph G = (VL) where V is the set of nodes A is the set ofarcs E is the set of edges and L = E cup A is the set of linksn = |V| m = |L|
bull P vertex value functions properties p V rarr A
bull W line value functions weights w L rarr B
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Description of networks
How to describe a network N In principle the answer is simple ndash welist its components VLP and W
The simplest way is to describe a network N by providing (VP) and(LW) in a form of two tables
As an example let us describe a part of network determined by thefollowing worksGeneralized blockmodeling Clustering with relational constraintPartitioning signed social networks The Strength of Weak Ties
There are nodes of different types (modes) persons papers booksseries journals publishers and different relations among themauthor of editor of contained in cites published by
Both tables are often maintained in Excel They can be exported as
text in CSV (Comma Separated Values) format
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibNodescsv
namemodecountrysexyearvolnumfPagelPagexyBatagelj VladimirpersonSIm80916537Doreian PatrickpersonUSm35856791Ferligoj AnuskapersonSIf61956807Granovetter MarkpersonUSm14566605Moustaki IrinipersonUKf78302280Mrvar AndrejpersonSIm47806301Clustering with relational constraintpaper19824741342668413801The Strength of Weak Tiespaper19737861360138011133294Partitioning signed social networkspaper200931111140803378Generalized Blockmodelingbook200524138553304459Psychometrikajournal74180861Social Networksjournal32142365The American Journal of Sociologyjournal11131689Structural Analysis in the Social Sciencesseries31040828Cambridge University PresspublisherUK53432382SpringerpublisherUS88461740
bibNodescsv
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibLinkscsv
fromrelationtoBatagelj VladimirauthorOfGeneralized BlockmodelingDoreian PatrickauthorOfGeneralized BlockmodelingFerligoj AnuskaauthorOfGeneralized BlockmodelingBatagelj VladimirauthorOfClustering with relational constraintFerligoj AnuskaauthorOfClustering with relational constraintGranovetter MarkauthorOfThe Strength of Weak TiesGranovetter MarkeditorOfStructural Analysis in the Social SciencesDoreian PatrickauthorOfPartitioning signed social networksMrvar AndrejauthorOfPartitioning signed social networksMoustaki IrinieditorOfPsychometrikaDoreian PatrickeditorOfSocial NetworksGeneralized BlockmodelingcontainedInStructural Analysis in the Social SciencesClustering with relational constraintcontainedInPsychometrikaThe Strength of Weak TiescontainedInThe American Journal of SociologyPartitioning signed social networkscontainedInSocial NetworksPartitioning signed social networkscitesGeneralized BlockmodelingGeneralized BlockmodelingcitesClustering with relational constraintStructural Analysis in the Social SciencespublishedByCambridge University PressPsychometrikapublishedBySpringer
bibLinkscsv
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
CSV2PajekR
transforming CSV file to Pajek files by Vladimir Batagelj June 2016setwd(CUsersbatageljworkPythongraphSVGEUSN)colC lt- c(rep(character4)rep(integer7)) nas lt- c(NANaN)nodes lt- readcsv2(bibNodescsvencoding=rsquoUTF-8rsquocolClasses=colCnastrings=nas)n lt- nrow(nodes) M lt- factor(nodes$mode) S lt- factor(nodes$sex)mod lt- levels(M) sx lt- levels(S) S lt- asnumeric(S) S[isna(S)] lt- 0links lt- readcsv2(bibLinkscsvencoding=rsquoUTF-8rsquocolClasses=character)F lt- factor(links$fromlevels=nodes$nameordered=TRUE)T lt- factor(links$tolevels=nodes$nameordered=TRUE)R lt- factor(links$relation) rel lt- levels(R)net lt- file(bibnetw) cat(rsquovertices rsquonrsquonrsquofile=net)clu lt- file(bibModecluw) sex lt- file(bibSexcluw)cat(rsquorsquofile=clu) cat(rsquorsquofile=sex)for(i in 1length(mod)) cat(rsquo rsquoimod[i]file=clu)cat(rsquonvertices rsquonrsquonrsquofile=clu)for(i in 1length(sx)) cat(rsquo rsquoisx[i]file=sex)cat(rsquonvertices rsquonrsquonrsquofile=sex)for(v in 1n) cat(vrsquo rsquonodes$name[v]rsquonrsquosep=rsquorsquofile=net)cat(M[v]rsquonrsquofile=clu) cat(S[v]rsquonrsquofile=sex)
for(r in 1length(rel)) cat(rsquoarcs rsquorrsquo rsquorel[r]rsquonrsquosep=rsquorsquofile=net)cat(rsquoarcsnrsquofile=net)for(a in 1nrow(links))cat(R[a]rsquo rsquoF[a]rsquo rsquoT[a]rsquo 1 l rsquorel[R[a]]rsquonrsquosep=rsquorsquofile=net)
close(net) close(clu) close(sex)
CSV2PajekR
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibnet
vertices 16 arcs1 Batagelj Vladimir 1 1 10 1 l authorOf2 Doreian Patrick 1 2 10 1 l authorOf3 Ferligoj Anuska 1 3 10 1 l authorOf4 Granovetter Mark 1 1 7 1 l authorOf5 Moustaki Irini 1 3 7 1 l authorOf6 Mrvar Andrej 1 4 8 1 l authorOf7 Clustering with relational constraint 4 4 14 1 l editorOf8 The Strength of Weak Ties 1 2 9 1 l authorOf9 Partitioning signed social networks 1 6 9 1 l authorOf10 Generalized Blockmodeling 4 5 11 1 l editorOf11 Psychometrika 4 2 12 1 l editorOf12 Social Networks 3 10 14 1 l containedIn13 The American Journal of Sociology 3 7 11 1 l containedIn14 Structural Analysis in the Social Sciences 3 8 13 1 l containedIn15 Cambridge University Press 3 9 12 1 l containedIn16 Springer 2 9 10 1 l citesarcs 1 authorOf 2 10 7 1 l citesarcs 2 cites 5 14 15 1 l publishedByarcs 3 containedIn 5 11 16 1 l publishedByarcs 4 editorOfarcs 5 publishedBy
bibnet bibModeclu bibSexclu
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Bibliographic network ndash picture Pajek
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
XML api ndash JSON api
In near past for description of structured data the XML (ExtensibleMarkup Language) was mostly used In last five years a JSON formatstarted to replace it Google trends
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON
JSON (JavaScript Object Notation) is a text data format thatpreserves the structure of data objects It is ldquocompatiblerdquo with basicdata structures in modern programming languages
The initial version of JSON vas developed by Douglas Crockford(around 2002) He based it on the Javascript notation The principalidea is if we apply on a string (sequence of characters) containing adescription of a data object the Javascript function eval we get asits result the corresponding data object JSON is a programminglanguage independent open code standard for exchange of dataamong programs
Two JSON standards exist
bull The JSON Data Interchange Format Standard ECMA-404October 2013
bull The JavaScript Object Notation (JSON) Data InterchangeFormat Request for Comments 7159 March 2014
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON
firstName JohnlastName SmithisAlive trueage 25address streetAddress 21 2nd Streetcity New Yorkstate NYpostalCode 10021-3100
phoneNumbers [
type homenumber 212 555-1234
type officenumber 646 555-4567
]children []spouse null
Wikipedia
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON
XML is appropriate for describing the structure of textual dataJSON is becoming the first choice for describing structured dataJSON has much simpler grammar is more readable and compatiblewith basic data structures in modern programming languagesAll keys (names of fields) are in double quotes
JSON files are by default based on the encoding Unicode (UTF-8)
The MIME type for JSON files is applicationjson therecommended file extension is json
For work with JSON there exists supporting libraries for all importantprogramming languages httpwwwjsonorg
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
eval and JSONparseevalhtml
lthtmlgtltheadgtlttitlegtJSON eval and parselttitlegtltheadgtltbodygtltscriptgtvar data=rsquo[abca[true null314]bBBBBBc12e+5]rsquoalert(JSON + data)documentwrite(JSONltttgt+data+ltttgtltbrgt)var value = eval(rsquo(rsquo + data + rsquo)rsquo)consolelog(eval) consolelog(value)documentwrite(evalltttgt+JSONstringify(value)+ltttgtltbrgt)var json = JSONparse(data)consolelog(JSONparse) consolelog(json)ltscriptgtltbodygtlthtmlgt
To run the Javascript code I used the Google Chrome browser To get theconsole we selectCustomize and Control GC More tools Developer tools
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
eval and JSONparse
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Importing data as Javascript assignmentimporthtml
lthtmlgtltheadgtlttitlegtJSON importlttitlegtltscript src=personjsgtltscriptgtltheadgtltbodygtltscriptgtdocumentwrite(JSONltttgt+person+ltttgtltbrgt)documentwrite(stringltttgt+JSONstringify(person)+ltttgtltbrgt)consolelog(JSON) consolelog(person)ltscriptgtltbodygtlthtmlgt
personjs
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Well formed and valid JSON files
A JSON file is well formed iff it respects JSONrsquos grammarIs my file well formed service JSONlint - another checker
JSON editor
Similar to XMLrsquos DTD files or schema we can imposeadditional restrictions to the structure of JSON files describingspecial types of data using JSON schema ndash the JSON filesrespecting these additional restrictions are called valid
Github validation JSON Schema Lint JSON Schemavalidator
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Simple examplegraphjson
infoorg0nNodes4nodes[nameAnnx02y02Num1Size100nameBenx02y08Num4Size500nameTimx08y02Num2Size200nameZoex08y08Num3Size400
]links[source0target1Count1Weight100source1target2Count1Weight100source2target3Count1Weight100source1target3Count2Weight300
]
In graphjs the JSON description is assigned to the variable graph
graph = infoorg0nNodes4nodes[
]
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Circular layoutadapted from Brath and Jonker p 257-258
ltDOCTYPE htmlgtlthtmlgtltheadgtltmeta charset=utf-8gtltscript src=graphjsgtltscriptgtlt-- script src=classjsgtltscript --gtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltscriptgt set up the drawing areavar width = 500
height = 500var svg = d3select(body)append(svg)
attr(width width)
attr(height height)
attr(xmlns httpwwww3org2000svg) angle and radius for layout assistancevar ang = 2 MathPI graphnodeslengthvar rad = width 25
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Circular layout
create the linksvar link = svgselectAll(line)data(graphlinks)enter()append(line)style(strokeblue)attr(stroke-width2)attr(x1function(d)return(radMathcos(dsourceang)+5width))attr(y1function(d)return(radMathsin(dsourceang)+5width))attr(x2function(d)return(radMathcos(dtargetang)+5width))attr(y2function(d)return(radMathsin(dtargetang)+5width))
create the nodes and set out in a circular layoutvar node = svgselectAll(circle)data(graphnodes)enter()append(circle)attr(r10)attr(cxfunction(di)return(radMathcos(iang)+5width))attr(cyfunction(di)return(radMathsin(iang)+5width))attr(fillyellow)attr(strokered)
ltscriptgtltbodygt
graphCirclehtml classjson classjs classCirclehtml+ labels classCircleLhtml+ permutation classPjson classPjs classCirclePhtm
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
SVG
ltxml version=10 encoding=UTF-8 standalone=yesgtltsvg width=500 height=500 xmlns=httpwwww3org2000svggtltline stroke-width=2 x1=450 y1=250 x2=250 y2=450 style=stroke bluegtltlinegtltline stroke-width=2 x1=250 y1=450 x2=50 y2=250 style=stroke bluegtltlinegtltline stroke-width=2 x1=50 y1=250 x2=250 y2=50 style=stroke bluegtltlinegtltline stroke-width=2 x1=250 y1=450 x2=250 y2=50 style=stroke bluegtltlinegtltcircle r=10 cx=450 cy=250 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=250 cy=450 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=50 cy=250 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=250 cy=50 fill=yellow stroke=redgtltcirclegtltsvggt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Networks in JSON format basic netJSONclassjson
netJSON basicinfo network class org 1 nNodes 15
nArcs 30 nEdges 13 nWeak 1title borrowing study materialsmeta date October 2015 author V Batagelj
nodes [
id 1 short m02 x 01857 y 02781 size 1 id 2 short m03 x 05482 y 06169 size 1 id 3 short w07 x 02219 y 04526 size 2 id 4 short w09 x 08078 y 03223 size 2
id 14 short m89 x 04000 y 08469 size 1 id 15 short m96 x 03482 y 01778 size 1
]links [
type arc source 6 target 15 weight 1 type arc source 2 target 7 weight 1
type arc source15 target 3 weight 1 type edge source 6 target 12 weight 1
type edge source 4 target 12 weight 1 type edge source 6 target 13 weight 1
]
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON and RTransforming Pajek NET and CLU files in to JSON
nodes[nameMyrielgroup1nameNapoleongroup1 nameBrujongroup4nameMmeHucheloupgroup8]
links[source1target0value1source2target0value8 source76target48value1source76target58value1]
setwd(CUsersBatageljtestpython2012amazon)library(rjson)
net2json lt- function(netFcluFjsonF)net lt- file(netFr) clu lt- file(cluFr)b lt- unlist(strsplit(readLines(netn=1) ))n lt- asinteger(b[length(b)])N lt- readLines(netn=n) nam lt- character(n)for(i in 1n) nam[i] lt- unlist(strsplit(N[i]rsquorsquo))[2]skip lt- readLines(clun=1) C lt- asinteger(readLines(clun=n))skip lt- readLines(netn=1) L lt- readLines(netn=-1)M lt- matrix(asinteger(unlist(strsplit(sub(rsquo^s+rsquorsquorsquoL)rsquos+rsquo)))ncol=3byrow=TRUE)nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(name=nam[i]group=C[i])m lt- nrow(M) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(source=M[i1]-1target=M[i2]-1value=M[i3])data lt- list(nodes=nodslinks=lnks)jstr lt- toJSON(data)json lt- file(jsonFw) cat(jstrfile=json)close(json) close(net) close(clu)
net2json(islandsnetislandscluislandsjson)
islands island 1 island 4 force islands
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
CSV2JSONR
transforming CSV files to JSON file by Vladimir Batagelj June 2016setwd(CUsersbatageljworkPythongraphSVGEUSN)library(rjson)colC lt- c(rep(character4)rep(numeric5)) nas lt- c(NANaN)nodes lt- readcsv2(bibNodesXYcsvencoding=rsquoUTF-8rsquocolClasses=colCnastrings=nas)M lt- factor(nodes$mode) mod lt- levels(M) M lt- asnumeric(M)S lt- factor(nodes$sex) sx lt- levels(S) S lt- asnumeric(S) S[isna(S)] lt- 0links lt- readcsv2(bibLinkscsvencoding=rsquoUTF-8rsquocolClasses=character)F lt- asnumeric(factor(links$fromlevels=nodes$nameordered=TRUE))T lt- asnumeric(factor(links$tolevels=nodes$nameordered=TRUE))R lt- factor(links$relation) rel lt-levels(R) R lt- asnumeric(R)n lt- nrow(nodes) nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(id=iname=nodes$name[i]mode=M[i]
sex=S[i]x=asnumeric(nodes$x[i])1000y=asnumeric(nodes$y[i])1000)m lt- nrow(links) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(type=arcsource=F[i]target=T[i]
rel=R[i]weight=1)meta lt- list(date=June 112016author=Vladimir Batagelj)leg lt- list(mode=modsex=sxrel=rel)inf lt- list(network=biborg=1nNodes=nnArcs=mtitle=Example for EUSNrsquo16legend=legmeta=meta)
data lt- list(netJSON=basicinfo=infnodes=nodslinks=lnks)json lt- file(bibjsonw) cat(toJSON(data)file=json) close(json)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibjson
netJSONbasicinfonetworkbiborg1nNodes16nArcs19titleExample for EUSNrsquo16legendmode[bookjournalpaperpersonpublisherseries]sex[fm]rel[authorOfcitescontainedIneditorOfpublishedBy]
metadateJune 112016authorVladimir Batageljnodes[id1nameBatagelj Vladimirmode4sex2x08091y06537id2nameDoreian Patrickmode4sex2x03585y06791id3nameFerligoj Anuu0161kamode4sex1x06195y06807id4nameGranovetter Markmode4sex2x01456y06605id5nameMoustaki Irinimode4sex1x0783y0228id6nameMrvar Andrejmode4sex2x0478y06301id7nameClustering with relational constraintmode3sex0x06841y03801
id15nameCambridge University Pressmode5sex0x05343y02382id16nameSpringermode5sex0x08846y0174]links[typearcsource1target10rel1weight1typearcsource2target10rel1weight1typearcsource3target10rel1weight1typearcsource1target7rel1weight1typearcsource3target7rel1weight1typearcsource4target8rel1weight1typearcsource4target14rel4weight1
typearcsource10target7rel2weight1typearcsource14target15rel5weight1typearcsource11target16rel5weight1
]
bibjson picture bibV Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON files anddisplaying a network with given nodesrsquo coordinates
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltinput type=rsquofilersquo accept=rsquoapplicationjsonrsquo onchange=rsquoopenFile(event)rsquogtltscriptgtfunction process(graph) set up the drawing areavar width = 500height = 500 s = graphattributesorg
var svg = d3select(body)append(svg)attr(width width)attr(height height)attr(xmlns httpwwww3org2000svg)
draw the linksvar link = svgselectAll(line)data(graphlinks)enter()append(line)style(stroke function(di) return((dtype==arc magenta blue)))attr(stroke-width 2)attr(x1 function(d) return(graphnodes[dsource-s]xwidth))attr(y1 function(d) return(graphnodes[dsource-s]yheight))attr(x2 function(d) return(graphnodes[dtarget-s]xwidth))attr(y2 function(d) return(graphnodes[dtarget-s]yheight))
draw the nodesvar node = svgselectAll(circle)data(graphnodes)enter()append(circle)attr(r 15)attr(cx function(di) return(dxwidth))attr(cy function(di) return(dyheight))attr(fill yellow)attr(stroke red)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
readingadapted from Matt West Reading Files Using The HTML5 FileReader API
var openFile = function(event) var input = eventtargetvar reader = new FileReader()readeronload = function()process(JSONparse(readerresult))
readerreadAsText(inputfiles[0])
ltscriptgtltbodygt
graphReadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON file from serveradapted from Ying Kit Yuen jQuery amp Javascript -ndash Read JSON files on server
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtlttitlegtLoad JSON file from serverlttitlegtlt-- httpeurekaykyueninfo20130925jquery-javascript-read-json-files-on-server --gtltscript src=httpajaxgoogleapiscomajaxlibsjquery1102jqueryminjsgtltscriptgtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltselect id=datagtltoption value=graphjsongtgraphjsonltoptiongtltoption value=classjsongtclassjsonltoptiongt
ltselectgtltbutton id=btngtReadltbuttongtltscriptgtfunction process(graph) set up the drawing area the body of function process is the same as in the previous exampleattr(stroke red)
$(btn)click(function()$getJSON($(data)val() function(json) process(json))
)ltscriptgtltbodygt
graphLoadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Network displayer graphXY
drawNetjs
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
graphXYgen
ltDOCTYPE htmlgtltmeta charset=utf-8gtltbodygtlt-- script src=graphAjsgtltscript --gtltscript src=graphBjsgtltscriptgtlt-- script src=classSjsgtltscript --gtltscript src=drawNetjsgtltscriptgtltscript src=d3d3jsgtltscriptgtltscriptgtvars = graphinfoorgwidth = graphstylecanvaswidthheight = graphstylecanvasheightvar lw = 1if ( typeof graphstyle == rsquoundefinedrsquo ampamp graphstyle) if ( typeof graphstylelink == rsquoundefinedrsquo ampamp graphstylelink )
if ( typeof graphstylelinkwidth == rsquoundefinedrsquo ampamp graphstylelinkwidth ) var lw = graphstylelinkwidth
if(graphnetJSON==rsquogeneralrsquo) var OK = drawNet(graphpersonsdatagraphfrienddata)
else var OK = drawNet(graphnodesgraphlinks)
ltscriptgtltbodygt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Saving SVG pictureS Murray Interactive Data Visualization for the Web p 235
In Google Chrome we draw a picture and open the Developer ToolsIn the Elements we identify the SVG subobject select it copy it intosome text editor and save with extension svg
To enhance the picture or to transform it to other picture formats we
process it using some vector graphics editor
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
To do
bull displayer templates can be based on GUI
bull for a description of multirelational networks we use the rel
attribute in the general version they can be treated asseparate sets of links
bull properties are considered as attributes in the general versionthey can be represented as special objects vector partitionpermutation and cluster
bull use temporal quantities for describing temporal networks
bull extend the list of info-attributes attributes type (simpletemporal) twoModeOrg nStrong nRelations planar
bull icons can be used for visualization of nodes Font AwesomeMaterial Icons tests
bull links can be visually represented in many different ways that canbe described in style
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
to do
bull style can be attached as an attribute also to an element(node link) thus changing the default settings
bull add the visualization of arcs with arrows Directed Graph EditorD3 Tips and Tricks
bull to be included in netD3js vzmetno risanje Force in urejanjeSpringy Matrix with permutations
bull can some attributes be renamed from tail nodeA rarrsource to head nodeB rarr target may be the simplestsolution is a replace in some text editor
bull implement saving of the obtained SVG picture to a file ExportSVG with Style d3jsSVG Export demo
bull include in netJSON elements useful in some applications suchas hooks or inout-ports background image etc
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Sources
Ideas for visualization styles can be found in GoJS - InteractiveDiagrams for JavaScript and HTML Visjs in VisualComplexity
GoJS mdashSankey Diagram Family Tree Logic Circuit DynamicPortsVega - a visualization grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References I
Vladimir Batagelj Complex Networks Visualization of RA Meyersed Encyclopedia of Complexity and Systems Science Springer 20091253-1268
Vladimir Batagelj Andrej Mrvar Pajek manual
Jernej Bodlaj Network Data File Formats in Reda Alhajj Jon Rokne(eds) Encyclopedia of Social Network Analysis and Mining SpringerNew York 2014 p 1076-1091
Richard Brath David Jonker Graph Analysis and VisualizationDiscovering Business Opportunity in Linked Data John Wiley amp SonsIndianapolis Indiana 2015
Emden Gansner Eleftherios Koutsofios Stephen North Drawinggraphs with dot January 26 2006
Scott Murray Interactive Data Visualization for the Web OrsquoReillySebastopol 2013
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References II
Wouter De Nooy Andrej Mrvar Vladimir Batagelj Exploratory SocialNetwork Analysis with Pajek Revised and Expanded Second EditionStructural Analysis in the Social Sciences Cambridge UniversityPress September 2011
Matthew Roughan Jonathan Tuke Unravelling Graph-Exchange FileFormats arXiv150302781 submitted on 10 Mar 2015
Wikipedia JSON
Leland Wilkinson The Grammar of Graphics Springer-Verlag NewYork 2005
V Batagelj JSON amp D3js
- Introduction
- Description of networks
- JSON
- JSON and D3js
- JSON and R
- Displayer
- To do
- References
-
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Networks
A network is based on two sets ndash set of nodes (vertices) thatrepresent the selected units and set of links (lines) that representties between units They determine a graph A line can be directed ndashan arc or undirected ndash an edgeAdditional data about nodes or links may be known ndash their properties(attributes) For example namelabel type value
Network = Graph + DataA network N = (VLPW) consists of
bull a graph G = (VL) where V is the set of nodes A is the set ofarcs E is the set of edges and L = E cup A is the set of linksn = |V| m = |L|
bull P vertex value functions properties p V rarr A
bull W line value functions weights w L rarr B
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Description of networks
How to describe a network N In principle the answer is simple ndash welist its components VLP and W
The simplest way is to describe a network N by providing (VP) and(LW) in a form of two tables
As an example let us describe a part of network determined by thefollowing worksGeneralized blockmodeling Clustering with relational constraintPartitioning signed social networks The Strength of Weak Ties
There are nodes of different types (modes) persons papers booksseries journals publishers and different relations among themauthor of editor of contained in cites published by
Both tables are often maintained in Excel They can be exported as
text in CSV (Comma Separated Values) format
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibNodescsv
namemodecountrysexyearvolnumfPagelPagexyBatagelj VladimirpersonSIm80916537Doreian PatrickpersonUSm35856791Ferligoj AnuskapersonSIf61956807Granovetter MarkpersonUSm14566605Moustaki IrinipersonUKf78302280Mrvar AndrejpersonSIm47806301Clustering with relational constraintpaper19824741342668413801The Strength of Weak Tiespaper19737861360138011133294Partitioning signed social networkspaper200931111140803378Generalized Blockmodelingbook200524138553304459Psychometrikajournal74180861Social Networksjournal32142365The American Journal of Sociologyjournal11131689Structural Analysis in the Social Sciencesseries31040828Cambridge University PresspublisherUK53432382SpringerpublisherUS88461740
bibNodescsv
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibLinkscsv
fromrelationtoBatagelj VladimirauthorOfGeneralized BlockmodelingDoreian PatrickauthorOfGeneralized BlockmodelingFerligoj AnuskaauthorOfGeneralized BlockmodelingBatagelj VladimirauthorOfClustering with relational constraintFerligoj AnuskaauthorOfClustering with relational constraintGranovetter MarkauthorOfThe Strength of Weak TiesGranovetter MarkeditorOfStructural Analysis in the Social SciencesDoreian PatrickauthorOfPartitioning signed social networksMrvar AndrejauthorOfPartitioning signed social networksMoustaki IrinieditorOfPsychometrikaDoreian PatrickeditorOfSocial NetworksGeneralized BlockmodelingcontainedInStructural Analysis in the Social SciencesClustering with relational constraintcontainedInPsychometrikaThe Strength of Weak TiescontainedInThe American Journal of SociologyPartitioning signed social networkscontainedInSocial NetworksPartitioning signed social networkscitesGeneralized BlockmodelingGeneralized BlockmodelingcitesClustering with relational constraintStructural Analysis in the Social SciencespublishedByCambridge University PressPsychometrikapublishedBySpringer
bibLinkscsv
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
CSV2PajekR
transforming CSV file to Pajek files by Vladimir Batagelj June 2016setwd(CUsersbatageljworkPythongraphSVGEUSN)colC lt- c(rep(character4)rep(integer7)) nas lt- c(NANaN)nodes lt- readcsv2(bibNodescsvencoding=rsquoUTF-8rsquocolClasses=colCnastrings=nas)n lt- nrow(nodes) M lt- factor(nodes$mode) S lt- factor(nodes$sex)mod lt- levels(M) sx lt- levels(S) S lt- asnumeric(S) S[isna(S)] lt- 0links lt- readcsv2(bibLinkscsvencoding=rsquoUTF-8rsquocolClasses=character)F lt- factor(links$fromlevels=nodes$nameordered=TRUE)T lt- factor(links$tolevels=nodes$nameordered=TRUE)R lt- factor(links$relation) rel lt- levels(R)net lt- file(bibnetw) cat(rsquovertices rsquonrsquonrsquofile=net)clu lt- file(bibModecluw) sex lt- file(bibSexcluw)cat(rsquorsquofile=clu) cat(rsquorsquofile=sex)for(i in 1length(mod)) cat(rsquo rsquoimod[i]file=clu)cat(rsquonvertices rsquonrsquonrsquofile=clu)for(i in 1length(sx)) cat(rsquo rsquoisx[i]file=sex)cat(rsquonvertices rsquonrsquonrsquofile=sex)for(v in 1n) cat(vrsquo rsquonodes$name[v]rsquonrsquosep=rsquorsquofile=net)cat(M[v]rsquonrsquofile=clu) cat(S[v]rsquonrsquofile=sex)
for(r in 1length(rel)) cat(rsquoarcs rsquorrsquo rsquorel[r]rsquonrsquosep=rsquorsquofile=net)cat(rsquoarcsnrsquofile=net)for(a in 1nrow(links))cat(R[a]rsquo rsquoF[a]rsquo rsquoT[a]rsquo 1 l rsquorel[R[a]]rsquonrsquosep=rsquorsquofile=net)
close(net) close(clu) close(sex)
CSV2PajekR
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibnet
vertices 16 arcs1 Batagelj Vladimir 1 1 10 1 l authorOf2 Doreian Patrick 1 2 10 1 l authorOf3 Ferligoj Anuska 1 3 10 1 l authorOf4 Granovetter Mark 1 1 7 1 l authorOf5 Moustaki Irini 1 3 7 1 l authorOf6 Mrvar Andrej 1 4 8 1 l authorOf7 Clustering with relational constraint 4 4 14 1 l editorOf8 The Strength of Weak Ties 1 2 9 1 l authorOf9 Partitioning signed social networks 1 6 9 1 l authorOf10 Generalized Blockmodeling 4 5 11 1 l editorOf11 Psychometrika 4 2 12 1 l editorOf12 Social Networks 3 10 14 1 l containedIn13 The American Journal of Sociology 3 7 11 1 l containedIn14 Structural Analysis in the Social Sciences 3 8 13 1 l containedIn15 Cambridge University Press 3 9 12 1 l containedIn16 Springer 2 9 10 1 l citesarcs 1 authorOf 2 10 7 1 l citesarcs 2 cites 5 14 15 1 l publishedByarcs 3 containedIn 5 11 16 1 l publishedByarcs 4 editorOfarcs 5 publishedBy
bibnet bibModeclu bibSexclu
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Bibliographic network ndash picture Pajek
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
XML api ndash JSON api
In near past for description of structured data the XML (ExtensibleMarkup Language) was mostly used In last five years a JSON formatstarted to replace it Google trends
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON
JSON (JavaScript Object Notation) is a text data format thatpreserves the structure of data objects It is ldquocompatiblerdquo with basicdata structures in modern programming languages
The initial version of JSON vas developed by Douglas Crockford(around 2002) He based it on the Javascript notation The principalidea is if we apply on a string (sequence of characters) containing adescription of a data object the Javascript function eval we get asits result the corresponding data object JSON is a programminglanguage independent open code standard for exchange of dataamong programs
Two JSON standards exist
bull The JSON Data Interchange Format Standard ECMA-404October 2013
bull The JavaScript Object Notation (JSON) Data InterchangeFormat Request for Comments 7159 March 2014
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON
firstName JohnlastName SmithisAlive trueage 25address streetAddress 21 2nd Streetcity New Yorkstate NYpostalCode 10021-3100
phoneNumbers [
type homenumber 212 555-1234
type officenumber 646 555-4567
]children []spouse null
Wikipedia
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON
XML is appropriate for describing the structure of textual dataJSON is becoming the first choice for describing structured dataJSON has much simpler grammar is more readable and compatiblewith basic data structures in modern programming languagesAll keys (names of fields) are in double quotes
JSON files are by default based on the encoding Unicode (UTF-8)
The MIME type for JSON files is applicationjson therecommended file extension is json
For work with JSON there exists supporting libraries for all importantprogramming languages httpwwwjsonorg
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
eval and JSONparseevalhtml
lthtmlgtltheadgtlttitlegtJSON eval and parselttitlegtltheadgtltbodygtltscriptgtvar data=rsquo[abca[true null314]bBBBBBc12e+5]rsquoalert(JSON + data)documentwrite(JSONltttgt+data+ltttgtltbrgt)var value = eval(rsquo(rsquo + data + rsquo)rsquo)consolelog(eval) consolelog(value)documentwrite(evalltttgt+JSONstringify(value)+ltttgtltbrgt)var json = JSONparse(data)consolelog(JSONparse) consolelog(json)ltscriptgtltbodygtlthtmlgt
To run the Javascript code I used the Google Chrome browser To get theconsole we selectCustomize and Control GC More tools Developer tools
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
eval and JSONparse
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Importing data as Javascript assignmentimporthtml
lthtmlgtltheadgtlttitlegtJSON importlttitlegtltscript src=personjsgtltscriptgtltheadgtltbodygtltscriptgtdocumentwrite(JSONltttgt+person+ltttgtltbrgt)documentwrite(stringltttgt+JSONstringify(person)+ltttgtltbrgt)consolelog(JSON) consolelog(person)ltscriptgtltbodygtlthtmlgt
personjs
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Well formed and valid JSON files
A JSON file is well formed iff it respects JSONrsquos grammarIs my file well formed service JSONlint - another checker
JSON editor
Similar to XMLrsquos DTD files or schema we can imposeadditional restrictions to the structure of JSON files describingspecial types of data using JSON schema ndash the JSON filesrespecting these additional restrictions are called valid
Github validation JSON Schema Lint JSON Schemavalidator
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Simple examplegraphjson
infoorg0nNodes4nodes[nameAnnx02y02Num1Size100nameBenx02y08Num4Size500nameTimx08y02Num2Size200nameZoex08y08Num3Size400
]links[source0target1Count1Weight100source1target2Count1Weight100source2target3Count1Weight100source1target3Count2Weight300
]
In graphjs the JSON description is assigned to the variable graph
graph = infoorg0nNodes4nodes[
]
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Circular layoutadapted from Brath and Jonker p 257-258
ltDOCTYPE htmlgtlthtmlgtltheadgtltmeta charset=utf-8gtltscript src=graphjsgtltscriptgtlt-- script src=classjsgtltscript --gtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltscriptgt set up the drawing areavar width = 500
height = 500var svg = d3select(body)append(svg)
attr(width width)
attr(height height)
attr(xmlns httpwwww3org2000svg) angle and radius for layout assistancevar ang = 2 MathPI graphnodeslengthvar rad = width 25
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Circular layout
create the linksvar link = svgselectAll(line)data(graphlinks)enter()append(line)style(strokeblue)attr(stroke-width2)attr(x1function(d)return(radMathcos(dsourceang)+5width))attr(y1function(d)return(radMathsin(dsourceang)+5width))attr(x2function(d)return(radMathcos(dtargetang)+5width))attr(y2function(d)return(radMathsin(dtargetang)+5width))
create the nodes and set out in a circular layoutvar node = svgselectAll(circle)data(graphnodes)enter()append(circle)attr(r10)attr(cxfunction(di)return(radMathcos(iang)+5width))attr(cyfunction(di)return(radMathsin(iang)+5width))attr(fillyellow)attr(strokered)
ltscriptgtltbodygt
graphCirclehtml classjson classjs classCirclehtml+ labels classCircleLhtml+ permutation classPjson classPjs classCirclePhtm
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
SVG
ltxml version=10 encoding=UTF-8 standalone=yesgtltsvg width=500 height=500 xmlns=httpwwww3org2000svggtltline stroke-width=2 x1=450 y1=250 x2=250 y2=450 style=stroke bluegtltlinegtltline stroke-width=2 x1=250 y1=450 x2=50 y2=250 style=stroke bluegtltlinegtltline stroke-width=2 x1=50 y1=250 x2=250 y2=50 style=stroke bluegtltlinegtltline stroke-width=2 x1=250 y1=450 x2=250 y2=50 style=stroke bluegtltlinegtltcircle r=10 cx=450 cy=250 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=250 cy=450 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=50 cy=250 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=250 cy=50 fill=yellow stroke=redgtltcirclegtltsvggt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Networks in JSON format basic netJSONclassjson
netJSON basicinfo network class org 1 nNodes 15
nArcs 30 nEdges 13 nWeak 1title borrowing study materialsmeta date October 2015 author V Batagelj
nodes [
id 1 short m02 x 01857 y 02781 size 1 id 2 short m03 x 05482 y 06169 size 1 id 3 short w07 x 02219 y 04526 size 2 id 4 short w09 x 08078 y 03223 size 2
id 14 short m89 x 04000 y 08469 size 1 id 15 short m96 x 03482 y 01778 size 1
]links [
type arc source 6 target 15 weight 1 type arc source 2 target 7 weight 1
type arc source15 target 3 weight 1 type edge source 6 target 12 weight 1
type edge source 4 target 12 weight 1 type edge source 6 target 13 weight 1
]
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON and RTransforming Pajek NET and CLU files in to JSON
nodes[nameMyrielgroup1nameNapoleongroup1 nameBrujongroup4nameMmeHucheloupgroup8]
links[source1target0value1source2target0value8 source76target48value1source76target58value1]
setwd(CUsersBatageljtestpython2012amazon)library(rjson)
net2json lt- function(netFcluFjsonF)net lt- file(netFr) clu lt- file(cluFr)b lt- unlist(strsplit(readLines(netn=1) ))n lt- asinteger(b[length(b)])N lt- readLines(netn=n) nam lt- character(n)for(i in 1n) nam[i] lt- unlist(strsplit(N[i]rsquorsquo))[2]skip lt- readLines(clun=1) C lt- asinteger(readLines(clun=n))skip lt- readLines(netn=1) L lt- readLines(netn=-1)M lt- matrix(asinteger(unlist(strsplit(sub(rsquo^s+rsquorsquorsquoL)rsquos+rsquo)))ncol=3byrow=TRUE)nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(name=nam[i]group=C[i])m lt- nrow(M) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(source=M[i1]-1target=M[i2]-1value=M[i3])data lt- list(nodes=nodslinks=lnks)jstr lt- toJSON(data)json lt- file(jsonFw) cat(jstrfile=json)close(json) close(net) close(clu)
net2json(islandsnetislandscluislandsjson)
islands island 1 island 4 force islands
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
CSV2JSONR
transforming CSV files to JSON file by Vladimir Batagelj June 2016setwd(CUsersbatageljworkPythongraphSVGEUSN)library(rjson)colC lt- c(rep(character4)rep(numeric5)) nas lt- c(NANaN)nodes lt- readcsv2(bibNodesXYcsvencoding=rsquoUTF-8rsquocolClasses=colCnastrings=nas)M lt- factor(nodes$mode) mod lt- levels(M) M lt- asnumeric(M)S lt- factor(nodes$sex) sx lt- levels(S) S lt- asnumeric(S) S[isna(S)] lt- 0links lt- readcsv2(bibLinkscsvencoding=rsquoUTF-8rsquocolClasses=character)F lt- asnumeric(factor(links$fromlevels=nodes$nameordered=TRUE))T lt- asnumeric(factor(links$tolevels=nodes$nameordered=TRUE))R lt- factor(links$relation) rel lt-levels(R) R lt- asnumeric(R)n lt- nrow(nodes) nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(id=iname=nodes$name[i]mode=M[i]
sex=S[i]x=asnumeric(nodes$x[i])1000y=asnumeric(nodes$y[i])1000)m lt- nrow(links) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(type=arcsource=F[i]target=T[i]
rel=R[i]weight=1)meta lt- list(date=June 112016author=Vladimir Batagelj)leg lt- list(mode=modsex=sxrel=rel)inf lt- list(network=biborg=1nNodes=nnArcs=mtitle=Example for EUSNrsquo16legend=legmeta=meta)
data lt- list(netJSON=basicinfo=infnodes=nodslinks=lnks)json lt- file(bibjsonw) cat(toJSON(data)file=json) close(json)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibjson
netJSONbasicinfonetworkbiborg1nNodes16nArcs19titleExample for EUSNrsquo16legendmode[bookjournalpaperpersonpublisherseries]sex[fm]rel[authorOfcitescontainedIneditorOfpublishedBy]
metadateJune 112016authorVladimir Batageljnodes[id1nameBatagelj Vladimirmode4sex2x08091y06537id2nameDoreian Patrickmode4sex2x03585y06791id3nameFerligoj Anuu0161kamode4sex1x06195y06807id4nameGranovetter Markmode4sex2x01456y06605id5nameMoustaki Irinimode4sex1x0783y0228id6nameMrvar Andrejmode4sex2x0478y06301id7nameClustering with relational constraintmode3sex0x06841y03801
id15nameCambridge University Pressmode5sex0x05343y02382id16nameSpringermode5sex0x08846y0174]links[typearcsource1target10rel1weight1typearcsource2target10rel1weight1typearcsource3target10rel1weight1typearcsource1target7rel1weight1typearcsource3target7rel1weight1typearcsource4target8rel1weight1typearcsource4target14rel4weight1
typearcsource10target7rel2weight1typearcsource14target15rel5weight1typearcsource11target16rel5weight1
]
bibjson picture bibV Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON files anddisplaying a network with given nodesrsquo coordinates
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltinput type=rsquofilersquo accept=rsquoapplicationjsonrsquo onchange=rsquoopenFile(event)rsquogtltscriptgtfunction process(graph) set up the drawing areavar width = 500height = 500 s = graphattributesorg
var svg = d3select(body)append(svg)attr(width width)attr(height height)attr(xmlns httpwwww3org2000svg)
draw the linksvar link = svgselectAll(line)data(graphlinks)enter()append(line)style(stroke function(di) return((dtype==arc magenta blue)))attr(stroke-width 2)attr(x1 function(d) return(graphnodes[dsource-s]xwidth))attr(y1 function(d) return(graphnodes[dsource-s]yheight))attr(x2 function(d) return(graphnodes[dtarget-s]xwidth))attr(y2 function(d) return(graphnodes[dtarget-s]yheight))
draw the nodesvar node = svgselectAll(circle)data(graphnodes)enter()append(circle)attr(r 15)attr(cx function(di) return(dxwidth))attr(cy function(di) return(dyheight))attr(fill yellow)attr(stroke red)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
readingadapted from Matt West Reading Files Using The HTML5 FileReader API
var openFile = function(event) var input = eventtargetvar reader = new FileReader()readeronload = function()process(JSONparse(readerresult))
readerreadAsText(inputfiles[0])
ltscriptgtltbodygt
graphReadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON file from serveradapted from Ying Kit Yuen jQuery amp Javascript -ndash Read JSON files on server
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtlttitlegtLoad JSON file from serverlttitlegtlt-- httpeurekaykyueninfo20130925jquery-javascript-read-json-files-on-server --gtltscript src=httpajaxgoogleapiscomajaxlibsjquery1102jqueryminjsgtltscriptgtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltselect id=datagtltoption value=graphjsongtgraphjsonltoptiongtltoption value=classjsongtclassjsonltoptiongt
ltselectgtltbutton id=btngtReadltbuttongtltscriptgtfunction process(graph) set up the drawing area the body of function process is the same as in the previous exampleattr(stroke red)
$(btn)click(function()$getJSON($(data)val() function(json) process(json))
)ltscriptgtltbodygt
graphLoadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Network displayer graphXY
drawNetjs
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
graphXYgen
ltDOCTYPE htmlgtltmeta charset=utf-8gtltbodygtlt-- script src=graphAjsgtltscript --gtltscript src=graphBjsgtltscriptgtlt-- script src=classSjsgtltscript --gtltscript src=drawNetjsgtltscriptgtltscript src=d3d3jsgtltscriptgtltscriptgtvars = graphinfoorgwidth = graphstylecanvaswidthheight = graphstylecanvasheightvar lw = 1if ( typeof graphstyle == rsquoundefinedrsquo ampamp graphstyle) if ( typeof graphstylelink == rsquoundefinedrsquo ampamp graphstylelink )
if ( typeof graphstylelinkwidth == rsquoundefinedrsquo ampamp graphstylelinkwidth ) var lw = graphstylelinkwidth
if(graphnetJSON==rsquogeneralrsquo) var OK = drawNet(graphpersonsdatagraphfrienddata)
else var OK = drawNet(graphnodesgraphlinks)
ltscriptgtltbodygt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Saving SVG pictureS Murray Interactive Data Visualization for the Web p 235
In Google Chrome we draw a picture and open the Developer ToolsIn the Elements we identify the SVG subobject select it copy it intosome text editor and save with extension svg
To enhance the picture or to transform it to other picture formats we
process it using some vector graphics editor
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
To do
bull displayer templates can be based on GUI
bull for a description of multirelational networks we use the rel
attribute in the general version they can be treated asseparate sets of links
bull properties are considered as attributes in the general versionthey can be represented as special objects vector partitionpermutation and cluster
bull use temporal quantities for describing temporal networks
bull extend the list of info-attributes attributes type (simpletemporal) twoModeOrg nStrong nRelations planar
bull icons can be used for visualization of nodes Font AwesomeMaterial Icons tests
bull links can be visually represented in many different ways that canbe described in style
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
to do
bull style can be attached as an attribute also to an element(node link) thus changing the default settings
bull add the visualization of arcs with arrows Directed Graph EditorD3 Tips and Tricks
bull to be included in netD3js vzmetno risanje Force in urejanjeSpringy Matrix with permutations
bull can some attributes be renamed from tail nodeA rarrsource to head nodeB rarr target may be the simplestsolution is a replace in some text editor
bull implement saving of the obtained SVG picture to a file ExportSVG with Style d3jsSVG Export demo
bull include in netJSON elements useful in some applications suchas hooks or inout-ports background image etc
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Sources
Ideas for visualization styles can be found in GoJS - InteractiveDiagrams for JavaScript and HTML Visjs in VisualComplexity
GoJS mdashSankey Diagram Family Tree Logic Circuit DynamicPortsVega - a visualization grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References I
Vladimir Batagelj Complex Networks Visualization of RA Meyersed Encyclopedia of Complexity and Systems Science Springer 20091253-1268
Vladimir Batagelj Andrej Mrvar Pajek manual
Jernej Bodlaj Network Data File Formats in Reda Alhajj Jon Rokne(eds) Encyclopedia of Social Network Analysis and Mining SpringerNew York 2014 p 1076-1091
Richard Brath David Jonker Graph Analysis and VisualizationDiscovering Business Opportunity in Linked Data John Wiley amp SonsIndianapolis Indiana 2015
Emden Gansner Eleftherios Koutsofios Stephen North Drawinggraphs with dot January 26 2006
Scott Murray Interactive Data Visualization for the Web OrsquoReillySebastopol 2013
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References II
Wouter De Nooy Andrej Mrvar Vladimir Batagelj Exploratory SocialNetwork Analysis with Pajek Revised and Expanded Second EditionStructural Analysis in the Social Sciences Cambridge UniversityPress September 2011
Matthew Roughan Jonathan Tuke Unravelling Graph-Exchange FileFormats arXiv150302781 submitted on 10 Mar 2015
Wikipedia JSON
Leland Wilkinson The Grammar of Graphics Springer-Verlag NewYork 2005
V Batagelj JSON amp D3js
- Introduction
- Description of networks
- JSON
- JSON and D3js
- JSON and R
- Displayer
- To do
- References
-
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Description of networks
How to describe a network N In principle the answer is simple ndash welist its components VLP and W
The simplest way is to describe a network N by providing (VP) and(LW) in a form of two tables
As an example let us describe a part of network determined by thefollowing worksGeneralized blockmodeling Clustering with relational constraintPartitioning signed social networks The Strength of Weak Ties
There are nodes of different types (modes) persons papers booksseries journals publishers and different relations among themauthor of editor of contained in cites published by
Both tables are often maintained in Excel They can be exported as
text in CSV (Comma Separated Values) format
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibNodescsv
namemodecountrysexyearvolnumfPagelPagexyBatagelj VladimirpersonSIm80916537Doreian PatrickpersonUSm35856791Ferligoj AnuskapersonSIf61956807Granovetter MarkpersonUSm14566605Moustaki IrinipersonUKf78302280Mrvar AndrejpersonSIm47806301Clustering with relational constraintpaper19824741342668413801The Strength of Weak Tiespaper19737861360138011133294Partitioning signed social networkspaper200931111140803378Generalized Blockmodelingbook200524138553304459Psychometrikajournal74180861Social Networksjournal32142365The American Journal of Sociologyjournal11131689Structural Analysis in the Social Sciencesseries31040828Cambridge University PresspublisherUK53432382SpringerpublisherUS88461740
bibNodescsv
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibLinkscsv
fromrelationtoBatagelj VladimirauthorOfGeneralized BlockmodelingDoreian PatrickauthorOfGeneralized BlockmodelingFerligoj AnuskaauthorOfGeneralized BlockmodelingBatagelj VladimirauthorOfClustering with relational constraintFerligoj AnuskaauthorOfClustering with relational constraintGranovetter MarkauthorOfThe Strength of Weak TiesGranovetter MarkeditorOfStructural Analysis in the Social SciencesDoreian PatrickauthorOfPartitioning signed social networksMrvar AndrejauthorOfPartitioning signed social networksMoustaki IrinieditorOfPsychometrikaDoreian PatrickeditorOfSocial NetworksGeneralized BlockmodelingcontainedInStructural Analysis in the Social SciencesClustering with relational constraintcontainedInPsychometrikaThe Strength of Weak TiescontainedInThe American Journal of SociologyPartitioning signed social networkscontainedInSocial NetworksPartitioning signed social networkscitesGeneralized BlockmodelingGeneralized BlockmodelingcitesClustering with relational constraintStructural Analysis in the Social SciencespublishedByCambridge University PressPsychometrikapublishedBySpringer
bibLinkscsv
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
CSV2PajekR
transforming CSV file to Pajek files by Vladimir Batagelj June 2016setwd(CUsersbatageljworkPythongraphSVGEUSN)colC lt- c(rep(character4)rep(integer7)) nas lt- c(NANaN)nodes lt- readcsv2(bibNodescsvencoding=rsquoUTF-8rsquocolClasses=colCnastrings=nas)n lt- nrow(nodes) M lt- factor(nodes$mode) S lt- factor(nodes$sex)mod lt- levels(M) sx lt- levels(S) S lt- asnumeric(S) S[isna(S)] lt- 0links lt- readcsv2(bibLinkscsvencoding=rsquoUTF-8rsquocolClasses=character)F lt- factor(links$fromlevels=nodes$nameordered=TRUE)T lt- factor(links$tolevels=nodes$nameordered=TRUE)R lt- factor(links$relation) rel lt- levels(R)net lt- file(bibnetw) cat(rsquovertices rsquonrsquonrsquofile=net)clu lt- file(bibModecluw) sex lt- file(bibSexcluw)cat(rsquorsquofile=clu) cat(rsquorsquofile=sex)for(i in 1length(mod)) cat(rsquo rsquoimod[i]file=clu)cat(rsquonvertices rsquonrsquonrsquofile=clu)for(i in 1length(sx)) cat(rsquo rsquoisx[i]file=sex)cat(rsquonvertices rsquonrsquonrsquofile=sex)for(v in 1n) cat(vrsquo rsquonodes$name[v]rsquonrsquosep=rsquorsquofile=net)cat(M[v]rsquonrsquofile=clu) cat(S[v]rsquonrsquofile=sex)
for(r in 1length(rel)) cat(rsquoarcs rsquorrsquo rsquorel[r]rsquonrsquosep=rsquorsquofile=net)cat(rsquoarcsnrsquofile=net)for(a in 1nrow(links))cat(R[a]rsquo rsquoF[a]rsquo rsquoT[a]rsquo 1 l rsquorel[R[a]]rsquonrsquosep=rsquorsquofile=net)
close(net) close(clu) close(sex)
CSV2PajekR
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibnet
vertices 16 arcs1 Batagelj Vladimir 1 1 10 1 l authorOf2 Doreian Patrick 1 2 10 1 l authorOf3 Ferligoj Anuska 1 3 10 1 l authorOf4 Granovetter Mark 1 1 7 1 l authorOf5 Moustaki Irini 1 3 7 1 l authorOf6 Mrvar Andrej 1 4 8 1 l authorOf7 Clustering with relational constraint 4 4 14 1 l editorOf8 The Strength of Weak Ties 1 2 9 1 l authorOf9 Partitioning signed social networks 1 6 9 1 l authorOf10 Generalized Blockmodeling 4 5 11 1 l editorOf11 Psychometrika 4 2 12 1 l editorOf12 Social Networks 3 10 14 1 l containedIn13 The American Journal of Sociology 3 7 11 1 l containedIn14 Structural Analysis in the Social Sciences 3 8 13 1 l containedIn15 Cambridge University Press 3 9 12 1 l containedIn16 Springer 2 9 10 1 l citesarcs 1 authorOf 2 10 7 1 l citesarcs 2 cites 5 14 15 1 l publishedByarcs 3 containedIn 5 11 16 1 l publishedByarcs 4 editorOfarcs 5 publishedBy
bibnet bibModeclu bibSexclu
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Bibliographic network ndash picture Pajek
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
XML api ndash JSON api
In near past for description of structured data the XML (ExtensibleMarkup Language) was mostly used In last five years a JSON formatstarted to replace it Google trends
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON
JSON (JavaScript Object Notation) is a text data format thatpreserves the structure of data objects It is ldquocompatiblerdquo with basicdata structures in modern programming languages
The initial version of JSON vas developed by Douglas Crockford(around 2002) He based it on the Javascript notation The principalidea is if we apply on a string (sequence of characters) containing adescription of a data object the Javascript function eval we get asits result the corresponding data object JSON is a programminglanguage independent open code standard for exchange of dataamong programs
Two JSON standards exist
bull The JSON Data Interchange Format Standard ECMA-404October 2013
bull The JavaScript Object Notation (JSON) Data InterchangeFormat Request for Comments 7159 March 2014
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON
firstName JohnlastName SmithisAlive trueage 25address streetAddress 21 2nd Streetcity New Yorkstate NYpostalCode 10021-3100
phoneNumbers [
type homenumber 212 555-1234
type officenumber 646 555-4567
]children []spouse null
Wikipedia
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON
XML is appropriate for describing the structure of textual dataJSON is becoming the first choice for describing structured dataJSON has much simpler grammar is more readable and compatiblewith basic data structures in modern programming languagesAll keys (names of fields) are in double quotes
JSON files are by default based on the encoding Unicode (UTF-8)
The MIME type for JSON files is applicationjson therecommended file extension is json
For work with JSON there exists supporting libraries for all importantprogramming languages httpwwwjsonorg
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
eval and JSONparseevalhtml
lthtmlgtltheadgtlttitlegtJSON eval and parselttitlegtltheadgtltbodygtltscriptgtvar data=rsquo[abca[true null314]bBBBBBc12e+5]rsquoalert(JSON + data)documentwrite(JSONltttgt+data+ltttgtltbrgt)var value = eval(rsquo(rsquo + data + rsquo)rsquo)consolelog(eval) consolelog(value)documentwrite(evalltttgt+JSONstringify(value)+ltttgtltbrgt)var json = JSONparse(data)consolelog(JSONparse) consolelog(json)ltscriptgtltbodygtlthtmlgt
To run the Javascript code I used the Google Chrome browser To get theconsole we selectCustomize and Control GC More tools Developer tools
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
eval and JSONparse
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Importing data as Javascript assignmentimporthtml
lthtmlgtltheadgtlttitlegtJSON importlttitlegtltscript src=personjsgtltscriptgtltheadgtltbodygtltscriptgtdocumentwrite(JSONltttgt+person+ltttgtltbrgt)documentwrite(stringltttgt+JSONstringify(person)+ltttgtltbrgt)consolelog(JSON) consolelog(person)ltscriptgtltbodygtlthtmlgt
personjs
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Well formed and valid JSON files
A JSON file is well formed iff it respects JSONrsquos grammarIs my file well formed service JSONlint - another checker
JSON editor
Similar to XMLrsquos DTD files or schema we can imposeadditional restrictions to the structure of JSON files describingspecial types of data using JSON schema ndash the JSON filesrespecting these additional restrictions are called valid
Github validation JSON Schema Lint JSON Schemavalidator
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Simple examplegraphjson
infoorg0nNodes4nodes[nameAnnx02y02Num1Size100nameBenx02y08Num4Size500nameTimx08y02Num2Size200nameZoex08y08Num3Size400
]links[source0target1Count1Weight100source1target2Count1Weight100source2target3Count1Weight100source1target3Count2Weight300
]
In graphjs the JSON description is assigned to the variable graph
graph = infoorg0nNodes4nodes[
]
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Circular layoutadapted from Brath and Jonker p 257-258
ltDOCTYPE htmlgtlthtmlgtltheadgtltmeta charset=utf-8gtltscript src=graphjsgtltscriptgtlt-- script src=classjsgtltscript --gtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltscriptgt set up the drawing areavar width = 500
height = 500var svg = d3select(body)append(svg)
attr(width width)
attr(height height)
attr(xmlns httpwwww3org2000svg) angle and radius for layout assistancevar ang = 2 MathPI graphnodeslengthvar rad = width 25
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Circular layout
create the linksvar link = svgselectAll(line)data(graphlinks)enter()append(line)style(strokeblue)attr(stroke-width2)attr(x1function(d)return(radMathcos(dsourceang)+5width))attr(y1function(d)return(radMathsin(dsourceang)+5width))attr(x2function(d)return(radMathcos(dtargetang)+5width))attr(y2function(d)return(radMathsin(dtargetang)+5width))
create the nodes and set out in a circular layoutvar node = svgselectAll(circle)data(graphnodes)enter()append(circle)attr(r10)attr(cxfunction(di)return(radMathcos(iang)+5width))attr(cyfunction(di)return(radMathsin(iang)+5width))attr(fillyellow)attr(strokered)
ltscriptgtltbodygt
graphCirclehtml classjson classjs classCirclehtml+ labels classCircleLhtml+ permutation classPjson classPjs classCirclePhtm
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
SVG
ltxml version=10 encoding=UTF-8 standalone=yesgtltsvg width=500 height=500 xmlns=httpwwww3org2000svggtltline stroke-width=2 x1=450 y1=250 x2=250 y2=450 style=stroke bluegtltlinegtltline stroke-width=2 x1=250 y1=450 x2=50 y2=250 style=stroke bluegtltlinegtltline stroke-width=2 x1=50 y1=250 x2=250 y2=50 style=stroke bluegtltlinegtltline stroke-width=2 x1=250 y1=450 x2=250 y2=50 style=stroke bluegtltlinegtltcircle r=10 cx=450 cy=250 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=250 cy=450 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=50 cy=250 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=250 cy=50 fill=yellow stroke=redgtltcirclegtltsvggt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Networks in JSON format basic netJSONclassjson
netJSON basicinfo network class org 1 nNodes 15
nArcs 30 nEdges 13 nWeak 1title borrowing study materialsmeta date October 2015 author V Batagelj
nodes [
id 1 short m02 x 01857 y 02781 size 1 id 2 short m03 x 05482 y 06169 size 1 id 3 short w07 x 02219 y 04526 size 2 id 4 short w09 x 08078 y 03223 size 2
id 14 short m89 x 04000 y 08469 size 1 id 15 short m96 x 03482 y 01778 size 1
]links [
type arc source 6 target 15 weight 1 type arc source 2 target 7 weight 1
type arc source15 target 3 weight 1 type edge source 6 target 12 weight 1
type edge source 4 target 12 weight 1 type edge source 6 target 13 weight 1
]
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON and RTransforming Pajek NET and CLU files in to JSON
nodes[nameMyrielgroup1nameNapoleongroup1 nameBrujongroup4nameMmeHucheloupgroup8]
links[source1target0value1source2target0value8 source76target48value1source76target58value1]
setwd(CUsersBatageljtestpython2012amazon)library(rjson)
net2json lt- function(netFcluFjsonF)net lt- file(netFr) clu lt- file(cluFr)b lt- unlist(strsplit(readLines(netn=1) ))n lt- asinteger(b[length(b)])N lt- readLines(netn=n) nam lt- character(n)for(i in 1n) nam[i] lt- unlist(strsplit(N[i]rsquorsquo))[2]skip lt- readLines(clun=1) C lt- asinteger(readLines(clun=n))skip lt- readLines(netn=1) L lt- readLines(netn=-1)M lt- matrix(asinteger(unlist(strsplit(sub(rsquo^s+rsquorsquorsquoL)rsquos+rsquo)))ncol=3byrow=TRUE)nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(name=nam[i]group=C[i])m lt- nrow(M) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(source=M[i1]-1target=M[i2]-1value=M[i3])data lt- list(nodes=nodslinks=lnks)jstr lt- toJSON(data)json lt- file(jsonFw) cat(jstrfile=json)close(json) close(net) close(clu)
net2json(islandsnetislandscluislandsjson)
islands island 1 island 4 force islands
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
CSV2JSONR
transforming CSV files to JSON file by Vladimir Batagelj June 2016setwd(CUsersbatageljworkPythongraphSVGEUSN)library(rjson)colC lt- c(rep(character4)rep(numeric5)) nas lt- c(NANaN)nodes lt- readcsv2(bibNodesXYcsvencoding=rsquoUTF-8rsquocolClasses=colCnastrings=nas)M lt- factor(nodes$mode) mod lt- levels(M) M lt- asnumeric(M)S lt- factor(nodes$sex) sx lt- levels(S) S lt- asnumeric(S) S[isna(S)] lt- 0links lt- readcsv2(bibLinkscsvencoding=rsquoUTF-8rsquocolClasses=character)F lt- asnumeric(factor(links$fromlevels=nodes$nameordered=TRUE))T lt- asnumeric(factor(links$tolevels=nodes$nameordered=TRUE))R lt- factor(links$relation) rel lt-levels(R) R lt- asnumeric(R)n lt- nrow(nodes) nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(id=iname=nodes$name[i]mode=M[i]
sex=S[i]x=asnumeric(nodes$x[i])1000y=asnumeric(nodes$y[i])1000)m lt- nrow(links) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(type=arcsource=F[i]target=T[i]
rel=R[i]weight=1)meta lt- list(date=June 112016author=Vladimir Batagelj)leg lt- list(mode=modsex=sxrel=rel)inf lt- list(network=biborg=1nNodes=nnArcs=mtitle=Example for EUSNrsquo16legend=legmeta=meta)
data lt- list(netJSON=basicinfo=infnodes=nodslinks=lnks)json lt- file(bibjsonw) cat(toJSON(data)file=json) close(json)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibjson
netJSONbasicinfonetworkbiborg1nNodes16nArcs19titleExample for EUSNrsquo16legendmode[bookjournalpaperpersonpublisherseries]sex[fm]rel[authorOfcitescontainedIneditorOfpublishedBy]
metadateJune 112016authorVladimir Batageljnodes[id1nameBatagelj Vladimirmode4sex2x08091y06537id2nameDoreian Patrickmode4sex2x03585y06791id3nameFerligoj Anuu0161kamode4sex1x06195y06807id4nameGranovetter Markmode4sex2x01456y06605id5nameMoustaki Irinimode4sex1x0783y0228id6nameMrvar Andrejmode4sex2x0478y06301id7nameClustering with relational constraintmode3sex0x06841y03801
id15nameCambridge University Pressmode5sex0x05343y02382id16nameSpringermode5sex0x08846y0174]links[typearcsource1target10rel1weight1typearcsource2target10rel1weight1typearcsource3target10rel1weight1typearcsource1target7rel1weight1typearcsource3target7rel1weight1typearcsource4target8rel1weight1typearcsource4target14rel4weight1
typearcsource10target7rel2weight1typearcsource14target15rel5weight1typearcsource11target16rel5weight1
]
bibjson picture bibV Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON files anddisplaying a network with given nodesrsquo coordinates
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltinput type=rsquofilersquo accept=rsquoapplicationjsonrsquo onchange=rsquoopenFile(event)rsquogtltscriptgtfunction process(graph) set up the drawing areavar width = 500height = 500 s = graphattributesorg
var svg = d3select(body)append(svg)attr(width width)attr(height height)attr(xmlns httpwwww3org2000svg)
draw the linksvar link = svgselectAll(line)data(graphlinks)enter()append(line)style(stroke function(di) return((dtype==arc magenta blue)))attr(stroke-width 2)attr(x1 function(d) return(graphnodes[dsource-s]xwidth))attr(y1 function(d) return(graphnodes[dsource-s]yheight))attr(x2 function(d) return(graphnodes[dtarget-s]xwidth))attr(y2 function(d) return(graphnodes[dtarget-s]yheight))
draw the nodesvar node = svgselectAll(circle)data(graphnodes)enter()append(circle)attr(r 15)attr(cx function(di) return(dxwidth))attr(cy function(di) return(dyheight))attr(fill yellow)attr(stroke red)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
readingadapted from Matt West Reading Files Using The HTML5 FileReader API
var openFile = function(event) var input = eventtargetvar reader = new FileReader()readeronload = function()process(JSONparse(readerresult))
readerreadAsText(inputfiles[0])
ltscriptgtltbodygt
graphReadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON file from serveradapted from Ying Kit Yuen jQuery amp Javascript -ndash Read JSON files on server
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtlttitlegtLoad JSON file from serverlttitlegtlt-- httpeurekaykyueninfo20130925jquery-javascript-read-json-files-on-server --gtltscript src=httpajaxgoogleapiscomajaxlibsjquery1102jqueryminjsgtltscriptgtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltselect id=datagtltoption value=graphjsongtgraphjsonltoptiongtltoption value=classjsongtclassjsonltoptiongt
ltselectgtltbutton id=btngtReadltbuttongtltscriptgtfunction process(graph) set up the drawing area the body of function process is the same as in the previous exampleattr(stroke red)
$(btn)click(function()$getJSON($(data)val() function(json) process(json))
)ltscriptgtltbodygt
graphLoadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Network displayer graphXY
drawNetjs
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
graphXYgen
ltDOCTYPE htmlgtltmeta charset=utf-8gtltbodygtlt-- script src=graphAjsgtltscript --gtltscript src=graphBjsgtltscriptgtlt-- script src=classSjsgtltscript --gtltscript src=drawNetjsgtltscriptgtltscript src=d3d3jsgtltscriptgtltscriptgtvars = graphinfoorgwidth = graphstylecanvaswidthheight = graphstylecanvasheightvar lw = 1if ( typeof graphstyle == rsquoundefinedrsquo ampamp graphstyle) if ( typeof graphstylelink == rsquoundefinedrsquo ampamp graphstylelink )
if ( typeof graphstylelinkwidth == rsquoundefinedrsquo ampamp graphstylelinkwidth ) var lw = graphstylelinkwidth
if(graphnetJSON==rsquogeneralrsquo) var OK = drawNet(graphpersonsdatagraphfrienddata)
else var OK = drawNet(graphnodesgraphlinks)
ltscriptgtltbodygt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Saving SVG pictureS Murray Interactive Data Visualization for the Web p 235
In Google Chrome we draw a picture and open the Developer ToolsIn the Elements we identify the SVG subobject select it copy it intosome text editor and save with extension svg
To enhance the picture or to transform it to other picture formats we
process it using some vector graphics editor
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
To do
bull displayer templates can be based on GUI
bull for a description of multirelational networks we use the rel
attribute in the general version they can be treated asseparate sets of links
bull properties are considered as attributes in the general versionthey can be represented as special objects vector partitionpermutation and cluster
bull use temporal quantities for describing temporal networks
bull extend the list of info-attributes attributes type (simpletemporal) twoModeOrg nStrong nRelations planar
bull icons can be used for visualization of nodes Font AwesomeMaterial Icons tests
bull links can be visually represented in many different ways that canbe described in style
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
to do
bull style can be attached as an attribute also to an element(node link) thus changing the default settings
bull add the visualization of arcs with arrows Directed Graph EditorD3 Tips and Tricks
bull to be included in netD3js vzmetno risanje Force in urejanjeSpringy Matrix with permutations
bull can some attributes be renamed from tail nodeA rarrsource to head nodeB rarr target may be the simplestsolution is a replace in some text editor
bull implement saving of the obtained SVG picture to a file ExportSVG with Style d3jsSVG Export demo
bull include in netJSON elements useful in some applications suchas hooks or inout-ports background image etc
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Sources
Ideas for visualization styles can be found in GoJS - InteractiveDiagrams for JavaScript and HTML Visjs in VisualComplexity
GoJS mdashSankey Diagram Family Tree Logic Circuit DynamicPortsVega - a visualization grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References I
Vladimir Batagelj Complex Networks Visualization of RA Meyersed Encyclopedia of Complexity and Systems Science Springer 20091253-1268
Vladimir Batagelj Andrej Mrvar Pajek manual
Jernej Bodlaj Network Data File Formats in Reda Alhajj Jon Rokne(eds) Encyclopedia of Social Network Analysis and Mining SpringerNew York 2014 p 1076-1091
Richard Brath David Jonker Graph Analysis and VisualizationDiscovering Business Opportunity in Linked Data John Wiley amp SonsIndianapolis Indiana 2015
Emden Gansner Eleftherios Koutsofios Stephen North Drawinggraphs with dot January 26 2006
Scott Murray Interactive Data Visualization for the Web OrsquoReillySebastopol 2013
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References II
Wouter De Nooy Andrej Mrvar Vladimir Batagelj Exploratory SocialNetwork Analysis with Pajek Revised and Expanded Second EditionStructural Analysis in the Social Sciences Cambridge UniversityPress September 2011
Matthew Roughan Jonathan Tuke Unravelling Graph-Exchange FileFormats arXiv150302781 submitted on 10 Mar 2015
Wikipedia JSON
Leland Wilkinson The Grammar of Graphics Springer-Verlag NewYork 2005
V Batagelj JSON amp D3js
- Introduction
- Description of networks
- JSON
- JSON and D3js
- JSON and R
- Displayer
- To do
- References
-
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibNodescsv
namemodecountrysexyearvolnumfPagelPagexyBatagelj VladimirpersonSIm80916537Doreian PatrickpersonUSm35856791Ferligoj AnuskapersonSIf61956807Granovetter MarkpersonUSm14566605Moustaki IrinipersonUKf78302280Mrvar AndrejpersonSIm47806301Clustering with relational constraintpaper19824741342668413801The Strength of Weak Tiespaper19737861360138011133294Partitioning signed social networkspaper200931111140803378Generalized Blockmodelingbook200524138553304459Psychometrikajournal74180861Social Networksjournal32142365The American Journal of Sociologyjournal11131689Structural Analysis in the Social Sciencesseries31040828Cambridge University PresspublisherUK53432382SpringerpublisherUS88461740
bibNodescsv
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibLinkscsv
fromrelationtoBatagelj VladimirauthorOfGeneralized BlockmodelingDoreian PatrickauthorOfGeneralized BlockmodelingFerligoj AnuskaauthorOfGeneralized BlockmodelingBatagelj VladimirauthorOfClustering with relational constraintFerligoj AnuskaauthorOfClustering with relational constraintGranovetter MarkauthorOfThe Strength of Weak TiesGranovetter MarkeditorOfStructural Analysis in the Social SciencesDoreian PatrickauthorOfPartitioning signed social networksMrvar AndrejauthorOfPartitioning signed social networksMoustaki IrinieditorOfPsychometrikaDoreian PatrickeditorOfSocial NetworksGeneralized BlockmodelingcontainedInStructural Analysis in the Social SciencesClustering with relational constraintcontainedInPsychometrikaThe Strength of Weak TiescontainedInThe American Journal of SociologyPartitioning signed social networkscontainedInSocial NetworksPartitioning signed social networkscitesGeneralized BlockmodelingGeneralized BlockmodelingcitesClustering with relational constraintStructural Analysis in the Social SciencespublishedByCambridge University PressPsychometrikapublishedBySpringer
bibLinkscsv
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
CSV2PajekR
transforming CSV file to Pajek files by Vladimir Batagelj June 2016setwd(CUsersbatageljworkPythongraphSVGEUSN)colC lt- c(rep(character4)rep(integer7)) nas lt- c(NANaN)nodes lt- readcsv2(bibNodescsvencoding=rsquoUTF-8rsquocolClasses=colCnastrings=nas)n lt- nrow(nodes) M lt- factor(nodes$mode) S lt- factor(nodes$sex)mod lt- levels(M) sx lt- levels(S) S lt- asnumeric(S) S[isna(S)] lt- 0links lt- readcsv2(bibLinkscsvencoding=rsquoUTF-8rsquocolClasses=character)F lt- factor(links$fromlevels=nodes$nameordered=TRUE)T lt- factor(links$tolevels=nodes$nameordered=TRUE)R lt- factor(links$relation) rel lt- levels(R)net lt- file(bibnetw) cat(rsquovertices rsquonrsquonrsquofile=net)clu lt- file(bibModecluw) sex lt- file(bibSexcluw)cat(rsquorsquofile=clu) cat(rsquorsquofile=sex)for(i in 1length(mod)) cat(rsquo rsquoimod[i]file=clu)cat(rsquonvertices rsquonrsquonrsquofile=clu)for(i in 1length(sx)) cat(rsquo rsquoisx[i]file=sex)cat(rsquonvertices rsquonrsquonrsquofile=sex)for(v in 1n) cat(vrsquo rsquonodes$name[v]rsquonrsquosep=rsquorsquofile=net)cat(M[v]rsquonrsquofile=clu) cat(S[v]rsquonrsquofile=sex)
for(r in 1length(rel)) cat(rsquoarcs rsquorrsquo rsquorel[r]rsquonrsquosep=rsquorsquofile=net)cat(rsquoarcsnrsquofile=net)for(a in 1nrow(links))cat(R[a]rsquo rsquoF[a]rsquo rsquoT[a]rsquo 1 l rsquorel[R[a]]rsquonrsquosep=rsquorsquofile=net)
close(net) close(clu) close(sex)
CSV2PajekR
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibnet
vertices 16 arcs1 Batagelj Vladimir 1 1 10 1 l authorOf2 Doreian Patrick 1 2 10 1 l authorOf3 Ferligoj Anuska 1 3 10 1 l authorOf4 Granovetter Mark 1 1 7 1 l authorOf5 Moustaki Irini 1 3 7 1 l authorOf6 Mrvar Andrej 1 4 8 1 l authorOf7 Clustering with relational constraint 4 4 14 1 l editorOf8 The Strength of Weak Ties 1 2 9 1 l authorOf9 Partitioning signed social networks 1 6 9 1 l authorOf10 Generalized Blockmodeling 4 5 11 1 l editorOf11 Psychometrika 4 2 12 1 l editorOf12 Social Networks 3 10 14 1 l containedIn13 The American Journal of Sociology 3 7 11 1 l containedIn14 Structural Analysis in the Social Sciences 3 8 13 1 l containedIn15 Cambridge University Press 3 9 12 1 l containedIn16 Springer 2 9 10 1 l citesarcs 1 authorOf 2 10 7 1 l citesarcs 2 cites 5 14 15 1 l publishedByarcs 3 containedIn 5 11 16 1 l publishedByarcs 4 editorOfarcs 5 publishedBy
bibnet bibModeclu bibSexclu
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Bibliographic network ndash picture Pajek
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
XML api ndash JSON api
In near past for description of structured data the XML (ExtensibleMarkup Language) was mostly used In last five years a JSON formatstarted to replace it Google trends
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON
JSON (JavaScript Object Notation) is a text data format thatpreserves the structure of data objects It is ldquocompatiblerdquo with basicdata structures in modern programming languages
The initial version of JSON vas developed by Douglas Crockford(around 2002) He based it on the Javascript notation The principalidea is if we apply on a string (sequence of characters) containing adescription of a data object the Javascript function eval we get asits result the corresponding data object JSON is a programminglanguage independent open code standard for exchange of dataamong programs
Two JSON standards exist
bull The JSON Data Interchange Format Standard ECMA-404October 2013
bull The JavaScript Object Notation (JSON) Data InterchangeFormat Request for Comments 7159 March 2014
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON
firstName JohnlastName SmithisAlive trueage 25address streetAddress 21 2nd Streetcity New Yorkstate NYpostalCode 10021-3100
phoneNumbers [
type homenumber 212 555-1234
type officenumber 646 555-4567
]children []spouse null
Wikipedia
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON
XML is appropriate for describing the structure of textual dataJSON is becoming the first choice for describing structured dataJSON has much simpler grammar is more readable and compatiblewith basic data structures in modern programming languagesAll keys (names of fields) are in double quotes
JSON files are by default based on the encoding Unicode (UTF-8)
The MIME type for JSON files is applicationjson therecommended file extension is json
For work with JSON there exists supporting libraries for all importantprogramming languages httpwwwjsonorg
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
eval and JSONparseevalhtml
lthtmlgtltheadgtlttitlegtJSON eval and parselttitlegtltheadgtltbodygtltscriptgtvar data=rsquo[abca[true null314]bBBBBBc12e+5]rsquoalert(JSON + data)documentwrite(JSONltttgt+data+ltttgtltbrgt)var value = eval(rsquo(rsquo + data + rsquo)rsquo)consolelog(eval) consolelog(value)documentwrite(evalltttgt+JSONstringify(value)+ltttgtltbrgt)var json = JSONparse(data)consolelog(JSONparse) consolelog(json)ltscriptgtltbodygtlthtmlgt
To run the Javascript code I used the Google Chrome browser To get theconsole we selectCustomize and Control GC More tools Developer tools
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
eval and JSONparse
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Importing data as Javascript assignmentimporthtml
lthtmlgtltheadgtlttitlegtJSON importlttitlegtltscript src=personjsgtltscriptgtltheadgtltbodygtltscriptgtdocumentwrite(JSONltttgt+person+ltttgtltbrgt)documentwrite(stringltttgt+JSONstringify(person)+ltttgtltbrgt)consolelog(JSON) consolelog(person)ltscriptgtltbodygtlthtmlgt
personjs
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Well formed and valid JSON files
A JSON file is well formed iff it respects JSONrsquos grammarIs my file well formed service JSONlint - another checker
JSON editor
Similar to XMLrsquos DTD files or schema we can imposeadditional restrictions to the structure of JSON files describingspecial types of data using JSON schema ndash the JSON filesrespecting these additional restrictions are called valid
Github validation JSON Schema Lint JSON Schemavalidator
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Simple examplegraphjson
infoorg0nNodes4nodes[nameAnnx02y02Num1Size100nameBenx02y08Num4Size500nameTimx08y02Num2Size200nameZoex08y08Num3Size400
]links[source0target1Count1Weight100source1target2Count1Weight100source2target3Count1Weight100source1target3Count2Weight300
]
In graphjs the JSON description is assigned to the variable graph
graph = infoorg0nNodes4nodes[
]
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Circular layoutadapted from Brath and Jonker p 257-258
ltDOCTYPE htmlgtlthtmlgtltheadgtltmeta charset=utf-8gtltscript src=graphjsgtltscriptgtlt-- script src=classjsgtltscript --gtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltscriptgt set up the drawing areavar width = 500
height = 500var svg = d3select(body)append(svg)
attr(width width)
attr(height height)
attr(xmlns httpwwww3org2000svg) angle and radius for layout assistancevar ang = 2 MathPI graphnodeslengthvar rad = width 25
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Circular layout
create the linksvar link = svgselectAll(line)data(graphlinks)enter()append(line)style(strokeblue)attr(stroke-width2)attr(x1function(d)return(radMathcos(dsourceang)+5width))attr(y1function(d)return(radMathsin(dsourceang)+5width))attr(x2function(d)return(radMathcos(dtargetang)+5width))attr(y2function(d)return(radMathsin(dtargetang)+5width))
create the nodes and set out in a circular layoutvar node = svgselectAll(circle)data(graphnodes)enter()append(circle)attr(r10)attr(cxfunction(di)return(radMathcos(iang)+5width))attr(cyfunction(di)return(radMathsin(iang)+5width))attr(fillyellow)attr(strokered)
ltscriptgtltbodygt
graphCirclehtml classjson classjs classCirclehtml+ labels classCircleLhtml+ permutation classPjson classPjs classCirclePhtm
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
SVG
ltxml version=10 encoding=UTF-8 standalone=yesgtltsvg width=500 height=500 xmlns=httpwwww3org2000svggtltline stroke-width=2 x1=450 y1=250 x2=250 y2=450 style=stroke bluegtltlinegtltline stroke-width=2 x1=250 y1=450 x2=50 y2=250 style=stroke bluegtltlinegtltline stroke-width=2 x1=50 y1=250 x2=250 y2=50 style=stroke bluegtltlinegtltline stroke-width=2 x1=250 y1=450 x2=250 y2=50 style=stroke bluegtltlinegtltcircle r=10 cx=450 cy=250 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=250 cy=450 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=50 cy=250 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=250 cy=50 fill=yellow stroke=redgtltcirclegtltsvggt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Networks in JSON format basic netJSONclassjson
netJSON basicinfo network class org 1 nNodes 15
nArcs 30 nEdges 13 nWeak 1title borrowing study materialsmeta date October 2015 author V Batagelj
nodes [
id 1 short m02 x 01857 y 02781 size 1 id 2 short m03 x 05482 y 06169 size 1 id 3 short w07 x 02219 y 04526 size 2 id 4 short w09 x 08078 y 03223 size 2
id 14 short m89 x 04000 y 08469 size 1 id 15 short m96 x 03482 y 01778 size 1
]links [
type arc source 6 target 15 weight 1 type arc source 2 target 7 weight 1
type arc source15 target 3 weight 1 type edge source 6 target 12 weight 1
type edge source 4 target 12 weight 1 type edge source 6 target 13 weight 1
]
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON and RTransforming Pajek NET and CLU files in to JSON
nodes[nameMyrielgroup1nameNapoleongroup1 nameBrujongroup4nameMmeHucheloupgroup8]
links[source1target0value1source2target0value8 source76target48value1source76target58value1]
setwd(CUsersBatageljtestpython2012amazon)library(rjson)
net2json lt- function(netFcluFjsonF)net lt- file(netFr) clu lt- file(cluFr)b lt- unlist(strsplit(readLines(netn=1) ))n lt- asinteger(b[length(b)])N lt- readLines(netn=n) nam lt- character(n)for(i in 1n) nam[i] lt- unlist(strsplit(N[i]rsquorsquo))[2]skip lt- readLines(clun=1) C lt- asinteger(readLines(clun=n))skip lt- readLines(netn=1) L lt- readLines(netn=-1)M lt- matrix(asinteger(unlist(strsplit(sub(rsquo^s+rsquorsquorsquoL)rsquos+rsquo)))ncol=3byrow=TRUE)nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(name=nam[i]group=C[i])m lt- nrow(M) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(source=M[i1]-1target=M[i2]-1value=M[i3])data lt- list(nodes=nodslinks=lnks)jstr lt- toJSON(data)json lt- file(jsonFw) cat(jstrfile=json)close(json) close(net) close(clu)
net2json(islandsnetislandscluislandsjson)
islands island 1 island 4 force islands
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
CSV2JSONR
transforming CSV files to JSON file by Vladimir Batagelj June 2016setwd(CUsersbatageljworkPythongraphSVGEUSN)library(rjson)colC lt- c(rep(character4)rep(numeric5)) nas lt- c(NANaN)nodes lt- readcsv2(bibNodesXYcsvencoding=rsquoUTF-8rsquocolClasses=colCnastrings=nas)M lt- factor(nodes$mode) mod lt- levels(M) M lt- asnumeric(M)S lt- factor(nodes$sex) sx lt- levels(S) S lt- asnumeric(S) S[isna(S)] lt- 0links lt- readcsv2(bibLinkscsvencoding=rsquoUTF-8rsquocolClasses=character)F lt- asnumeric(factor(links$fromlevels=nodes$nameordered=TRUE))T lt- asnumeric(factor(links$tolevels=nodes$nameordered=TRUE))R lt- factor(links$relation) rel lt-levels(R) R lt- asnumeric(R)n lt- nrow(nodes) nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(id=iname=nodes$name[i]mode=M[i]
sex=S[i]x=asnumeric(nodes$x[i])1000y=asnumeric(nodes$y[i])1000)m lt- nrow(links) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(type=arcsource=F[i]target=T[i]
rel=R[i]weight=1)meta lt- list(date=June 112016author=Vladimir Batagelj)leg lt- list(mode=modsex=sxrel=rel)inf lt- list(network=biborg=1nNodes=nnArcs=mtitle=Example for EUSNrsquo16legend=legmeta=meta)
data lt- list(netJSON=basicinfo=infnodes=nodslinks=lnks)json lt- file(bibjsonw) cat(toJSON(data)file=json) close(json)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibjson
netJSONbasicinfonetworkbiborg1nNodes16nArcs19titleExample for EUSNrsquo16legendmode[bookjournalpaperpersonpublisherseries]sex[fm]rel[authorOfcitescontainedIneditorOfpublishedBy]
metadateJune 112016authorVladimir Batageljnodes[id1nameBatagelj Vladimirmode4sex2x08091y06537id2nameDoreian Patrickmode4sex2x03585y06791id3nameFerligoj Anuu0161kamode4sex1x06195y06807id4nameGranovetter Markmode4sex2x01456y06605id5nameMoustaki Irinimode4sex1x0783y0228id6nameMrvar Andrejmode4sex2x0478y06301id7nameClustering with relational constraintmode3sex0x06841y03801
id15nameCambridge University Pressmode5sex0x05343y02382id16nameSpringermode5sex0x08846y0174]links[typearcsource1target10rel1weight1typearcsource2target10rel1weight1typearcsource3target10rel1weight1typearcsource1target7rel1weight1typearcsource3target7rel1weight1typearcsource4target8rel1weight1typearcsource4target14rel4weight1
typearcsource10target7rel2weight1typearcsource14target15rel5weight1typearcsource11target16rel5weight1
]
bibjson picture bibV Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON files anddisplaying a network with given nodesrsquo coordinates
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltinput type=rsquofilersquo accept=rsquoapplicationjsonrsquo onchange=rsquoopenFile(event)rsquogtltscriptgtfunction process(graph) set up the drawing areavar width = 500height = 500 s = graphattributesorg
var svg = d3select(body)append(svg)attr(width width)attr(height height)attr(xmlns httpwwww3org2000svg)
draw the linksvar link = svgselectAll(line)data(graphlinks)enter()append(line)style(stroke function(di) return((dtype==arc magenta blue)))attr(stroke-width 2)attr(x1 function(d) return(graphnodes[dsource-s]xwidth))attr(y1 function(d) return(graphnodes[dsource-s]yheight))attr(x2 function(d) return(graphnodes[dtarget-s]xwidth))attr(y2 function(d) return(graphnodes[dtarget-s]yheight))
draw the nodesvar node = svgselectAll(circle)data(graphnodes)enter()append(circle)attr(r 15)attr(cx function(di) return(dxwidth))attr(cy function(di) return(dyheight))attr(fill yellow)attr(stroke red)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
readingadapted from Matt West Reading Files Using The HTML5 FileReader API
var openFile = function(event) var input = eventtargetvar reader = new FileReader()readeronload = function()process(JSONparse(readerresult))
readerreadAsText(inputfiles[0])
ltscriptgtltbodygt
graphReadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON file from serveradapted from Ying Kit Yuen jQuery amp Javascript -ndash Read JSON files on server
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtlttitlegtLoad JSON file from serverlttitlegtlt-- httpeurekaykyueninfo20130925jquery-javascript-read-json-files-on-server --gtltscript src=httpajaxgoogleapiscomajaxlibsjquery1102jqueryminjsgtltscriptgtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltselect id=datagtltoption value=graphjsongtgraphjsonltoptiongtltoption value=classjsongtclassjsonltoptiongt
ltselectgtltbutton id=btngtReadltbuttongtltscriptgtfunction process(graph) set up the drawing area the body of function process is the same as in the previous exampleattr(stroke red)
$(btn)click(function()$getJSON($(data)val() function(json) process(json))
)ltscriptgtltbodygt
graphLoadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Network displayer graphXY
drawNetjs
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
graphXYgen
ltDOCTYPE htmlgtltmeta charset=utf-8gtltbodygtlt-- script src=graphAjsgtltscript --gtltscript src=graphBjsgtltscriptgtlt-- script src=classSjsgtltscript --gtltscript src=drawNetjsgtltscriptgtltscript src=d3d3jsgtltscriptgtltscriptgtvars = graphinfoorgwidth = graphstylecanvaswidthheight = graphstylecanvasheightvar lw = 1if ( typeof graphstyle == rsquoundefinedrsquo ampamp graphstyle) if ( typeof graphstylelink == rsquoundefinedrsquo ampamp graphstylelink )
if ( typeof graphstylelinkwidth == rsquoundefinedrsquo ampamp graphstylelinkwidth ) var lw = graphstylelinkwidth
if(graphnetJSON==rsquogeneralrsquo) var OK = drawNet(graphpersonsdatagraphfrienddata)
else var OK = drawNet(graphnodesgraphlinks)
ltscriptgtltbodygt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Saving SVG pictureS Murray Interactive Data Visualization for the Web p 235
In Google Chrome we draw a picture and open the Developer ToolsIn the Elements we identify the SVG subobject select it copy it intosome text editor and save with extension svg
To enhance the picture or to transform it to other picture formats we
process it using some vector graphics editor
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
To do
bull displayer templates can be based on GUI
bull for a description of multirelational networks we use the rel
attribute in the general version they can be treated asseparate sets of links
bull properties are considered as attributes in the general versionthey can be represented as special objects vector partitionpermutation and cluster
bull use temporal quantities for describing temporal networks
bull extend the list of info-attributes attributes type (simpletemporal) twoModeOrg nStrong nRelations planar
bull icons can be used for visualization of nodes Font AwesomeMaterial Icons tests
bull links can be visually represented in many different ways that canbe described in style
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
to do
bull style can be attached as an attribute also to an element(node link) thus changing the default settings
bull add the visualization of arcs with arrows Directed Graph EditorD3 Tips and Tricks
bull to be included in netD3js vzmetno risanje Force in urejanjeSpringy Matrix with permutations
bull can some attributes be renamed from tail nodeA rarrsource to head nodeB rarr target may be the simplestsolution is a replace in some text editor
bull implement saving of the obtained SVG picture to a file ExportSVG with Style d3jsSVG Export demo
bull include in netJSON elements useful in some applications suchas hooks or inout-ports background image etc
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Sources
Ideas for visualization styles can be found in GoJS - InteractiveDiagrams for JavaScript and HTML Visjs in VisualComplexity
GoJS mdashSankey Diagram Family Tree Logic Circuit DynamicPortsVega - a visualization grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References I
Vladimir Batagelj Complex Networks Visualization of RA Meyersed Encyclopedia of Complexity and Systems Science Springer 20091253-1268
Vladimir Batagelj Andrej Mrvar Pajek manual
Jernej Bodlaj Network Data File Formats in Reda Alhajj Jon Rokne(eds) Encyclopedia of Social Network Analysis and Mining SpringerNew York 2014 p 1076-1091
Richard Brath David Jonker Graph Analysis and VisualizationDiscovering Business Opportunity in Linked Data John Wiley amp SonsIndianapolis Indiana 2015
Emden Gansner Eleftherios Koutsofios Stephen North Drawinggraphs with dot January 26 2006
Scott Murray Interactive Data Visualization for the Web OrsquoReillySebastopol 2013
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References II
Wouter De Nooy Andrej Mrvar Vladimir Batagelj Exploratory SocialNetwork Analysis with Pajek Revised and Expanded Second EditionStructural Analysis in the Social Sciences Cambridge UniversityPress September 2011
Matthew Roughan Jonathan Tuke Unravelling Graph-Exchange FileFormats arXiv150302781 submitted on 10 Mar 2015
Wikipedia JSON
Leland Wilkinson The Grammar of Graphics Springer-Verlag NewYork 2005
V Batagelj JSON amp D3js
- Introduction
- Description of networks
- JSON
- JSON and D3js
- JSON and R
- Displayer
- To do
- References
-
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibLinkscsv
fromrelationtoBatagelj VladimirauthorOfGeneralized BlockmodelingDoreian PatrickauthorOfGeneralized BlockmodelingFerligoj AnuskaauthorOfGeneralized BlockmodelingBatagelj VladimirauthorOfClustering with relational constraintFerligoj AnuskaauthorOfClustering with relational constraintGranovetter MarkauthorOfThe Strength of Weak TiesGranovetter MarkeditorOfStructural Analysis in the Social SciencesDoreian PatrickauthorOfPartitioning signed social networksMrvar AndrejauthorOfPartitioning signed social networksMoustaki IrinieditorOfPsychometrikaDoreian PatrickeditorOfSocial NetworksGeneralized BlockmodelingcontainedInStructural Analysis in the Social SciencesClustering with relational constraintcontainedInPsychometrikaThe Strength of Weak TiescontainedInThe American Journal of SociologyPartitioning signed social networkscontainedInSocial NetworksPartitioning signed social networkscitesGeneralized BlockmodelingGeneralized BlockmodelingcitesClustering with relational constraintStructural Analysis in the Social SciencespublishedByCambridge University PressPsychometrikapublishedBySpringer
bibLinkscsv
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
CSV2PajekR
transforming CSV file to Pajek files by Vladimir Batagelj June 2016setwd(CUsersbatageljworkPythongraphSVGEUSN)colC lt- c(rep(character4)rep(integer7)) nas lt- c(NANaN)nodes lt- readcsv2(bibNodescsvencoding=rsquoUTF-8rsquocolClasses=colCnastrings=nas)n lt- nrow(nodes) M lt- factor(nodes$mode) S lt- factor(nodes$sex)mod lt- levels(M) sx lt- levels(S) S lt- asnumeric(S) S[isna(S)] lt- 0links lt- readcsv2(bibLinkscsvencoding=rsquoUTF-8rsquocolClasses=character)F lt- factor(links$fromlevels=nodes$nameordered=TRUE)T lt- factor(links$tolevels=nodes$nameordered=TRUE)R lt- factor(links$relation) rel lt- levels(R)net lt- file(bibnetw) cat(rsquovertices rsquonrsquonrsquofile=net)clu lt- file(bibModecluw) sex lt- file(bibSexcluw)cat(rsquorsquofile=clu) cat(rsquorsquofile=sex)for(i in 1length(mod)) cat(rsquo rsquoimod[i]file=clu)cat(rsquonvertices rsquonrsquonrsquofile=clu)for(i in 1length(sx)) cat(rsquo rsquoisx[i]file=sex)cat(rsquonvertices rsquonrsquonrsquofile=sex)for(v in 1n) cat(vrsquo rsquonodes$name[v]rsquonrsquosep=rsquorsquofile=net)cat(M[v]rsquonrsquofile=clu) cat(S[v]rsquonrsquofile=sex)
for(r in 1length(rel)) cat(rsquoarcs rsquorrsquo rsquorel[r]rsquonrsquosep=rsquorsquofile=net)cat(rsquoarcsnrsquofile=net)for(a in 1nrow(links))cat(R[a]rsquo rsquoF[a]rsquo rsquoT[a]rsquo 1 l rsquorel[R[a]]rsquonrsquosep=rsquorsquofile=net)
close(net) close(clu) close(sex)
CSV2PajekR
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibnet
vertices 16 arcs1 Batagelj Vladimir 1 1 10 1 l authorOf2 Doreian Patrick 1 2 10 1 l authorOf3 Ferligoj Anuska 1 3 10 1 l authorOf4 Granovetter Mark 1 1 7 1 l authorOf5 Moustaki Irini 1 3 7 1 l authorOf6 Mrvar Andrej 1 4 8 1 l authorOf7 Clustering with relational constraint 4 4 14 1 l editorOf8 The Strength of Weak Ties 1 2 9 1 l authorOf9 Partitioning signed social networks 1 6 9 1 l authorOf10 Generalized Blockmodeling 4 5 11 1 l editorOf11 Psychometrika 4 2 12 1 l editorOf12 Social Networks 3 10 14 1 l containedIn13 The American Journal of Sociology 3 7 11 1 l containedIn14 Structural Analysis in the Social Sciences 3 8 13 1 l containedIn15 Cambridge University Press 3 9 12 1 l containedIn16 Springer 2 9 10 1 l citesarcs 1 authorOf 2 10 7 1 l citesarcs 2 cites 5 14 15 1 l publishedByarcs 3 containedIn 5 11 16 1 l publishedByarcs 4 editorOfarcs 5 publishedBy
bibnet bibModeclu bibSexclu
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Bibliographic network ndash picture Pajek
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
XML api ndash JSON api
In near past for description of structured data the XML (ExtensibleMarkup Language) was mostly used In last five years a JSON formatstarted to replace it Google trends
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON
JSON (JavaScript Object Notation) is a text data format thatpreserves the structure of data objects It is ldquocompatiblerdquo with basicdata structures in modern programming languages
The initial version of JSON vas developed by Douglas Crockford(around 2002) He based it on the Javascript notation The principalidea is if we apply on a string (sequence of characters) containing adescription of a data object the Javascript function eval we get asits result the corresponding data object JSON is a programminglanguage independent open code standard for exchange of dataamong programs
Two JSON standards exist
bull The JSON Data Interchange Format Standard ECMA-404October 2013
bull The JavaScript Object Notation (JSON) Data InterchangeFormat Request for Comments 7159 March 2014
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON
firstName JohnlastName SmithisAlive trueage 25address streetAddress 21 2nd Streetcity New Yorkstate NYpostalCode 10021-3100
phoneNumbers [
type homenumber 212 555-1234
type officenumber 646 555-4567
]children []spouse null
Wikipedia
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON
XML is appropriate for describing the structure of textual dataJSON is becoming the first choice for describing structured dataJSON has much simpler grammar is more readable and compatiblewith basic data structures in modern programming languagesAll keys (names of fields) are in double quotes
JSON files are by default based on the encoding Unicode (UTF-8)
The MIME type for JSON files is applicationjson therecommended file extension is json
For work with JSON there exists supporting libraries for all importantprogramming languages httpwwwjsonorg
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
eval and JSONparseevalhtml
lthtmlgtltheadgtlttitlegtJSON eval and parselttitlegtltheadgtltbodygtltscriptgtvar data=rsquo[abca[true null314]bBBBBBc12e+5]rsquoalert(JSON + data)documentwrite(JSONltttgt+data+ltttgtltbrgt)var value = eval(rsquo(rsquo + data + rsquo)rsquo)consolelog(eval) consolelog(value)documentwrite(evalltttgt+JSONstringify(value)+ltttgtltbrgt)var json = JSONparse(data)consolelog(JSONparse) consolelog(json)ltscriptgtltbodygtlthtmlgt
To run the Javascript code I used the Google Chrome browser To get theconsole we selectCustomize and Control GC More tools Developer tools
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
eval and JSONparse
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Importing data as Javascript assignmentimporthtml
lthtmlgtltheadgtlttitlegtJSON importlttitlegtltscript src=personjsgtltscriptgtltheadgtltbodygtltscriptgtdocumentwrite(JSONltttgt+person+ltttgtltbrgt)documentwrite(stringltttgt+JSONstringify(person)+ltttgtltbrgt)consolelog(JSON) consolelog(person)ltscriptgtltbodygtlthtmlgt
personjs
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Well formed and valid JSON files
A JSON file is well formed iff it respects JSONrsquos grammarIs my file well formed service JSONlint - another checker
JSON editor
Similar to XMLrsquos DTD files or schema we can imposeadditional restrictions to the structure of JSON files describingspecial types of data using JSON schema ndash the JSON filesrespecting these additional restrictions are called valid
Github validation JSON Schema Lint JSON Schemavalidator
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Simple examplegraphjson
infoorg0nNodes4nodes[nameAnnx02y02Num1Size100nameBenx02y08Num4Size500nameTimx08y02Num2Size200nameZoex08y08Num3Size400
]links[source0target1Count1Weight100source1target2Count1Weight100source2target3Count1Weight100source1target3Count2Weight300
]
In graphjs the JSON description is assigned to the variable graph
graph = infoorg0nNodes4nodes[
]
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Circular layoutadapted from Brath and Jonker p 257-258
ltDOCTYPE htmlgtlthtmlgtltheadgtltmeta charset=utf-8gtltscript src=graphjsgtltscriptgtlt-- script src=classjsgtltscript --gtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltscriptgt set up the drawing areavar width = 500
height = 500var svg = d3select(body)append(svg)
attr(width width)
attr(height height)
attr(xmlns httpwwww3org2000svg) angle and radius for layout assistancevar ang = 2 MathPI graphnodeslengthvar rad = width 25
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Circular layout
create the linksvar link = svgselectAll(line)data(graphlinks)enter()append(line)style(strokeblue)attr(stroke-width2)attr(x1function(d)return(radMathcos(dsourceang)+5width))attr(y1function(d)return(radMathsin(dsourceang)+5width))attr(x2function(d)return(radMathcos(dtargetang)+5width))attr(y2function(d)return(radMathsin(dtargetang)+5width))
create the nodes and set out in a circular layoutvar node = svgselectAll(circle)data(graphnodes)enter()append(circle)attr(r10)attr(cxfunction(di)return(radMathcos(iang)+5width))attr(cyfunction(di)return(radMathsin(iang)+5width))attr(fillyellow)attr(strokered)
ltscriptgtltbodygt
graphCirclehtml classjson classjs classCirclehtml+ labels classCircleLhtml+ permutation classPjson classPjs classCirclePhtm
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
SVG
ltxml version=10 encoding=UTF-8 standalone=yesgtltsvg width=500 height=500 xmlns=httpwwww3org2000svggtltline stroke-width=2 x1=450 y1=250 x2=250 y2=450 style=stroke bluegtltlinegtltline stroke-width=2 x1=250 y1=450 x2=50 y2=250 style=stroke bluegtltlinegtltline stroke-width=2 x1=50 y1=250 x2=250 y2=50 style=stroke bluegtltlinegtltline stroke-width=2 x1=250 y1=450 x2=250 y2=50 style=stroke bluegtltlinegtltcircle r=10 cx=450 cy=250 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=250 cy=450 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=50 cy=250 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=250 cy=50 fill=yellow stroke=redgtltcirclegtltsvggt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Networks in JSON format basic netJSONclassjson
netJSON basicinfo network class org 1 nNodes 15
nArcs 30 nEdges 13 nWeak 1title borrowing study materialsmeta date October 2015 author V Batagelj
nodes [
id 1 short m02 x 01857 y 02781 size 1 id 2 short m03 x 05482 y 06169 size 1 id 3 short w07 x 02219 y 04526 size 2 id 4 short w09 x 08078 y 03223 size 2
id 14 short m89 x 04000 y 08469 size 1 id 15 short m96 x 03482 y 01778 size 1
]links [
type arc source 6 target 15 weight 1 type arc source 2 target 7 weight 1
type arc source15 target 3 weight 1 type edge source 6 target 12 weight 1
type edge source 4 target 12 weight 1 type edge source 6 target 13 weight 1
]
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON and RTransforming Pajek NET and CLU files in to JSON
nodes[nameMyrielgroup1nameNapoleongroup1 nameBrujongroup4nameMmeHucheloupgroup8]
links[source1target0value1source2target0value8 source76target48value1source76target58value1]
setwd(CUsersBatageljtestpython2012amazon)library(rjson)
net2json lt- function(netFcluFjsonF)net lt- file(netFr) clu lt- file(cluFr)b lt- unlist(strsplit(readLines(netn=1) ))n lt- asinteger(b[length(b)])N lt- readLines(netn=n) nam lt- character(n)for(i in 1n) nam[i] lt- unlist(strsplit(N[i]rsquorsquo))[2]skip lt- readLines(clun=1) C lt- asinteger(readLines(clun=n))skip lt- readLines(netn=1) L lt- readLines(netn=-1)M lt- matrix(asinteger(unlist(strsplit(sub(rsquo^s+rsquorsquorsquoL)rsquos+rsquo)))ncol=3byrow=TRUE)nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(name=nam[i]group=C[i])m lt- nrow(M) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(source=M[i1]-1target=M[i2]-1value=M[i3])data lt- list(nodes=nodslinks=lnks)jstr lt- toJSON(data)json lt- file(jsonFw) cat(jstrfile=json)close(json) close(net) close(clu)
net2json(islandsnetislandscluislandsjson)
islands island 1 island 4 force islands
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
CSV2JSONR
transforming CSV files to JSON file by Vladimir Batagelj June 2016setwd(CUsersbatageljworkPythongraphSVGEUSN)library(rjson)colC lt- c(rep(character4)rep(numeric5)) nas lt- c(NANaN)nodes lt- readcsv2(bibNodesXYcsvencoding=rsquoUTF-8rsquocolClasses=colCnastrings=nas)M lt- factor(nodes$mode) mod lt- levels(M) M lt- asnumeric(M)S lt- factor(nodes$sex) sx lt- levels(S) S lt- asnumeric(S) S[isna(S)] lt- 0links lt- readcsv2(bibLinkscsvencoding=rsquoUTF-8rsquocolClasses=character)F lt- asnumeric(factor(links$fromlevels=nodes$nameordered=TRUE))T lt- asnumeric(factor(links$tolevels=nodes$nameordered=TRUE))R lt- factor(links$relation) rel lt-levels(R) R lt- asnumeric(R)n lt- nrow(nodes) nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(id=iname=nodes$name[i]mode=M[i]
sex=S[i]x=asnumeric(nodes$x[i])1000y=asnumeric(nodes$y[i])1000)m lt- nrow(links) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(type=arcsource=F[i]target=T[i]
rel=R[i]weight=1)meta lt- list(date=June 112016author=Vladimir Batagelj)leg lt- list(mode=modsex=sxrel=rel)inf lt- list(network=biborg=1nNodes=nnArcs=mtitle=Example for EUSNrsquo16legend=legmeta=meta)
data lt- list(netJSON=basicinfo=infnodes=nodslinks=lnks)json lt- file(bibjsonw) cat(toJSON(data)file=json) close(json)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibjson
netJSONbasicinfonetworkbiborg1nNodes16nArcs19titleExample for EUSNrsquo16legendmode[bookjournalpaperpersonpublisherseries]sex[fm]rel[authorOfcitescontainedIneditorOfpublishedBy]
metadateJune 112016authorVladimir Batageljnodes[id1nameBatagelj Vladimirmode4sex2x08091y06537id2nameDoreian Patrickmode4sex2x03585y06791id3nameFerligoj Anuu0161kamode4sex1x06195y06807id4nameGranovetter Markmode4sex2x01456y06605id5nameMoustaki Irinimode4sex1x0783y0228id6nameMrvar Andrejmode4sex2x0478y06301id7nameClustering with relational constraintmode3sex0x06841y03801
id15nameCambridge University Pressmode5sex0x05343y02382id16nameSpringermode5sex0x08846y0174]links[typearcsource1target10rel1weight1typearcsource2target10rel1weight1typearcsource3target10rel1weight1typearcsource1target7rel1weight1typearcsource3target7rel1weight1typearcsource4target8rel1weight1typearcsource4target14rel4weight1
typearcsource10target7rel2weight1typearcsource14target15rel5weight1typearcsource11target16rel5weight1
]
bibjson picture bibV Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON files anddisplaying a network with given nodesrsquo coordinates
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltinput type=rsquofilersquo accept=rsquoapplicationjsonrsquo onchange=rsquoopenFile(event)rsquogtltscriptgtfunction process(graph) set up the drawing areavar width = 500height = 500 s = graphattributesorg
var svg = d3select(body)append(svg)attr(width width)attr(height height)attr(xmlns httpwwww3org2000svg)
draw the linksvar link = svgselectAll(line)data(graphlinks)enter()append(line)style(stroke function(di) return((dtype==arc magenta blue)))attr(stroke-width 2)attr(x1 function(d) return(graphnodes[dsource-s]xwidth))attr(y1 function(d) return(graphnodes[dsource-s]yheight))attr(x2 function(d) return(graphnodes[dtarget-s]xwidth))attr(y2 function(d) return(graphnodes[dtarget-s]yheight))
draw the nodesvar node = svgselectAll(circle)data(graphnodes)enter()append(circle)attr(r 15)attr(cx function(di) return(dxwidth))attr(cy function(di) return(dyheight))attr(fill yellow)attr(stroke red)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
readingadapted from Matt West Reading Files Using The HTML5 FileReader API
var openFile = function(event) var input = eventtargetvar reader = new FileReader()readeronload = function()process(JSONparse(readerresult))
readerreadAsText(inputfiles[0])
ltscriptgtltbodygt
graphReadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON file from serveradapted from Ying Kit Yuen jQuery amp Javascript -ndash Read JSON files on server
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtlttitlegtLoad JSON file from serverlttitlegtlt-- httpeurekaykyueninfo20130925jquery-javascript-read-json-files-on-server --gtltscript src=httpajaxgoogleapiscomajaxlibsjquery1102jqueryminjsgtltscriptgtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltselect id=datagtltoption value=graphjsongtgraphjsonltoptiongtltoption value=classjsongtclassjsonltoptiongt
ltselectgtltbutton id=btngtReadltbuttongtltscriptgtfunction process(graph) set up the drawing area the body of function process is the same as in the previous exampleattr(stroke red)
$(btn)click(function()$getJSON($(data)val() function(json) process(json))
)ltscriptgtltbodygt
graphLoadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Network displayer graphXY
drawNetjs
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
graphXYgen
ltDOCTYPE htmlgtltmeta charset=utf-8gtltbodygtlt-- script src=graphAjsgtltscript --gtltscript src=graphBjsgtltscriptgtlt-- script src=classSjsgtltscript --gtltscript src=drawNetjsgtltscriptgtltscript src=d3d3jsgtltscriptgtltscriptgtvars = graphinfoorgwidth = graphstylecanvaswidthheight = graphstylecanvasheightvar lw = 1if ( typeof graphstyle == rsquoundefinedrsquo ampamp graphstyle) if ( typeof graphstylelink == rsquoundefinedrsquo ampamp graphstylelink )
if ( typeof graphstylelinkwidth == rsquoundefinedrsquo ampamp graphstylelinkwidth ) var lw = graphstylelinkwidth
if(graphnetJSON==rsquogeneralrsquo) var OK = drawNet(graphpersonsdatagraphfrienddata)
else var OK = drawNet(graphnodesgraphlinks)
ltscriptgtltbodygt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Saving SVG pictureS Murray Interactive Data Visualization for the Web p 235
In Google Chrome we draw a picture and open the Developer ToolsIn the Elements we identify the SVG subobject select it copy it intosome text editor and save with extension svg
To enhance the picture or to transform it to other picture formats we
process it using some vector graphics editor
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
To do
bull displayer templates can be based on GUI
bull for a description of multirelational networks we use the rel
attribute in the general version they can be treated asseparate sets of links
bull properties are considered as attributes in the general versionthey can be represented as special objects vector partitionpermutation and cluster
bull use temporal quantities for describing temporal networks
bull extend the list of info-attributes attributes type (simpletemporal) twoModeOrg nStrong nRelations planar
bull icons can be used for visualization of nodes Font AwesomeMaterial Icons tests
bull links can be visually represented in many different ways that canbe described in style
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
to do
bull style can be attached as an attribute also to an element(node link) thus changing the default settings
bull add the visualization of arcs with arrows Directed Graph EditorD3 Tips and Tricks
bull to be included in netD3js vzmetno risanje Force in urejanjeSpringy Matrix with permutations
bull can some attributes be renamed from tail nodeA rarrsource to head nodeB rarr target may be the simplestsolution is a replace in some text editor
bull implement saving of the obtained SVG picture to a file ExportSVG with Style d3jsSVG Export demo
bull include in netJSON elements useful in some applications suchas hooks or inout-ports background image etc
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Sources
Ideas for visualization styles can be found in GoJS - InteractiveDiagrams for JavaScript and HTML Visjs in VisualComplexity
GoJS mdashSankey Diagram Family Tree Logic Circuit DynamicPortsVega - a visualization grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References I
Vladimir Batagelj Complex Networks Visualization of RA Meyersed Encyclopedia of Complexity and Systems Science Springer 20091253-1268
Vladimir Batagelj Andrej Mrvar Pajek manual
Jernej Bodlaj Network Data File Formats in Reda Alhajj Jon Rokne(eds) Encyclopedia of Social Network Analysis and Mining SpringerNew York 2014 p 1076-1091
Richard Brath David Jonker Graph Analysis and VisualizationDiscovering Business Opportunity in Linked Data John Wiley amp SonsIndianapolis Indiana 2015
Emden Gansner Eleftherios Koutsofios Stephen North Drawinggraphs with dot January 26 2006
Scott Murray Interactive Data Visualization for the Web OrsquoReillySebastopol 2013
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References II
Wouter De Nooy Andrej Mrvar Vladimir Batagelj Exploratory SocialNetwork Analysis with Pajek Revised and Expanded Second EditionStructural Analysis in the Social Sciences Cambridge UniversityPress September 2011
Matthew Roughan Jonathan Tuke Unravelling Graph-Exchange FileFormats arXiv150302781 submitted on 10 Mar 2015
Wikipedia JSON
Leland Wilkinson The Grammar of Graphics Springer-Verlag NewYork 2005
V Batagelj JSON amp D3js
- Introduction
- Description of networks
- JSON
- JSON and D3js
- JSON and R
- Displayer
- To do
- References
-
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
CSV2PajekR
transforming CSV file to Pajek files by Vladimir Batagelj June 2016setwd(CUsersbatageljworkPythongraphSVGEUSN)colC lt- c(rep(character4)rep(integer7)) nas lt- c(NANaN)nodes lt- readcsv2(bibNodescsvencoding=rsquoUTF-8rsquocolClasses=colCnastrings=nas)n lt- nrow(nodes) M lt- factor(nodes$mode) S lt- factor(nodes$sex)mod lt- levels(M) sx lt- levels(S) S lt- asnumeric(S) S[isna(S)] lt- 0links lt- readcsv2(bibLinkscsvencoding=rsquoUTF-8rsquocolClasses=character)F lt- factor(links$fromlevels=nodes$nameordered=TRUE)T lt- factor(links$tolevels=nodes$nameordered=TRUE)R lt- factor(links$relation) rel lt- levels(R)net lt- file(bibnetw) cat(rsquovertices rsquonrsquonrsquofile=net)clu lt- file(bibModecluw) sex lt- file(bibSexcluw)cat(rsquorsquofile=clu) cat(rsquorsquofile=sex)for(i in 1length(mod)) cat(rsquo rsquoimod[i]file=clu)cat(rsquonvertices rsquonrsquonrsquofile=clu)for(i in 1length(sx)) cat(rsquo rsquoisx[i]file=sex)cat(rsquonvertices rsquonrsquonrsquofile=sex)for(v in 1n) cat(vrsquo rsquonodes$name[v]rsquonrsquosep=rsquorsquofile=net)cat(M[v]rsquonrsquofile=clu) cat(S[v]rsquonrsquofile=sex)
for(r in 1length(rel)) cat(rsquoarcs rsquorrsquo rsquorel[r]rsquonrsquosep=rsquorsquofile=net)cat(rsquoarcsnrsquofile=net)for(a in 1nrow(links))cat(R[a]rsquo rsquoF[a]rsquo rsquoT[a]rsquo 1 l rsquorel[R[a]]rsquonrsquosep=rsquorsquofile=net)
close(net) close(clu) close(sex)
CSV2PajekR
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibnet
vertices 16 arcs1 Batagelj Vladimir 1 1 10 1 l authorOf2 Doreian Patrick 1 2 10 1 l authorOf3 Ferligoj Anuska 1 3 10 1 l authorOf4 Granovetter Mark 1 1 7 1 l authorOf5 Moustaki Irini 1 3 7 1 l authorOf6 Mrvar Andrej 1 4 8 1 l authorOf7 Clustering with relational constraint 4 4 14 1 l editorOf8 The Strength of Weak Ties 1 2 9 1 l authorOf9 Partitioning signed social networks 1 6 9 1 l authorOf10 Generalized Blockmodeling 4 5 11 1 l editorOf11 Psychometrika 4 2 12 1 l editorOf12 Social Networks 3 10 14 1 l containedIn13 The American Journal of Sociology 3 7 11 1 l containedIn14 Structural Analysis in the Social Sciences 3 8 13 1 l containedIn15 Cambridge University Press 3 9 12 1 l containedIn16 Springer 2 9 10 1 l citesarcs 1 authorOf 2 10 7 1 l citesarcs 2 cites 5 14 15 1 l publishedByarcs 3 containedIn 5 11 16 1 l publishedByarcs 4 editorOfarcs 5 publishedBy
bibnet bibModeclu bibSexclu
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Bibliographic network ndash picture Pajek
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
XML api ndash JSON api
In near past for description of structured data the XML (ExtensibleMarkup Language) was mostly used In last five years a JSON formatstarted to replace it Google trends
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON
JSON (JavaScript Object Notation) is a text data format thatpreserves the structure of data objects It is ldquocompatiblerdquo with basicdata structures in modern programming languages
The initial version of JSON vas developed by Douglas Crockford(around 2002) He based it on the Javascript notation The principalidea is if we apply on a string (sequence of characters) containing adescription of a data object the Javascript function eval we get asits result the corresponding data object JSON is a programminglanguage independent open code standard for exchange of dataamong programs
Two JSON standards exist
bull The JSON Data Interchange Format Standard ECMA-404October 2013
bull The JavaScript Object Notation (JSON) Data InterchangeFormat Request for Comments 7159 March 2014
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON
firstName JohnlastName SmithisAlive trueage 25address streetAddress 21 2nd Streetcity New Yorkstate NYpostalCode 10021-3100
phoneNumbers [
type homenumber 212 555-1234
type officenumber 646 555-4567
]children []spouse null
Wikipedia
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON
XML is appropriate for describing the structure of textual dataJSON is becoming the first choice for describing structured dataJSON has much simpler grammar is more readable and compatiblewith basic data structures in modern programming languagesAll keys (names of fields) are in double quotes
JSON files are by default based on the encoding Unicode (UTF-8)
The MIME type for JSON files is applicationjson therecommended file extension is json
For work with JSON there exists supporting libraries for all importantprogramming languages httpwwwjsonorg
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
eval and JSONparseevalhtml
lthtmlgtltheadgtlttitlegtJSON eval and parselttitlegtltheadgtltbodygtltscriptgtvar data=rsquo[abca[true null314]bBBBBBc12e+5]rsquoalert(JSON + data)documentwrite(JSONltttgt+data+ltttgtltbrgt)var value = eval(rsquo(rsquo + data + rsquo)rsquo)consolelog(eval) consolelog(value)documentwrite(evalltttgt+JSONstringify(value)+ltttgtltbrgt)var json = JSONparse(data)consolelog(JSONparse) consolelog(json)ltscriptgtltbodygtlthtmlgt
To run the Javascript code I used the Google Chrome browser To get theconsole we selectCustomize and Control GC More tools Developer tools
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
eval and JSONparse
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Importing data as Javascript assignmentimporthtml
lthtmlgtltheadgtlttitlegtJSON importlttitlegtltscript src=personjsgtltscriptgtltheadgtltbodygtltscriptgtdocumentwrite(JSONltttgt+person+ltttgtltbrgt)documentwrite(stringltttgt+JSONstringify(person)+ltttgtltbrgt)consolelog(JSON) consolelog(person)ltscriptgtltbodygtlthtmlgt
personjs
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Well formed and valid JSON files
A JSON file is well formed iff it respects JSONrsquos grammarIs my file well formed service JSONlint - another checker
JSON editor
Similar to XMLrsquos DTD files or schema we can imposeadditional restrictions to the structure of JSON files describingspecial types of data using JSON schema ndash the JSON filesrespecting these additional restrictions are called valid
Github validation JSON Schema Lint JSON Schemavalidator
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Simple examplegraphjson
infoorg0nNodes4nodes[nameAnnx02y02Num1Size100nameBenx02y08Num4Size500nameTimx08y02Num2Size200nameZoex08y08Num3Size400
]links[source0target1Count1Weight100source1target2Count1Weight100source2target3Count1Weight100source1target3Count2Weight300
]
In graphjs the JSON description is assigned to the variable graph
graph = infoorg0nNodes4nodes[
]
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Circular layoutadapted from Brath and Jonker p 257-258
ltDOCTYPE htmlgtlthtmlgtltheadgtltmeta charset=utf-8gtltscript src=graphjsgtltscriptgtlt-- script src=classjsgtltscript --gtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltscriptgt set up the drawing areavar width = 500
height = 500var svg = d3select(body)append(svg)
attr(width width)
attr(height height)
attr(xmlns httpwwww3org2000svg) angle and radius for layout assistancevar ang = 2 MathPI graphnodeslengthvar rad = width 25
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Circular layout
create the linksvar link = svgselectAll(line)data(graphlinks)enter()append(line)style(strokeblue)attr(stroke-width2)attr(x1function(d)return(radMathcos(dsourceang)+5width))attr(y1function(d)return(radMathsin(dsourceang)+5width))attr(x2function(d)return(radMathcos(dtargetang)+5width))attr(y2function(d)return(radMathsin(dtargetang)+5width))
create the nodes and set out in a circular layoutvar node = svgselectAll(circle)data(graphnodes)enter()append(circle)attr(r10)attr(cxfunction(di)return(radMathcos(iang)+5width))attr(cyfunction(di)return(radMathsin(iang)+5width))attr(fillyellow)attr(strokered)
ltscriptgtltbodygt
graphCirclehtml classjson classjs classCirclehtml+ labels classCircleLhtml+ permutation classPjson classPjs classCirclePhtm
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
SVG
ltxml version=10 encoding=UTF-8 standalone=yesgtltsvg width=500 height=500 xmlns=httpwwww3org2000svggtltline stroke-width=2 x1=450 y1=250 x2=250 y2=450 style=stroke bluegtltlinegtltline stroke-width=2 x1=250 y1=450 x2=50 y2=250 style=stroke bluegtltlinegtltline stroke-width=2 x1=50 y1=250 x2=250 y2=50 style=stroke bluegtltlinegtltline stroke-width=2 x1=250 y1=450 x2=250 y2=50 style=stroke bluegtltlinegtltcircle r=10 cx=450 cy=250 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=250 cy=450 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=50 cy=250 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=250 cy=50 fill=yellow stroke=redgtltcirclegtltsvggt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Networks in JSON format basic netJSONclassjson
netJSON basicinfo network class org 1 nNodes 15
nArcs 30 nEdges 13 nWeak 1title borrowing study materialsmeta date October 2015 author V Batagelj
nodes [
id 1 short m02 x 01857 y 02781 size 1 id 2 short m03 x 05482 y 06169 size 1 id 3 short w07 x 02219 y 04526 size 2 id 4 short w09 x 08078 y 03223 size 2
id 14 short m89 x 04000 y 08469 size 1 id 15 short m96 x 03482 y 01778 size 1
]links [
type arc source 6 target 15 weight 1 type arc source 2 target 7 weight 1
type arc source15 target 3 weight 1 type edge source 6 target 12 weight 1
type edge source 4 target 12 weight 1 type edge source 6 target 13 weight 1
]
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON and RTransforming Pajek NET and CLU files in to JSON
nodes[nameMyrielgroup1nameNapoleongroup1 nameBrujongroup4nameMmeHucheloupgroup8]
links[source1target0value1source2target0value8 source76target48value1source76target58value1]
setwd(CUsersBatageljtestpython2012amazon)library(rjson)
net2json lt- function(netFcluFjsonF)net lt- file(netFr) clu lt- file(cluFr)b lt- unlist(strsplit(readLines(netn=1) ))n lt- asinteger(b[length(b)])N lt- readLines(netn=n) nam lt- character(n)for(i in 1n) nam[i] lt- unlist(strsplit(N[i]rsquorsquo))[2]skip lt- readLines(clun=1) C lt- asinteger(readLines(clun=n))skip lt- readLines(netn=1) L lt- readLines(netn=-1)M lt- matrix(asinteger(unlist(strsplit(sub(rsquo^s+rsquorsquorsquoL)rsquos+rsquo)))ncol=3byrow=TRUE)nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(name=nam[i]group=C[i])m lt- nrow(M) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(source=M[i1]-1target=M[i2]-1value=M[i3])data lt- list(nodes=nodslinks=lnks)jstr lt- toJSON(data)json lt- file(jsonFw) cat(jstrfile=json)close(json) close(net) close(clu)
net2json(islandsnetislandscluislandsjson)
islands island 1 island 4 force islands
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
CSV2JSONR
transforming CSV files to JSON file by Vladimir Batagelj June 2016setwd(CUsersbatageljworkPythongraphSVGEUSN)library(rjson)colC lt- c(rep(character4)rep(numeric5)) nas lt- c(NANaN)nodes lt- readcsv2(bibNodesXYcsvencoding=rsquoUTF-8rsquocolClasses=colCnastrings=nas)M lt- factor(nodes$mode) mod lt- levels(M) M lt- asnumeric(M)S lt- factor(nodes$sex) sx lt- levels(S) S lt- asnumeric(S) S[isna(S)] lt- 0links lt- readcsv2(bibLinkscsvencoding=rsquoUTF-8rsquocolClasses=character)F lt- asnumeric(factor(links$fromlevels=nodes$nameordered=TRUE))T lt- asnumeric(factor(links$tolevels=nodes$nameordered=TRUE))R lt- factor(links$relation) rel lt-levels(R) R lt- asnumeric(R)n lt- nrow(nodes) nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(id=iname=nodes$name[i]mode=M[i]
sex=S[i]x=asnumeric(nodes$x[i])1000y=asnumeric(nodes$y[i])1000)m lt- nrow(links) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(type=arcsource=F[i]target=T[i]
rel=R[i]weight=1)meta lt- list(date=June 112016author=Vladimir Batagelj)leg lt- list(mode=modsex=sxrel=rel)inf lt- list(network=biborg=1nNodes=nnArcs=mtitle=Example for EUSNrsquo16legend=legmeta=meta)
data lt- list(netJSON=basicinfo=infnodes=nodslinks=lnks)json lt- file(bibjsonw) cat(toJSON(data)file=json) close(json)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibjson
netJSONbasicinfonetworkbiborg1nNodes16nArcs19titleExample for EUSNrsquo16legendmode[bookjournalpaperpersonpublisherseries]sex[fm]rel[authorOfcitescontainedIneditorOfpublishedBy]
metadateJune 112016authorVladimir Batageljnodes[id1nameBatagelj Vladimirmode4sex2x08091y06537id2nameDoreian Patrickmode4sex2x03585y06791id3nameFerligoj Anuu0161kamode4sex1x06195y06807id4nameGranovetter Markmode4sex2x01456y06605id5nameMoustaki Irinimode4sex1x0783y0228id6nameMrvar Andrejmode4sex2x0478y06301id7nameClustering with relational constraintmode3sex0x06841y03801
id15nameCambridge University Pressmode5sex0x05343y02382id16nameSpringermode5sex0x08846y0174]links[typearcsource1target10rel1weight1typearcsource2target10rel1weight1typearcsource3target10rel1weight1typearcsource1target7rel1weight1typearcsource3target7rel1weight1typearcsource4target8rel1weight1typearcsource4target14rel4weight1
typearcsource10target7rel2weight1typearcsource14target15rel5weight1typearcsource11target16rel5weight1
]
bibjson picture bibV Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON files anddisplaying a network with given nodesrsquo coordinates
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltinput type=rsquofilersquo accept=rsquoapplicationjsonrsquo onchange=rsquoopenFile(event)rsquogtltscriptgtfunction process(graph) set up the drawing areavar width = 500height = 500 s = graphattributesorg
var svg = d3select(body)append(svg)attr(width width)attr(height height)attr(xmlns httpwwww3org2000svg)
draw the linksvar link = svgselectAll(line)data(graphlinks)enter()append(line)style(stroke function(di) return((dtype==arc magenta blue)))attr(stroke-width 2)attr(x1 function(d) return(graphnodes[dsource-s]xwidth))attr(y1 function(d) return(graphnodes[dsource-s]yheight))attr(x2 function(d) return(graphnodes[dtarget-s]xwidth))attr(y2 function(d) return(graphnodes[dtarget-s]yheight))
draw the nodesvar node = svgselectAll(circle)data(graphnodes)enter()append(circle)attr(r 15)attr(cx function(di) return(dxwidth))attr(cy function(di) return(dyheight))attr(fill yellow)attr(stroke red)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
readingadapted from Matt West Reading Files Using The HTML5 FileReader API
var openFile = function(event) var input = eventtargetvar reader = new FileReader()readeronload = function()process(JSONparse(readerresult))
readerreadAsText(inputfiles[0])
ltscriptgtltbodygt
graphReadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON file from serveradapted from Ying Kit Yuen jQuery amp Javascript -ndash Read JSON files on server
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtlttitlegtLoad JSON file from serverlttitlegtlt-- httpeurekaykyueninfo20130925jquery-javascript-read-json-files-on-server --gtltscript src=httpajaxgoogleapiscomajaxlibsjquery1102jqueryminjsgtltscriptgtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltselect id=datagtltoption value=graphjsongtgraphjsonltoptiongtltoption value=classjsongtclassjsonltoptiongt
ltselectgtltbutton id=btngtReadltbuttongtltscriptgtfunction process(graph) set up the drawing area the body of function process is the same as in the previous exampleattr(stroke red)
$(btn)click(function()$getJSON($(data)val() function(json) process(json))
)ltscriptgtltbodygt
graphLoadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Network displayer graphXY
drawNetjs
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
graphXYgen
ltDOCTYPE htmlgtltmeta charset=utf-8gtltbodygtlt-- script src=graphAjsgtltscript --gtltscript src=graphBjsgtltscriptgtlt-- script src=classSjsgtltscript --gtltscript src=drawNetjsgtltscriptgtltscript src=d3d3jsgtltscriptgtltscriptgtvars = graphinfoorgwidth = graphstylecanvaswidthheight = graphstylecanvasheightvar lw = 1if ( typeof graphstyle == rsquoundefinedrsquo ampamp graphstyle) if ( typeof graphstylelink == rsquoundefinedrsquo ampamp graphstylelink )
if ( typeof graphstylelinkwidth == rsquoundefinedrsquo ampamp graphstylelinkwidth ) var lw = graphstylelinkwidth
if(graphnetJSON==rsquogeneralrsquo) var OK = drawNet(graphpersonsdatagraphfrienddata)
else var OK = drawNet(graphnodesgraphlinks)
ltscriptgtltbodygt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Saving SVG pictureS Murray Interactive Data Visualization for the Web p 235
In Google Chrome we draw a picture and open the Developer ToolsIn the Elements we identify the SVG subobject select it copy it intosome text editor and save with extension svg
To enhance the picture or to transform it to other picture formats we
process it using some vector graphics editor
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
To do
bull displayer templates can be based on GUI
bull for a description of multirelational networks we use the rel
attribute in the general version they can be treated asseparate sets of links
bull properties are considered as attributes in the general versionthey can be represented as special objects vector partitionpermutation and cluster
bull use temporal quantities for describing temporal networks
bull extend the list of info-attributes attributes type (simpletemporal) twoModeOrg nStrong nRelations planar
bull icons can be used for visualization of nodes Font AwesomeMaterial Icons tests
bull links can be visually represented in many different ways that canbe described in style
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
to do
bull style can be attached as an attribute also to an element(node link) thus changing the default settings
bull add the visualization of arcs with arrows Directed Graph EditorD3 Tips and Tricks
bull to be included in netD3js vzmetno risanje Force in urejanjeSpringy Matrix with permutations
bull can some attributes be renamed from tail nodeA rarrsource to head nodeB rarr target may be the simplestsolution is a replace in some text editor
bull implement saving of the obtained SVG picture to a file ExportSVG with Style d3jsSVG Export demo
bull include in netJSON elements useful in some applications suchas hooks or inout-ports background image etc
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Sources
Ideas for visualization styles can be found in GoJS - InteractiveDiagrams for JavaScript and HTML Visjs in VisualComplexity
GoJS mdashSankey Diagram Family Tree Logic Circuit DynamicPortsVega - a visualization grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References I
Vladimir Batagelj Complex Networks Visualization of RA Meyersed Encyclopedia of Complexity and Systems Science Springer 20091253-1268
Vladimir Batagelj Andrej Mrvar Pajek manual
Jernej Bodlaj Network Data File Formats in Reda Alhajj Jon Rokne(eds) Encyclopedia of Social Network Analysis and Mining SpringerNew York 2014 p 1076-1091
Richard Brath David Jonker Graph Analysis and VisualizationDiscovering Business Opportunity in Linked Data John Wiley amp SonsIndianapolis Indiana 2015
Emden Gansner Eleftherios Koutsofios Stephen North Drawinggraphs with dot January 26 2006
Scott Murray Interactive Data Visualization for the Web OrsquoReillySebastopol 2013
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References II
Wouter De Nooy Andrej Mrvar Vladimir Batagelj Exploratory SocialNetwork Analysis with Pajek Revised and Expanded Second EditionStructural Analysis in the Social Sciences Cambridge UniversityPress September 2011
Matthew Roughan Jonathan Tuke Unravelling Graph-Exchange FileFormats arXiv150302781 submitted on 10 Mar 2015
Wikipedia JSON
Leland Wilkinson The Grammar of Graphics Springer-Verlag NewYork 2005
V Batagelj JSON amp D3js
- Introduction
- Description of networks
- JSON
- JSON and D3js
- JSON and R
- Displayer
- To do
- References
-
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibnet
vertices 16 arcs1 Batagelj Vladimir 1 1 10 1 l authorOf2 Doreian Patrick 1 2 10 1 l authorOf3 Ferligoj Anuska 1 3 10 1 l authorOf4 Granovetter Mark 1 1 7 1 l authorOf5 Moustaki Irini 1 3 7 1 l authorOf6 Mrvar Andrej 1 4 8 1 l authorOf7 Clustering with relational constraint 4 4 14 1 l editorOf8 The Strength of Weak Ties 1 2 9 1 l authorOf9 Partitioning signed social networks 1 6 9 1 l authorOf10 Generalized Blockmodeling 4 5 11 1 l editorOf11 Psychometrika 4 2 12 1 l editorOf12 Social Networks 3 10 14 1 l containedIn13 The American Journal of Sociology 3 7 11 1 l containedIn14 Structural Analysis in the Social Sciences 3 8 13 1 l containedIn15 Cambridge University Press 3 9 12 1 l containedIn16 Springer 2 9 10 1 l citesarcs 1 authorOf 2 10 7 1 l citesarcs 2 cites 5 14 15 1 l publishedByarcs 3 containedIn 5 11 16 1 l publishedByarcs 4 editorOfarcs 5 publishedBy
bibnet bibModeclu bibSexclu
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Bibliographic network ndash picture Pajek
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
XML api ndash JSON api
In near past for description of structured data the XML (ExtensibleMarkup Language) was mostly used In last five years a JSON formatstarted to replace it Google trends
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON
JSON (JavaScript Object Notation) is a text data format thatpreserves the structure of data objects It is ldquocompatiblerdquo with basicdata structures in modern programming languages
The initial version of JSON vas developed by Douglas Crockford(around 2002) He based it on the Javascript notation The principalidea is if we apply on a string (sequence of characters) containing adescription of a data object the Javascript function eval we get asits result the corresponding data object JSON is a programminglanguage independent open code standard for exchange of dataamong programs
Two JSON standards exist
bull The JSON Data Interchange Format Standard ECMA-404October 2013
bull The JavaScript Object Notation (JSON) Data InterchangeFormat Request for Comments 7159 March 2014
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON
firstName JohnlastName SmithisAlive trueage 25address streetAddress 21 2nd Streetcity New Yorkstate NYpostalCode 10021-3100
phoneNumbers [
type homenumber 212 555-1234
type officenumber 646 555-4567
]children []spouse null
Wikipedia
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON
XML is appropriate for describing the structure of textual dataJSON is becoming the first choice for describing structured dataJSON has much simpler grammar is more readable and compatiblewith basic data structures in modern programming languagesAll keys (names of fields) are in double quotes
JSON files are by default based on the encoding Unicode (UTF-8)
The MIME type for JSON files is applicationjson therecommended file extension is json
For work with JSON there exists supporting libraries for all importantprogramming languages httpwwwjsonorg
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
eval and JSONparseevalhtml
lthtmlgtltheadgtlttitlegtJSON eval and parselttitlegtltheadgtltbodygtltscriptgtvar data=rsquo[abca[true null314]bBBBBBc12e+5]rsquoalert(JSON + data)documentwrite(JSONltttgt+data+ltttgtltbrgt)var value = eval(rsquo(rsquo + data + rsquo)rsquo)consolelog(eval) consolelog(value)documentwrite(evalltttgt+JSONstringify(value)+ltttgtltbrgt)var json = JSONparse(data)consolelog(JSONparse) consolelog(json)ltscriptgtltbodygtlthtmlgt
To run the Javascript code I used the Google Chrome browser To get theconsole we selectCustomize and Control GC More tools Developer tools
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
eval and JSONparse
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Importing data as Javascript assignmentimporthtml
lthtmlgtltheadgtlttitlegtJSON importlttitlegtltscript src=personjsgtltscriptgtltheadgtltbodygtltscriptgtdocumentwrite(JSONltttgt+person+ltttgtltbrgt)documentwrite(stringltttgt+JSONstringify(person)+ltttgtltbrgt)consolelog(JSON) consolelog(person)ltscriptgtltbodygtlthtmlgt
personjs
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Well formed and valid JSON files
A JSON file is well formed iff it respects JSONrsquos grammarIs my file well formed service JSONlint - another checker
JSON editor
Similar to XMLrsquos DTD files or schema we can imposeadditional restrictions to the structure of JSON files describingspecial types of data using JSON schema ndash the JSON filesrespecting these additional restrictions are called valid
Github validation JSON Schema Lint JSON Schemavalidator
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Simple examplegraphjson
infoorg0nNodes4nodes[nameAnnx02y02Num1Size100nameBenx02y08Num4Size500nameTimx08y02Num2Size200nameZoex08y08Num3Size400
]links[source0target1Count1Weight100source1target2Count1Weight100source2target3Count1Weight100source1target3Count2Weight300
]
In graphjs the JSON description is assigned to the variable graph
graph = infoorg0nNodes4nodes[
]
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Circular layoutadapted from Brath and Jonker p 257-258
ltDOCTYPE htmlgtlthtmlgtltheadgtltmeta charset=utf-8gtltscript src=graphjsgtltscriptgtlt-- script src=classjsgtltscript --gtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltscriptgt set up the drawing areavar width = 500
height = 500var svg = d3select(body)append(svg)
attr(width width)
attr(height height)
attr(xmlns httpwwww3org2000svg) angle and radius for layout assistancevar ang = 2 MathPI graphnodeslengthvar rad = width 25
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Circular layout
create the linksvar link = svgselectAll(line)data(graphlinks)enter()append(line)style(strokeblue)attr(stroke-width2)attr(x1function(d)return(radMathcos(dsourceang)+5width))attr(y1function(d)return(radMathsin(dsourceang)+5width))attr(x2function(d)return(radMathcos(dtargetang)+5width))attr(y2function(d)return(radMathsin(dtargetang)+5width))
create the nodes and set out in a circular layoutvar node = svgselectAll(circle)data(graphnodes)enter()append(circle)attr(r10)attr(cxfunction(di)return(radMathcos(iang)+5width))attr(cyfunction(di)return(radMathsin(iang)+5width))attr(fillyellow)attr(strokered)
ltscriptgtltbodygt
graphCirclehtml classjson classjs classCirclehtml+ labels classCircleLhtml+ permutation classPjson classPjs classCirclePhtm
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
SVG
ltxml version=10 encoding=UTF-8 standalone=yesgtltsvg width=500 height=500 xmlns=httpwwww3org2000svggtltline stroke-width=2 x1=450 y1=250 x2=250 y2=450 style=stroke bluegtltlinegtltline stroke-width=2 x1=250 y1=450 x2=50 y2=250 style=stroke bluegtltlinegtltline stroke-width=2 x1=50 y1=250 x2=250 y2=50 style=stroke bluegtltlinegtltline stroke-width=2 x1=250 y1=450 x2=250 y2=50 style=stroke bluegtltlinegtltcircle r=10 cx=450 cy=250 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=250 cy=450 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=50 cy=250 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=250 cy=50 fill=yellow stroke=redgtltcirclegtltsvggt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Networks in JSON format basic netJSONclassjson
netJSON basicinfo network class org 1 nNodes 15
nArcs 30 nEdges 13 nWeak 1title borrowing study materialsmeta date October 2015 author V Batagelj
nodes [
id 1 short m02 x 01857 y 02781 size 1 id 2 short m03 x 05482 y 06169 size 1 id 3 short w07 x 02219 y 04526 size 2 id 4 short w09 x 08078 y 03223 size 2
id 14 short m89 x 04000 y 08469 size 1 id 15 short m96 x 03482 y 01778 size 1
]links [
type arc source 6 target 15 weight 1 type arc source 2 target 7 weight 1
type arc source15 target 3 weight 1 type edge source 6 target 12 weight 1
type edge source 4 target 12 weight 1 type edge source 6 target 13 weight 1
]
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON and RTransforming Pajek NET and CLU files in to JSON
nodes[nameMyrielgroup1nameNapoleongroup1 nameBrujongroup4nameMmeHucheloupgroup8]
links[source1target0value1source2target0value8 source76target48value1source76target58value1]
setwd(CUsersBatageljtestpython2012amazon)library(rjson)
net2json lt- function(netFcluFjsonF)net lt- file(netFr) clu lt- file(cluFr)b lt- unlist(strsplit(readLines(netn=1) ))n lt- asinteger(b[length(b)])N lt- readLines(netn=n) nam lt- character(n)for(i in 1n) nam[i] lt- unlist(strsplit(N[i]rsquorsquo))[2]skip lt- readLines(clun=1) C lt- asinteger(readLines(clun=n))skip lt- readLines(netn=1) L lt- readLines(netn=-1)M lt- matrix(asinteger(unlist(strsplit(sub(rsquo^s+rsquorsquorsquoL)rsquos+rsquo)))ncol=3byrow=TRUE)nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(name=nam[i]group=C[i])m lt- nrow(M) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(source=M[i1]-1target=M[i2]-1value=M[i3])data lt- list(nodes=nodslinks=lnks)jstr lt- toJSON(data)json lt- file(jsonFw) cat(jstrfile=json)close(json) close(net) close(clu)
net2json(islandsnetislandscluislandsjson)
islands island 1 island 4 force islands
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
CSV2JSONR
transforming CSV files to JSON file by Vladimir Batagelj June 2016setwd(CUsersbatageljworkPythongraphSVGEUSN)library(rjson)colC lt- c(rep(character4)rep(numeric5)) nas lt- c(NANaN)nodes lt- readcsv2(bibNodesXYcsvencoding=rsquoUTF-8rsquocolClasses=colCnastrings=nas)M lt- factor(nodes$mode) mod lt- levels(M) M lt- asnumeric(M)S lt- factor(nodes$sex) sx lt- levels(S) S lt- asnumeric(S) S[isna(S)] lt- 0links lt- readcsv2(bibLinkscsvencoding=rsquoUTF-8rsquocolClasses=character)F lt- asnumeric(factor(links$fromlevels=nodes$nameordered=TRUE))T lt- asnumeric(factor(links$tolevels=nodes$nameordered=TRUE))R lt- factor(links$relation) rel lt-levels(R) R lt- asnumeric(R)n lt- nrow(nodes) nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(id=iname=nodes$name[i]mode=M[i]
sex=S[i]x=asnumeric(nodes$x[i])1000y=asnumeric(nodes$y[i])1000)m lt- nrow(links) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(type=arcsource=F[i]target=T[i]
rel=R[i]weight=1)meta lt- list(date=June 112016author=Vladimir Batagelj)leg lt- list(mode=modsex=sxrel=rel)inf lt- list(network=biborg=1nNodes=nnArcs=mtitle=Example for EUSNrsquo16legend=legmeta=meta)
data lt- list(netJSON=basicinfo=infnodes=nodslinks=lnks)json lt- file(bibjsonw) cat(toJSON(data)file=json) close(json)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibjson
netJSONbasicinfonetworkbiborg1nNodes16nArcs19titleExample for EUSNrsquo16legendmode[bookjournalpaperpersonpublisherseries]sex[fm]rel[authorOfcitescontainedIneditorOfpublishedBy]
metadateJune 112016authorVladimir Batageljnodes[id1nameBatagelj Vladimirmode4sex2x08091y06537id2nameDoreian Patrickmode4sex2x03585y06791id3nameFerligoj Anuu0161kamode4sex1x06195y06807id4nameGranovetter Markmode4sex2x01456y06605id5nameMoustaki Irinimode4sex1x0783y0228id6nameMrvar Andrejmode4sex2x0478y06301id7nameClustering with relational constraintmode3sex0x06841y03801
id15nameCambridge University Pressmode5sex0x05343y02382id16nameSpringermode5sex0x08846y0174]links[typearcsource1target10rel1weight1typearcsource2target10rel1weight1typearcsource3target10rel1weight1typearcsource1target7rel1weight1typearcsource3target7rel1weight1typearcsource4target8rel1weight1typearcsource4target14rel4weight1
typearcsource10target7rel2weight1typearcsource14target15rel5weight1typearcsource11target16rel5weight1
]
bibjson picture bibV Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON files anddisplaying a network with given nodesrsquo coordinates
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltinput type=rsquofilersquo accept=rsquoapplicationjsonrsquo onchange=rsquoopenFile(event)rsquogtltscriptgtfunction process(graph) set up the drawing areavar width = 500height = 500 s = graphattributesorg
var svg = d3select(body)append(svg)attr(width width)attr(height height)attr(xmlns httpwwww3org2000svg)
draw the linksvar link = svgselectAll(line)data(graphlinks)enter()append(line)style(stroke function(di) return((dtype==arc magenta blue)))attr(stroke-width 2)attr(x1 function(d) return(graphnodes[dsource-s]xwidth))attr(y1 function(d) return(graphnodes[dsource-s]yheight))attr(x2 function(d) return(graphnodes[dtarget-s]xwidth))attr(y2 function(d) return(graphnodes[dtarget-s]yheight))
draw the nodesvar node = svgselectAll(circle)data(graphnodes)enter()append(circle)attr(r 15)attr(cx function(di) return(dxwidth))attr(cy function(di) return(dyheight))attr(fill yellow)attr(stroke red)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
readingadapted from Matt West Reading Files Using The HTML5 FileReader API
var openFile = function(event) var input = eventtargetvar reader = new FileReader()readeronload = function()process(JSONparse(readerresult))
readerreadAsText(inputfiles[0])
ltscriptgtltbodygt
graphReadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON file from serveradapted from Ying Kit Yuen jQuery amp Javascript -ndash Read JSON files on server
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtlttitlegtLoad JSON file from serverlttitlegtlt-- httpeurekaykyueninfo20130925jquery-javascript-read-json-files-on-server --gtltscript src=httpajaxgoogleapiscomajaxlibsjquery1102jqueryminjsgtltscriptgtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltselect id=datagtltoption value=graphjsongtgraphjsonltoptiongtltoption value=classjsongtclassjsonltoptiongt
ltselectgtltbutton id=btngtReadltbuttongtltscriptgtfunction process(graph) set up the drawing area the body of function process is the same as in the previous exampleattr(stroke red)
$(btn)click(function()$getJSON($(data)val() function(json) process(json))
)ltscriptgtltbodygt
graphLoadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Network displayer graphXY
drawNetjs
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
graphXYgen
ltDOCTYPE htmlgtltmeta charset=utf-8gtltbodygtlt-- script src=graphAjsgtltscript --gtltscript src=graphBjsgtltscriptgtlt-- script src=classSjsgtltscript --gtltscript src=drawNetjsgtltscriptgtltscript src=d3d3jsgtltscriptgtltscriptgtvars = graphinfoorgwidth = graphstylecanvaswidthheight = graphstylecanvasheightvar lw = 1if ( typeof graphstyle == rsquoundefinedrsquo ampamp graphstyle) if ( typeof graphstylelink == rsquoundefinedrsquo ampamp graphstylelink )
if ( typeof graphstylelinkwidth == rsquoundefinedrsquo ampamp graphstylelinkwidth ) var lw = graphstylelinkwidth
if(graphnetJSON==rsquogeneralrsquo) var OK = drawNet(graphpersonsdatagraphfrienddata)
else var OK = drawNet(graphnodesgraphlinks)
ltscriptgtltbodygt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Saving SVG pictureS Murray Interactive Data Visualization for the Web p 235
In Google Chrome we draw a picture and open the Developer ToolsIn the Elements we identify the SVG subobject select it copy it intosome text editor and save with extension svg
To enhance the picture or to transform it to other picture formats we
process it using some vector graphics editor
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
To do
bull displayer templates can be based on GUI
bull for a description of multirelational networks we use the rel
attribute in the general version they can be treated asseparate sets of links
bull properties are considered as attributes in the general versionthey can be represented as special objects vector partitionpermutation and cluster
bull use temporal quantities for describing temporal networks
bull extend the list of info-attributes attributes type (simpletemporal) twoModeOrg nStrong nRelations planar
bull icons can be used for visualization of nodes Font AwesomeMaterial Icons tests
bull links can be visually represented in many different ways that canbe described in style
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
to do
bull style can be attached as an attribute also to an element(node link) thus changing the default settings
bull add the visualization of arcs with arrows Directed Graph EditorD3 Tips and Tricks
bull to be included in netD3js vzmetno risanje Force in urejanjeSpringy Matrix with permutations
bull can some attributes be renamed from tail nodeA rarrsource to head nodeB rarr target may be the simplestsolution is a replace in some text editor
bull implement saving of the obtained SVG picture to a file ExportSVG with Style d3jsSVG Export demo
bull include in netJSON elements useful in some applications suchas hooks or inout-ports background image etc
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Sources
Ideas for visualization styles can be found in GoJS - InteractiveDiagrams for JavaScript and HTML Visjs in VisualComplexity
GoJS mdashSankey Diagram Family Tree Logic Circuit DynamicPortsVega - a visualization grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References I
Vladimir Batagelj Complex Networks Visualization of RA Meyersed Encyclopedia of Complexity and Systems Science Springer 20091253-1268
Vladimir Batagelj Andrej Mrvar Pajek manual
Jernej Bodlaj Network Data File Formats in Reda Alhajj Jon Rokne(eds) Encyclopedia of Social Network Analysis and Mining SpringerNew York 2014 p 1076-1091
Richard Brath David Jonker Graph Analysis and VisualizationDiscovering Business Opportunity in Linked Data John Wiley amp SonsIndianapolis Indiana 2015
Emden Gansner Eleftherios Koutsofios Stephen North Drawinggraphs with dot January 26 2006
Scott Murray Interactive Data Visualization for the Web OrsquoReillySebastopol 2013
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References II
Wouter De Nooy Andrej Mrvar Vladimir Batagelj Exploratory SocialNetwork Analysis with Pajek Revised and Expanded Second EditionStructural Analysis in the Social Sciences Cambridge UniversityPress September 2011
Matthew Roughan Jonathan Tuke Unravelling Graph-Exchange FileFormats arXiv150302781 submitted on 10 Mar 2015
Wikipedia JSON
Leland Wilkinson The Grammar of Graphics Springer-Verlag NewYork 2005
V Batagelj JSON amp D3js
- Introduction
- Description of networks
- JSON
- JSON and D3js
- JSON and R
- Displayer
- To do
- References
-
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Bibliographic network ndash picture Pajek
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
XML api ndash JSON api
In near past for description of structured data the XML (ExtensibleMarkup Language) was mostly used In last five years a JSON formatstarted to replace it Google trends
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON
JSON (JavaScript Object Notation) is a text data format thatpreserves the structure of data objects It is ldquocompatiblerdquo with basicdata structures in modern programming languages
The initial version of JSON vas developed by Douglas Crockford(around 2002) He based it on the Javascript notation The principalidea is if we apply on a string (sequence of characters) containing adescription of a data object the Javascript function eval we get asits result the corresponding data object JSON is a programminglanguage independent open code standard for exchange of dataamong programs
Two JSON standards exist
bull The JSON Data Interchange Format Standard ECMA-404October 2013
bull The JavaScript Object Notation (JSON) Data InterchangeFormat Request for Comments 7159 March 2014
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON
firstName JohnlastName SmithisAlive trueage 25address streetAddress 21 2nd Streetcity New Yorkstate NYpostalCode 10021-3100
phoneNumbers [
type homenumber 212 555-1234
type officenumber 646 555-4567
]children []spouse null
Wikipedia
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON
XML is appropriate for describing the structure of textual dataJSON is becoming the first choice for describing structured dataJSON has much simpler grammar is more readable and compatiblewith basic data structures in modern programming languagesAll keys (names of fields) are in double quotes
JSON files are by default based on the encoding Unicode (UTF-8)
The MIME type for JSON files is applicationjson therecommended file extension is json
For work with JSON there exists supporting libraries for all importantprogramming languages httpwwwjsonorg
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
eval and JSONparseevalhtml
lthtmlgtltheadgtlttitlegtJSON eval and parselttitlegtltheadgtltbodygtltscriptgtvar data=rsquo[abca[true null314]bBBBBBc12e+5]rsquoalert(JSON + data)documentwrite(JSONltttgt+data+ltttgtltbrgt)var value = eval(rsquo(rsquo + data + rsquo)rsquo)consolelog(eval) consolelog(value)documentwrite(evalltttgt+JSONstringify(value)+ltttgtltbrgt)var json = JSONparse(data)consolelog(JSONparse) consolelog(json)ltscriptgtltbodygtlthtmlgt
To run the Javascript code I used the Google Chrome browser To get theconsole we selectCustomize and Control GC More tools Developer tools
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
eval and JSONparse
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Importing data as Javascript assignmentimporthtml
lthtmlgtltheadgtlttitlegtJSON importlttitlegtltscript src=personjsgtltscriptgtltheadgtltbodygtltscriptgtdocumentwrite(JSONltttgt+person+ltttgtltbrgt)documentwrite(stringltttgt+JSONstringify(person)+ltttgtltbrgt)consolelog(JSON) consolelog(person)ltscriptgtltbodygtlthtmlgt
personjs
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Well formed and valid JSON files
A JSON file is well formed iff it respects JSONrsquos grammarIs my file well formed service JSONlint - another checker
JSON editor
Similar to XMLrsquos DTD files or schema we can imposeadditional restrictions to the structure of JSON files describingspecial types of data using JSON schema ndash the JSON filesrespecting these additional restrictions are called valid
Github validation JSON Schema Lint JSON Schemavalidator
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Simple examplegraphjson
infoorg0nNodes4nodes[nameAnnx02y02Num1Size100nameBenx02y08Num4Size500nameTimx08y02Num2Size200nameZoex08y08Num3Size400
]links[source0target1Count1Weight100source1target2Count1Weight100source2target3Count1Weight100source1target3Count2Weight300
]
In graphjs the JSON description is assigned to the variable graph
graph = infoorg0nNodes4nodes[
]
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Circular layoutadapted from Brath and Jonker p 257-258
ltDOCTYPE htmlgtlthtmlgtltheadgtltmeta charset=utf-8gtltscript src=graphjsgtltscriptgtlt-- script src=classjsgtltscript --gtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltscriptgt set up the drawing areavar width = 500
height = 500var svg = d3select(body)append(svg)
attr(width width)
attr(height height)
attr(xmlns httpwwww3org2000svg) angle and radius for layout assistancevar ang = 2 MathPI graphnodeslengthvar rad = width 25
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Circular layout
create the linksvar link = svgselectAll(line)data(graphlinks)enter()append(line)style(strokeblue)attr(stroke-width2)attr(x1function(d)return(radMathcos(dsourceang)+5width))attr(y1function(d)return(radMathsin(dsourceang)+5width))attr(x2function(d)return(radMathcos(dtargetang)+5width))attr(y2function(d)return(radMathsin(dtargetang)+5width))
create the nodes and set out in a circular layoutvar node = svgselectAll(circle)data(graphnodes)enter()append(circle)attr(r10)attr(cxfunction(di)return(radMathcos(iang)+5width))attr(cyfunction(di)return(radMathsin(iang)+5width))attr(fillyellow)attr(strokered)
ltscriptgtltbodygt
graphCirclehtml classjson classjs classCirclehtml+ labels classCircleLhtml+ permutation classPjson classPjs classCirclePhtm
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
SVG
ltxml version=10 encoding=UTF-8 standalone=yesgtltsvg width=500 height=500 xmlns=httpwwww3org2000svggtltline stroke-width=2 x1=450 y1=250 x2=250 y2=450 style=stroke bluegtltlinegtltline stroke-width=2 x1=250 y1=450 x2=50 y2=250 style=stroke bluegtltlinegtltline stroke-width=2 x1=50 y1=250 x2=250 y2=50 style=stroke bluegtltlinegtltline stroke-width=2 x1=250 y1=450 x2=250 y2=50 style=stroke bluegtltlinegtltcircle r=10 cx=450 cy=250 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=250 cy=450 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=50 cy=250 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=250 cy=50 fill=yellow stroke=redgtltcirclegtltsvggt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Networks in JSON format basic netJSONclassjson
netJSON basicinfo network class org 1 nNodes 15
nArcs 30 nEdges 13 nWeak 1title borrowing study materialsmeta date October 2015 author V Batagelj
nodes [
id 1 short m02 x 01857 y 02781 size 1 id 2 short m03 x 05482 y 06169 size 1 id 3 short w07 x 02219 y 04526 size 2 id 4 short w09 x 08078 y 03223 size 2
id 14 short m89 x 04000 y 08469 size 1 id 15 short m96 x 03482 y 01778 size 1
]links [
type arc source 6 target 15 weight 1 type arc source 2 target 7 weight 1
type arc source15 target 3 weight 1 type edge source 6 target 12 weight 1
type edge source 4 target 12 weight 1 type edge source 6 target 13 weight 1
]
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON and RTransforming Pajek NET and CLU files in to JSON
nodes[nameMyrielgroup1nameNapoleongroup1 nameBrujongroup4nameMmeHucheloupgroup8]
links[source1target0value1source2target0value8 source76target48value1source76target58value1]
setwd(CUsersBatageljtestpython2012amazon)library(rjson)
net2json lt- function(netFcluFjsonF)net lt- file(netFr) clu lt- file(cluFr)b lt- unlist(strsplit(readLines(netn=1) ))n lt- asinteger(b[length(b)])N lt- readLines(netn=n) nam lt- character(n)for(i in 1n) nam[i] lt- unlist(strsplit(N[i]rsquorsquo))[2]skip lt- readLines(clun=1) C lt- asinteger(readLines(clun=n))skip lt- readLines(netn=1) L lt- readLines(netn=-1)M lt- matrix(asinteger(unlist(strsplit(sub(rsquo^s+rsquorsquorsquoL)rsquos+rsquo)))ncol=3byrow=TRUE)nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(name=nam[i]group=C[i])m lt- nrow(M) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(source=M[i1]-1target=M[i2]-1value=M[i3])data lt- list(nodes=nodslinks=lnks)jstr lt- toJSON(data)json lt- file(jsonFw) cat(jstrfile=json)close(json) close(net) close(clu)
net2json(islandsnetislandscluislandsjson)
islands island 1 island 4 force islands
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
CSV2JSONR
transforming CSV files to JSON file by Vladimir Batagelj June 2016setwd(CUsersbatageljworkPythongraphSVGEUSN)library(rjson)colC lt- c(rep(character4)rep(numeric5)) nas lt- c(NANaN)nodes lt- readcsv2(bibNodesXYcsvencoding=rsquoUTF-8rsquocolClasses=colCnastrings=nas)M lt- factor(nodes$mode) mod lt- levels(M) M lt- asnumeric(M)S lt- factor(nodes$sex) sx lt- levels(S) S lt- asnumeric(S) S[isna(S)] lt- 0links lt- readcsv2(bibLinkscsvencoding=rsquoUTF-8rsquocolClasses=character)F lt- asnumeric(factor(links$fromlevels=nodes$nameordered=TRUE))T lt- asnumeric(factor(links$tolevels=nodes$nameordered=TRUE))R lt- factor(links$relation) rel lt-levels(R) R lt- asnumeric(R)n lt- nrow(nodes) nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(id=iname=nodes$name[i]mode=M[i]
sex=S[i]x=asnumeric(nodes$x[i])1000y=asnumeric(nodes$y[i])1000)m lt- nrow(links) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(type=arcsource=F[i]target=T[i]
rel=R[i]weight=1)meta lt- list(date=June 112016author=Vladimir Batagelj)leg lt- list(mode=modsex=sxrel=rel)inf lt- list(network=biborg=1nNodes=nnArcs=mtitle=Example for EUSNrsquo16legend=legmeta=meta)
data lt- list(netJSON=basicinfo=infnodes=nodslinks=lnks)json lt- file(bibjsonw) cat(toJSON(data)file=json) close(json)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibjson
netJSONbasicinfonetworkbiborg1nNodes16nArcs19titleExample for EUSNrsquo16legendmode[bookjournalpaperpersonpublisherseries]sex[fm]rel[authorOfcitescontainedIneditorOfpublishedBy]
metadateJune 112016authorVladimir Batageljnodes[id1nameBatagelj Vladimirmode4sex2x08091y06537id2nameDoreian Patrickmode4sex2x03585y06791id3nameFerligoj Anuu0161kamode4sex1x06195y06807id4nameGranovetter Markmode4sex2x01456y06605id5nameMoustaki Irinimode4sex1x0783y0228id6nameMrvar Andrejmode4sex2x0478y06301id7nameClustering with relational constraintmode3sex0x06841y03801
id15nameCambridge University Pressmode5sex0x05343y02382id16nameSpringermode5sex0x08846y0174]links[typearcsource1target10rel1weight1typearcsource2target10rel1weight1typearcsource3target10rel1weight1typearcsource1target7rel1weight1typearcsource3target7rel1weight1typearcsource4target8rel1weight1typearcsource4target14rel4weight1
typearcsource10target7rel2weight1typearcsource14target15rel5weight1typearcsource11target16rel5weight1
]
bibjson picture bibV Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON files anddisplaying a network with given nodesrsquo coordinates
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltinput type=rsquofilersquo accept=rsquoapplicationjsonrsquo onchange=rsquoopenFile(event)rsquogtltscriptgtfunction process(graph) set up the drawing areavar width = 500height = 500 s = graphattributesorg
var svg = d3select(body)append(svg)attr(width width)attr(height height)attr(xmlns httpwwww3org2000svg)
draw the linksvar link = svgselectAll(line)data(graphlinks)enter()append(line)style(stroke function(di) return((dtype==arc magenta blue)))attr(stroke-width 2)attr(x1 function(d) return(graphnodes[dsource-s]xwidth))attr(y1 function(d) return(graphnodes[dsource-s]yheight))attr(x2 function(d) return(graphnodes[dtarget-s]xwidth))attr(y2 function(d) return(graphnodes[dtarget-s]yheight))
draw the nodesvar node = svgselectAll(circle)data(graphnodes)enter()append(circle)attr(r 15)attr(cx function(di) return(dxwidth))attr(cy function(di) return(dyheight))attr(fill yellow)attr(stroke red)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
readingadapted from Matt West Reading Files Using The HTML5 FileReader API
var openFile = function(event) var input = eventtargetvar reader = new FileReader()readeronload = function()process(JSONparse(readerresult))
readerreadAsText(inputfiles[0])
ltscriptgtltbodygt
graphReadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON file from serveradapted from Ying Kit Yuen jQuery amp Javascript -ndash Read JSON files on server
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtlttitlegtLoad JSON file from serverlttitlegtlt-- httpeurekaykyueninfo20130925jquery-javascript-read-json-files-on-server --gtltscript src=httpajaxgoogleapiscomajaxlibsjquery1102jqueryminjsgtltscriptgtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltselect id=datagtltoption value=graphjsongtgraphjsonltoptiongtltoption value=classjsongtclassjsonltoptiongt
ltselectgtltbutton id=btngtReadltbuttongtltscriptgtfunction process(graph) set up the drawing area the body of function process is the same as in the previous exampleattr(stroke red)
$(btn)click(function()$getJSON($(data)val() function(json) process(json))
)ltscriptgtltbodygt
graphLoadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Network displayer graphXY
drawNetjs
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
graphXYgen
ltDOCTYPE htmlgtltmeta charset=utf-8gtltbodygtlt-- script src=graphAjsgtltscript --gtltscript src=graphBjsgtltscriptgtlt-- script src=classSjsgtltscript --gtltscript src=drawNetjsgtltscriptgtltscript src=d3d3jsgtltscriptgtltscriptgtvars = graphinfoorgwidth = graphstylecanvaswidthheight = graphstylecanvasheightvar lw = 1if ( typeof graphstyle == rsquoundefinedrsquo ampamp graphstyle) if ( typeof graphstylelink == rsquoundefinedrsquo ampamp graphstylelink )
if ( typeof graphstylelinkwidth == rsquoundefinedrsquo ampamp graphstylelinkwidth ) var lw = graphstylelinkwidth
if(graphnetJSON==rsquogeneralrsquo) var OK = drawNet(graphpersonsdatagraphfrienddata)
else var OK = drawNet(graphnodesgraphlinks)
ltscriptgtltbodygt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Saving SVG pictureS Murray Interactive Data Visualization for the Web p 235
In Google Chrome we draw a picture and open the Developer ToolsIn the Elements we identify the SVG subobject select it copy it intosome text editor and save with extension svg
To enhance the picture or to transform it to other picture formats we
process it using some vector graphics editor
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
To do
bull displayer templates can be based on GUI
bull for a description of multirelational networks we use the rel
attribute in the general version they can be treated asseparate sets of links
bull properties are considered as attributes in the general versionthey can be represented as special objects vector partitionpermutation and cluster
bull use temporal quantities for describing temporal networks
bull extend the list of info-attributes attributes type (simpletemporal) twoModeOrg nStrong nRelations planar
bull icons can be used for visualization of nodes Font AwesomeMaterial Icons tests
bull links can be visually represented in many different ways that canbe described in style
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
to do
bull style can be attached as an attribute also to an element(node link) thus changing the default settings
bull add the visualization of arcs with arrows Directed Graph EditorD3 Tips and Tricks
bull to be included in netD3js vzmetno risanje Force in urejanjeSpringy Matrix with permutations
bull can some attributes be renamed from tail nodeA rarrsource to head nodeB rarr target may be the simplestsolution is a replace in some text editor
bull implement saving of the obtained SVG picture to a file ExportSVG with Style d3jsSVG Export demo
bull include in netJSON elements useful in some applications suchas hooks or inout-ports background image etc
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Sources
Ideas for visualization styles can be found in GoJS - InteractiveDiagrams for JavaScript and HTML Visjs in VisualComplexity
GoJS mdashSankey Diagram Family Tree Logic Circuit DynamicPortsVega - a visualization grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References I
Vladimir Batagelj Complex Networks Visualization of RA Meyersed Encyclopedia of Complexity and Systems Science Springer 20091253-1268
Vladimir Batagelj Andrej Mrvar Pajek manual
Jernej Bodlaj Network Data File Formats in Reda Alhajj Jon Rokne(eds) Encyclopedia of Social Network Analysis and Mining SpringerNew York 2014 p 1076-1091
Richard Brath David Jonker Graph Analysis and VisualizationDiscovering Business Opportunity in Linked Data John Wiley amp SonsIndianapolis Indiana 2015
Emden Gansner Eleftherios Koutsofios Stephen North Drawinggraphs with dot January 26 2006
Scott Murray Interactive Data Visualization for the Web OrsquoReillySebastopol 2013
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References II
Wouter De Nooy Andrej Mrvar Vladimir Batagelj Exploratory SocialNetwork Analysis with Pajek Revised and Expanded Second EditionStructural Analysis in the Social Sciences Cambridge UniversityPress September 2011
Matthew Roughan Jonathan Tuke Unravelling Graph-Exchange FileFormats arXiv150302781 submitted on 10 Mar 2015
Wikipedia JSON
Leland Wilkinson The Grammar of Graphics Springer-Verlag NewYork 2005
V Batagelj JSON amp D3js
- Introduction
- Description of networks
- JSON
- JSON and D3js
- JSON and R
- Displayer
- To do
- References
-
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
XML api ndash JSON api
In near past for description of structured data the XML (ExtensibleMarkup Language) was mostly used In last five years a JSON formatstarted to replace it Google trends
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON
JSON (JavaScript Object Notation) is a text data format thatpreserves the structure of data objects It is ldquocompatiblerdquo with basicdata structures in modern programming languages
The initial version of JSON vas developed by Douglas Crockford(around 2002) He based it on the Javascript notation The principalidea is if we apply on a string (sequence of characters) containing adescription of a data object the Javascript function eval we get asits result the corresponding data object JSON is a programminglanguage independent open code standard for exchange of dataamong programs
Two JSON standards exist
bull The JSON Data Interchange Format Standard ECMA-404October 2013
bull The JavaScript Object Notation (JSON) Data InterchangeFormat Request for Comments 7159 March 2014
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON
firstName JohnlastName SmithisAlive trueage 25address streetAddress 21 2nd Streetcity New Yorkstate NYpostalCode 10021-3100
phoneNumbers [
type homenumber 212 555-1234
type officenumber 646 555-4567
]children []spouse null
Wikipedia
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON
XML is appropriate for describing the structure of textual dataJSON is becoming the first choice for describing structured dataJSON has much simpler grammar is more readable and compatiblewith basic data structures in modern programming languagesAll keys (names of fields) are in double quotes
JSON files are by default based on the encoding Unicode (UTF-8)
The MIME type for JSON files is applicationjson therecommended file extension is json
For work with JSON there exists supporting libraries for all importantprogramming languages httpwwwjsonorg
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
eval and JSONparseevalhtml
lthtmlgtltheadgtlttitlegtJSON eval and parselttitlegtltheadgtltbodygtltscriptgtvar data=rsquo[abca[true null314]bBBBBBc12e+5]rsquoalert(JSON + data)documentwrite(JSONltttgt+data+ltttgtltbrgt)var value = eval(rsquo(rsquo + data + rsquo)rsquo)consolelog(eval) consolelog(value)documentwrite(evalltttgt+JSONstringify(value)+ltttgtltbrgt)var json = JSONparse(data)consolelog(JSONparse) consolelog(json)ltscriptgtltbodygtlthtmlgt
To run the Javascript code I used the Google Chrome browser To get theconsole we selectCustomize and Control GC More tools Developer tools
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
eval and JSONparse
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Importing data as Javascript assignmentimporthtml
lthtmlgtltheadgtlttitlegtJSON importlttitlegtltscript src=personjsgtltscriptgtltheadgtltbodygtltscriptgtdocumentwrite(JSONltttgt+person+ltttgtltbrgt)documentwrite(stringltttgt+JSONstringify(person)+ltttgtltbrgt)consolelog(JSON) consolelog(person)ltscriptgtltbodygtlthtmlgt
personjs
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Well formed and valid JSON files
A JSON file is well formed iff it respects JSONrsquos grammarIs my file well formed service JSONlint - another checker
JSON editor
Similar to XMLrsquos DTD files or schema we can imposeadditional restrictions to the structure of JSON files describingspecial types of data using JSON schema ndash the JSON filesrespecting these additional restrictions are called valid
Github validation JSON Schema Lint JSON Schemavalidator
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Simple examplegraphjson
infoorg0nNodes4nodes[nameAnnx02y02Num1Size100nameBenx02y08Num4Size500nameTimx08y02Num2Size200nameZoex08y08Num3Size400
]links[source0target1Count1Weight100source1target2Count1Weight100source2target3Count1Weight100source1target3Count2Weight300
]
In graphjs the JSON description is assigned to the variable graph
graph = infoorg0nNodes4nodes[
]
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Circular layoutadapted from Brath and Jonker p 257-258
ltDOCTYPE htmlgtlthtmlgtltheadgtltmeta charset=utf-8gtltscript src=graphjsgtltscriptgtlt-- script src=classjsgtltscript --gtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltscriptgt set up the drawing areavar width = 500
height = 500var svg = d3select(body)append(svg)
attr(width width)
attr(height height)
attr(xmlns httpwwww3org2000svg) angle and radius for layout assistancevar ang = 2 MathPI graphnodeslengthvar rad = width 25
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Circular layout
create the linksvar link = svgselectAll(line)data(graphlinks)enter()append(line)style(strokeblue)attr(stroke-width2)attr(x1function(d)return(radMathcos(dsourceang)+5width))attr(y1function(d)return(radMathsin(dsourceang)+5width))attr(x2function(d)return(radMathcos(dtargetang)+5width))attr(y2function(d)return(radMathsin(dtargetang)+5width))
create the nodes and set out in a circular layoutvar node = svgselectAll(circle)data(graphnodes)enter()append(circle)attr(r10)attr(cxfunction(di)return(radMathcos(iang)+5width))attr(cyfunction(di)return(radMathsin(iang)+5width))attr(fillyellow)attr(strokered)
ltscriptgtltbodygt
graphCirclehtml classjson classjs classCirclehtml+ labels classCircleLhtml+ permutation classPjson classPjs classCirclePhtm
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
SVG
ltxml version=10 encoding=UTF-8 standalone=yesgtltsvg width=500 height=500 xmlns=httpwwww3org2000svggtltline stroke-width=2 x1=450 y1=250 x2=250 y2=450 style=stroke bluegtltlinegtltline stroke-width=2 x1=250 y1=450 x2=50 y2=250 style=stroke bluegtltlinegtltline stroke-width=2 x1=50 y1=250 x2=250 y2=50 style=stroke bluegtltlinegtltline stroke-width=2 x1=250 y1=450 x2=250 y2=50 style=stroke bluegtltlinegtltcircle r=10 cx=450 cy=250 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=250 cy=450 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=50 cy=250 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=250 cy=50 fill=yellow stroke=redgtltcirclegtltsvggt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Networks in JSON format basic netJSONclassjson
netJSON basicinfo network class org 1 nNodes 15
nArcs 30 nEdges 13 nWeak 1title borrowing study materialsmeta date October 2015 author V Batagelj
nodes [
id 1 short m02 x 01857 y 02781 size 1 id 2 short m03 x 05482 y 06169 size 1 id 3 short w07 x 02219 y 04526 size 2 id 4 short w09 x 08078 y 03223 size 2
id 14 short m89 x 04000 y 08469 size 1 id 15 short m96 x 03482 y 01778 size 1
]links [
type arc source 6 target 15 weight 1 type arc source 2 target 7 weight 1
type arc source15 target 3 weight 1 type edge source 6 target 12 weight 1
type edge source 4 target 12 weight 1 type edge source 6 target 13 weight 1
]
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON and RTransforming Pajek NET and CLU files in to JSON
nodes[nameMyrielgroup1nameNapoleongroup1 nameBrujongroup4nameMmeHucheloupgroup8]
links[source1target0value1source2target0value8 source76target48value1source76target58value1]
setwd(CUsersBatageljtestpython2012amazon)library(rjson)
net2json lt- function(netFcluFjsonF)net lt- file(netFr) clu lt- file(cluFr)b lt- unlist(strsplit(readLines(netn=1) ))n lt- asinteger(b[length(b)])N lt- readLines(netn=n) nam lt- character(n)for(i in 1n) nam[i] lt- unlist(strsplit(N[i]rsquorsquo))[2]skip lt- readLines(clun=1) C lt- asinteger(readLines(clun=n))skip lt- readLines(netn=1) L lt- readLines(netn=-1)M lt- matrix(asinteger(unlist(strsplit(sub(rsquo^s+rsquorsquorsquoL)rsquos+rsquo)))ncol=3byrow=TRUE)nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(name=nam[i]group=C[i])m lt- nrow(M) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(source=M[i1]-1target=M[i2]-1value=M[i3])data lt- list(nodes=nodslinks=lnks)jstr lt- toJSON(data)json lt- file(jsonFw) cat(jstrfile=json)close(json) close(net) close(clu)
net2json(islandsnetislandscluislandsjson)
islands island 1 island 4 force islands
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
CSV2JSONR
transforming CSV files to JSON file by Vladimir Batagelj June 2016setwd(CUsersbatageljworkPythongraphSVGEUSN)library(rjson)colC lt- c(rep(character4)rep(numeric5)) nas lt- c(NANaN)nodes lt- readcsv2(bibNodesXYcsvencoding=rsquoUTF-8rsquocolClasses=colCnastrings=nas)M lt- factor(nodes$mode) mod lt- levels(M) M lt- asnumeric(M)S lt- factor(nodes$sex) sx lt- levels(S) S lt- asnumeric(S) S[isna(S)] lt- 0links lt- readcsv2(bibLinkscsvencoding=rsquoUTF-8rsquocolClasses=character)F lt- asnumeric(factor(links$fromlevels=nodes$nameordered=TRUE))T lt- asnumeric(factor(links$tolevels=nodes$nameordered=TRUE))R lt- factor(links$relation) rel lt-levels(R) R lt- asnumeric(R)n lt- nrow(nodes) nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(id=iname=nodes$name[i]mode=M[i]
sex=S[i]x=asnumeric(nodes$x[i])1000y=asnumeric(nodes$y[i])1000)m lt- nrow(links) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(type=arcsource=F[i]target=T[i]
rel=R[i]weight=1)meta lt- list(date=June 112016author=Vladimir Batagelj)leg lt- list(mode=modsex=sxrel=rel)inf lt- list(network=biborg=1nNodes=nnArcs=mtitle=Example for EUSNrsquo16legend=legmeta=meta)
data lt- list(netJSON=basicinfo=infnodes=nodslinks=lnks)json lt- file(bibjsonw) cat(toJSON(data)file=json) close(json)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibjson
netJSONbasicinfonetworkbiborg1nNodes16nArcs19titleExample for EUSNrsquo16legendmode[bookjournalpaperpersonpublisherseries]sex[fm]rel[authorOfcitescontainedIneditorOfpublishedBy]
metadateJune 112016authorVladimir Batageljnodes[id1nameBatagelj Vladimirmode4sex2x08091y06537id2nameDoreian Patrickmode4sex2x03585y06791id3nameFerligoj Anuu0161kamode4sex1x06195y06807id4nameGranovetter Markmode4sex2x01456y06605id5nameMoustaki Irinimode4sex1x0783y0228id6nameMrvar Andrejmode4sex2x0478y06301id7nameClustering with relational constraintmode3sex0x06841y03801
id15nameCambridge University Pressmode5sex0x05343y02382id16nameSpringermode5sex0x08846y0174]links[typearcsource1target10rel1weight1typearcsource2target10rel1weight1typearcsource3target10rel1weight1typearcsource1target7rel1weight1typearcsource3target7rel1weight1typearcsource4target8rel1weight1typearcsource4target14rel4weight1
typearcsource10target7rel2weight1typearcsource14target15rel5weight1typearcsource11target16rel5weight1
]
bibjson picture bibV Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON files anddisplaying a network with given nodesrsquo coordinates
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltinput type=rsquofilersquo accept=rsquoapplicationjsonrsquo onchange=rsquoopenFile(event)rsquogtltscriptgtfunction process(graph) set up the drawing areavar width = 500height = 500 s = graphattributesorg
var svg = d3select(body)append(svg)attr(width width)attr(height height)attr(xmlns httpwwww3org2000svg)
draw the linksvar link = svgselectAll(line)data(graphlinks)enter()append(line)style(stroke function(di) return((dtype==arc magenta blue)))attr(stroke-width 2)attr(x1 function(d) return(graphnodes[dsource-s]xwidth))attr(y1 function(d) return(graphnodes[dsource-s]yheight))attr(x2 function(d) return(graphnodes[dtarget-s]xwidth))attr(y2 function(d) return(graphnodes[dtarget-s]yheight))
draw the nodesvar node = svgselectAll(circle)data(graphnodes)enter()append(circle)attr(r 15)attr(cx function(di) return(dxwidth))attr(cy function(di) return(dyheight))attr(fill yellow)attr(stroke red)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
readingadapted from Matt West Reading Files Using The HTML5 FileReader API
var openFile = function(event) var input = eventtargetvar reader = new FileReader()readeronload = function()process(JSONparse(readerresult))
readerreadAsText(inputfiles[0])
ltscriptgtltbodygt
graphReadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON file from serveradapted from Ying Kit Yuen jQuery amp Javascript -ndash Read JSON files on server
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtlttitlegtLoad JSON file from serverlttitlegtlt-- httpeurekaykyueninfo20130925jquery-javascript-read-json-files-on-server --gtltscript src=httpajaxgoogleapiscomajaxlibsjquery1102jqueryminjsgtltscriptgtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltselect id=datagtltoption value=graphjsongtgraphjsonltoptiongtltoption value=classjsongtclassjsonltoptiongt
ltselectgtltbutton id=btngtReadltbuttongtltscriptgtfunction process(graph) set up the drawing area the body of function process is the same as in the previous exampleattr(stroke red)
$(btn)click(function()$getJSON($(data)val() function(json) process(json))
)ltscriptgtltbodygt
graphLoadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Network displayer graphXY
drawNetjs
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
graphXYgen
ltDOCTYPE htmlgtltmeta charset=utf-8gtltbodygtlt-- script src=graphAjsgtltscript --gtltscript src=graphBjsgtltscriptgtlt-- script src=classSjsgtltscript --gtltscript src=drawNetjsgtltscriptgtltscript src=d3d3jsgtltscriptgtltscriptgtvars = graphinfoorgwidth = graphstylecanvaswidthheight = graphstylecanvasheightvar lw = 1if ( typeof graphstyle == rsquoundefinedrsquo ampamp graphstyle) if ( typeof graphstylelink == rsquoundefinedrsquo ampamp graphstylelink )
if ( typeof graphstylelinkwidth == rsquoundefinedrsquo ampamp graphstylelinkwidth ) var lw = graphstylelinkwidth
if(graphnetJSON==rsquogeneralrsquo) var OK = drawNet(graphpersonsdatagraphfrienddata)
else var OK = drawNet(graphnodesgraphlinks)
ltscriptgtltbodygt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Saving SVG pictureS Murray Interactive Data Visualization for the Web p 235
In Google Chrome we draw a picture and open the Developer ToolsIn the Elements we identify the SVG subobject select it copy it intosome text editor and save with extension svg
To enhance the picture or to transform it to other picture formats we
process it using some vector graphics editor
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
To do
bull displayer templates can be based on GUI
bull for a description of multirelational networks we use the rel
attribute in the general version they can be treated asseparate sets of links
bull properties are considered as attributes in the general versionthey can be represented as special objects vector partitionpermutation and cluster
bull use temporal quantities for describing temporal networks
bull extend the list of info-attributes attributes type (simpletemporal) twoModeOrg nStrong nRelations planar
bull icons can be used for visualization of nodes Font AwesomeMaterial Icons tests
bull links can be visually represented in many different ways that canbe described in style
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
to do
bull style can be attached as an attribute also to an element(node link) thus changing the default settings
bull add the visualization of arcs with arrows Directed Graph EditorD3 Tips and Tricks
bull to be included in netD3js vzmetno risanje Force in urejanjeSpringy Matrix with permutations
bull can some attributes be renamed from tail nodeA rarrsource to head nodeB rarr target may be the simplestsolution is a replace in some text editor
bull implement saving of the obtained SVG picture to a file ExportSVG with Style d3jsSVG Export demo
bull include in netJSON elements useful in some applications suchas hooks or inout-ports background image etc
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Sources
Ideas for visualization styles can be found in GoJS - InteractiveDiagrams for JavaScript and HTML Visjs in VisualComplexity
GoJS mdashSankey Diagram Family Tree Logic Circuit DynamicPortsVega - a visualization grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References I
Vladimir Batagelj Complex Networks Visualization of RA Meyersed Encyclopedia of Complexity and Systems Science Springer 20091253-1268
Vladimir Batagelj Andrej Mrvar Pajek manual
Jernej Bodlaj Network Data File Formats in Reda Alhajj Jon Rokne(eds) Encyclopedia of Social Network Analysis and Mining SpringerNew York 2014 p 1076-1091
Richard Brath David Jonker Graph Analysis and VisualizationDiscovering Business Opportunity in Linked Data John Wiley amp SonsIndianapolis Indiana 2015
Emden Gansner Eleftherios Koutsofios Stephen North Drawinggraphs with dot January 26 2006
Scott Murray Interactive Data Visualization for the Web OrsquoReillySebastopol 2013
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References II
Wouter De Nooy Andrej Mrvar Vladimir Batagelj Exploratory SocialNetwork Analysis with Pajek Revised and Expanded Second EditionStructural Analysis in the Social Sciences Cambridge UniversityPress September 2011
Matthew Roughan Jonathan Tuke Unravelling Graph-Exchange FileFormats arXiv150302781 submitted on 10 Mar 2015
Wikipedia JSON
Leland Wilkinson The Grammar of Graphics Springer-Verlag NewYork 2005
V Batagelj JSON amp D3js
- Introduction
- Description of networks
- JSON
- JSON and D3js
- JSON and R
- Displayer
- To do
- References
-
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON
JSON (JavaScript Object Notation) is a text data format thatpreserves the structure of data objects It is ldquocompatiblerdquo with basicdata structures in modern programming languages
The initial version of JSON vas developed by Douglas Crockford(around 2002) He based it on the Javascript notation The principalidea is if we apply on a string (sequence of characters) containing adescription of a data object the Javascript function eval we get asits result the corresponding data object JSON is a programminglanguage independent open code standard for exchange of dataamong programs
Two JSON standards exist
bull The JSON Data Interchange Format Standard ECMA-404October 2013
bull The JavaScript Object Notation (JSON) Data InterchangeFormat Request for Comments 7159 March 2014
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON
firstName JohnlastName SmithisAlive trueage 25address streetAddress 21 2nd Streetcity New Yorkstate NYpostalCode 10021-3100
phoneNumbers [
type homenumber 212 555-1234
type officenumber 646 555-4567
]children []spouse null
Wikipedia
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON
XML is appropriate for describing the structure of textual dataJSON is becoming the first choice for describing structured dataJSON has much simpler grammar is more readable and compatiblewith basic data structures in modern programming languagesAll keys (names of fields) are in double quotes
JSON files are by default based on the encoding Unicode (UTF-8)
The MIME type for JSON files is applicationjson therecommended file extension is json
For work with JSON there exists supporting libraries for all importantprogramming languages httpwwwjsonorg
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
eval and JSONparseevalhtml
lthtmlgtltheadgtlttitlegtJSON eval and parselttitlegtltheadgtltbodygtltscriptgtvar data=rsquo[abca[true null314]bBBBBBc12e+5]rsquoalert(JSON + data)documentwrite(JSONltttgt+data+ltttgtltbrgt)var value = eval(rsquo(rsquo + data + rsquo)rsquo)consolelog(eval) consolelog(value)documentwrite(evalltttgt+JSONstringify(value)+ltttgtltbrgt)var json = JSONparse(data)consolelog(JSONparse) consolelog(json)ltscriptgtltbodygtlthtmlgt
To run the Javascript code I used the Google Chrome browser To get theconsole we selectCustomize and Control GC More tools Developer tools
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
eval and JSONparse
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Importing data as Javascript assignmentimporthtml
lthtmlgtltheadgtlttitlegtJSON importlttitlegtltscript src=personjsgtltscriptgtltheadgtltbodygtltscriptgtdocumentwrite(JSONltttgt+person+ltttgtltbrgt)documentwrite(stringltttgt+JSONstringify(person)+ltttgtltbrgt)consolelog(JSON) consolelog(person)ltscriptgtltbodygtlthtmlgt
personjs
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Well formed and valid JSON files
A JSON file is well formed iff it respects JSONrsquos grammarIs my file well formed service JSONlint - another checker
JSON editor
Similar to XMLrsquos DTD files or schema we can imposeadditional restrictions to the structure of JSON files describingspecial types of data using JSON schema ndash the JSON filesrespecting these additional restrictions are called valid
Github validation JSON Schema Lint JSON Schemavalidator
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Simple examplegraphjson
infoorg0nNodes4nodes[nameAnnx02y02Num1Size100nameBenx02y08Num4Size500nameTimx08y02Num2Size200nameZoex08y08Num3Size400
]links[source0target1Count1Weight100source1target2Count1Weight100source2target3Count1Weight100source1target3Count2Weight300
]
In graphjs the JSON description is assigned to the variable graph
graph = infoorg0nNodes4nodes[
]
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Circular layoutadapted from Brath and Jonker p 257-258
ltDOCTYPE htmlgtlthtmlgtltheadgtltmeta charset=utf-8gtltscript src=graphjsgtltscriptgtlt-- script src=classjsgtltscript --gtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltscriptgt set up the drawing areavar width = 500
height = 500var svg = d3select(body)append(svg)
attr(width width)
attr(height height)
attr(xmlns httpwwww3org2000svg) angle and radius for layout assistancevar ang = 2 MathPI graphnodeslengthvar rad = width 25
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Circular layout
create the linksvar link = svgselectAll(line)data(graphlinks)enter()append(line)style(strokeblue)attr(stroke-width2)attr(x1function(d)return(radMathcos(dsourceang)+5width))attr(y1function(d)return(radMathsin(dsourceang)+5width))attr(x2function(d)return(radMathcos(dtargetang)+5width))attr(y2function(d)return(radMathsin(dtargetang)+5width))
create the nodes and set out in a circular layoutvar node = svgselectAll(circle)data(graphnodes)enter()append(circle)attr(r10)attr(cxfunction(di)return(radMathcos(iang)+5width))attr(cyfunction(di)return(radMathsin(iang)+5width))attr(fillyellow)attr(strokered)
ltscriptgtltbodygt
graphCirclehtml classjson classjs classCirclehtml+ labels classCircleLhtml+ permutation classPjson classPjs classCirclePhtm
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
SVG
ltxml version=10 encoding=UTF-8 standalone=yesgtltsvg width=500 height=500 xmlns=httpwwww3org2000svggtltline stroke-width=2 x1=450 y1=250 x2=250 y2=450 style=stroke bluegtltlinegtltline stroke-width=2 x1=250 y1=450 x2=50 y2=250 style=stroke bluegtltlinegtltline stroke-width=2 x1=50 y1=250 x2=250 y2=50 style=stroke bluegtltlinegtltline stroke-width=2 x1=250 y1=450 x2=250 y2=50 style=stroke bluegtltlinegtltcircle r=10 cx=450 cy=250 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=250 cy=450 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=50 cy=250 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=250 cy=50 fill=yellow stroke=redgtltcirclegtltsvggt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Networks in JSON format basic netJSONclassjson
netJSON basicinfo network class org 1 nNodes 15
nArcs 30 nEdges 13 nWeak 1title borrowing study materialsmeta date October 2015 author V Batagelj
nodes [
id 1 short m02 x 01857 y 02781 size 1 id 2 short m03 x 05482 y 06169 size 1 id 3 short w07 x 02219 y 04526 size 2 id 4 short w09 x 08078 y 03223 size 2
id 14 short m89 x 04000 y 08469 size 1 id 15 short m96 x 03482 y 01778 size 1
]links [
type arc source 6 target 15 weight 1 type arc source 2 target 7 weight 1
type arc source15 target 3 weight 1 type edge source 6 target 12 weight 1
type edge source 4 target 12 weight 1 type edge source 6 target 13 weight 1
]
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON and RTransforming Pajek NET and CLU files in to JSON
nodes[nameMyrielgroup1nameNapoleongroup1 nameBrujongroup4nameMmeHucheloupgroup8]
links[source1target0value1source2target0value8 source76target48value1source76target58value1]
setwd(CUsersBatageljtestpython2012amazon)library(rjson)
net2json lt- function(netFcluFjsonF)net lt- file(netFr) clu lt- file(cluFr)b lt- unlist(strsplit(readLines(netn=1) ))n lt- asinteger(b[length(b)])N lt- readLines(netn=n) nam lt- character(n)for(i in 1n) nam[i] lt- unlist(strsplit(N[i]rsquorsquo))[2]skip lt- readLines(clun=1) C lt- asinteger(readLines(clun=n))skip lt- readLines(netn=1) L lt- readLines(netn=-1)M lt- matrix(asinteger(unlist(strsplit(sub(rsquo^s+rsquorsquorsquoL)rsquos+rsquo)))ncol=3byrow=TRUE)nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(name=nam[i]group=C[i])m lt- nrow(M) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(source=M[i1]-1target=M[i2]-1value=M[i3])data lt- list(nodes=nodslinks=lnks)jstr lt- toJSON(data)json lt- file(jsonFw) cat(jstrfile=json)close(json) close(net) close(clu)
net2json(islandsnetislandscluislandsjson)
islands island 1 island 4 force islands
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
CSV2JSONR
transforming CSV files to JSON file by Vladimir Batagelj June 2016setwd(CUsersbatageljworkPythongraphSVGEUSN)library(rjson)colC lt- c(rep(character4)rep(numeric5)) nas lt- c(NANaN)nodes lt- readcsv2(bibNodesXYcsvencoding=rsquoUTF-8rsquocolClasses=colCnastrings=nas)M lt- factor(nodes$mode) mod lt- levels(M) M lt- asnumeric(M)S lt- factor(nodes$sex) sx lt- levels(S) S lt- asnumeric(S) S[isna(S)] lt- 0links lt- readcsv2(bibLinkscsvencoding=rsquoUTF-8rsquocolClasses=character)F lt- asnumeric(factor(links$fromlevels=nodes$nameordered=TRUE))T lt- asnumeric(factor(links$tolevels=nodes$nameordered=TRUE))R lt- factor(links$relation) rel lt-levels(R) R lt- asnumeric(R)n lt- nrow(nodes) nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(id=iname=nodes$name[i]mode=M[i]
sex=S[i]x=asnumeric(nodes$x[i])1000y=asnumeric(nodes$y[i])1000)m lt- nrow(links) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(type=arcsource=F[i]target=T[i]
rel=R[i]weight=1)meta lt- list(date=June 112016author=Vladimir Batagelj)leg lt- list(mode=modsex=sxrel=rel)inf lt- list(network=biborg=1nNodes=nnArcs=mtitle=Example for EUSNrsquo16legend=legmeta=meta)
data lt- list(netJSON=basicinfo=infnodes=nodslinks=lnks)json lt- file(bibjsonw) cat(toJSON(data)file=json) close(json)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibjson
netJSONbasicinfonetworkbiborg1nNodes16nArcs19titleExample for EUSNrsquo16legendmode[bookjournalpaperpersonpublisherseries]sex[fm]rel[authorOfcitescontainedIneditorOfpublishedBy]
metadateJune 112016authorVladimir Batageljnodes[id1nameBatagelj Vladimirmode4sex2x08091y06537id2nameDoreian Patrickmode4sex2x03585y06791id3nameFerligoj Anuu0161kamode4sex1x06195y06807id4nameGranovetter Markmode4sex2x01456y06605id5nameMoustaki Irinimode4sex1x0783y0228id6nameMrvar Andrejmode4sex2x0478y06301id7nameClustering with relational constraintmode3sex0x06841y03801
id15nameCambridge University Pressmode5sex0x05343y02382id16nameSpringermode5sex0x08846y0174]links[typearcsource1target10rel1weight1typearcsource2target10rel1weight1typearcsource3target10rel1weight1typearcsource1target7rel1weight1typearcsource3target7rel1weight1typearcsource4target8rel1weight1typearcsource4target14rel4weight1
typearcsource10target7rel2weight1typearcsource14target15rel5weight1typearcsource11target16rel5weight1
]
bibjson picture bibV Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON files anddisplaying a network with given nodesrsquo coordinates
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltinput type=rsquofilersquo accept=rsquoapplicationjsonrsquo onchange=rsquoopenFile(event)rsquogtltscriptgtfunction process(graph) set up the drawing areavar width = 500height = 500 s = graphattributesorg
var svg = d3select(body)append(svg)attr(width width)attr(height height)attr(xmlns httpwwww3org2000svg)
draw the linksvar link = svgselectAll(line)data(graphlinks)enter()append(line)style(stroke function(di) return((dtype==arc magenta blue)))attr(stroke-width 2)attr(x1 function(d) return(graphnodes[dsource-s]xwidth))attr(y1 function(d) return(graphnodes[dsource-s]yheight))attr(x2 function(d) return(graphnodes[dtarget-s]xwidth))attr(y2 function(d) return(graphnodes[dtarget-s]yheight))
draw the nodesvar node = svgselectAll(circle)data(graphnodes)enter()append(circle)attr(r 15)attr(cx function(di) return(dxwidth))attr(cy function(di) return(dyheight))attr(fill yellow)attr(stroke red)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
readingadapted from Matt West Reading Files Using The HTML5 FileReader API
var openFile = function(event) var input = eventtargetvar reader = new FileReader()readeronload = function()process(JSONparse(readerresult))
readerreadAsText(inputfiles[0])
ltscriptgtltbodygt
graphReadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON file from serveradapted from Ying Kit Yuen jQuery amp Javascript -ndash Read JSON files on server
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtlttitlegtLoad JSON file from serverlttitlegtlt-- httpeurekaykyueninfo20130925jquery-javascript-read-json-files-on-server --gtltscript src=httpajaxgoogleapiscomajaxlibsjquery1102jqueryminjsgtltscriptgtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltselect id=datagtltoption value=graphjsongtgraphjsonltoptiongtltoption value=classjsongtclassjsonltoptiongt
ltselectgtltbutton id=btngtReadltbuttongtltscriptgtfunction process(graph) set up the drawing area the body of function process is the same as in the previous exampleattr(stroke red)
$(btn)click(function()$getJSON($(data)val() function(json) process(json))
)ltscriptgtltbodygt
graphLoadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Network displayer graphXY
drawNetjs
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
graphXYgen
ltDOCTYPE htmlgtltmeta charset=utf-8gtltbodygtlt-- script src=graphAjsgtltscript --gtltscript src=graphBjsgtltscriptgtlt-- script src=classSjsgtltscript --gtltscript src=drawNetjsgtltscriptgtltscript src=d3d3jsgtltscriptgtltscriptgtvars = graphinfoorgwidth = graphstylecanvaswidthheight = graphstylecanvasheightvar lw = 1if ( typeof graphstyle == rsquoundefinedrsquo ampamp graphstyle) if ( typeof graphstylelink == rsquoundefinedrsquo ampamp graphstylelink )
if ( typeof graphstylelinkwidth == rsquoundefinedrsquo ampamp graphstylelinkwidth ) var lw = graphstylelinkwidth
if(graphnetJSON==rsquogeneralrsquo) var OK = drawNet(graphpersonsdatagraphfrienddata)
else var OK = drawNet(graphnodesgraphlinks)
ltscriptgtltbodygt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Saving SVG pictureS Murray Interactive Data Visualization for the Web p 235
In Google Chrome we draw a picture and open the Developer ToolsIn the Elements we identify the SVG subobject select it copy it intosome text editor and save with extension svg
To enhance the picture or to transform it to other picture formats we
process it using some vector graphics editor
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
To do
bull displayer templates can be based on GUI
bull for a description of multirelational networks we use the rel
attribute in the general version they can be treated asseparate sets of links
bull properties are considered as attributes in the general versionthey can be represented as special objects vector partitionpermutation and cluster
bull use temporal quantities for describing temporal networks
bull extend the list of info-attributes attributes type (simpletemporal) twoModeOrg nStrong nRelations planar
bull icons can be used for visualization of nodes Font AwesomeMaterial Icons tests
bull links can be visually represented in many different ways that canbe described in style
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
to do
bull style can be attached as an attribute also to an element(node link) thus changing the default settings
bull add the visualization of arcs with arrows Directed Graph EditorD3 Tips and Tricks
bull to be included in netD3js vzmetno risanje Force in urejanjeSpringy Matrix with permutations
bull can some attributes be renamed from tail nodeA rarrsource to head nodeB rarr target may be the simplestsolution is a replace in some text editor
bull implement saving of the obtained SVG picture to a file ExportSVG with Style d3jsSVG Export demo
bull include in netJSON elements useful in some applications suchas hooks or inout-ports background image etc
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Sources
Ideas for visualization styles can be found in GoJS - InteractiveDiagrams for JavaScript and HTML Visjs in VisualComplexity
GoJS mdashSankey Diagram Family Tree Logic Circuit DynamicPortsVega - a visualization grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References I
Vladimir Batagelj Complex Networks Visualization of RA Meyersed Encyclopedia of Complexity and Systems Science Springer 20091253-1268
Vladimir Batagelj Andrej Mrvar Pajek manual
Jernej Bodlaj Network Data File Formats in Reda Alhajj Jon Rokne(eds) Encyclopedia of Social Network Analysis and Mining SpringerNew York 2014 p 1076-1091
Richard Brath David Jonker Graph Analysis and VisualizationDiscovering Business Opportunity in Linked Data John Wiley amp SonsIndianapolis Indiana 2015
Emden Gansner Eleftherios Koutsofios Stephen North Drawinggraphs with dot January 26 2006
Scott Murray Interactive Data Visualization for the Web OrsquoReillySebastopol 2013
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References II
Wouter De Nooy Andrej Mrvar Vladimir Batagelj Exploratory SocialNetwork Analysis with Pajek Revised and Expanded Second EditionStructural Analysis in the Social Sciences Cambridge UniversityPress September 2011
Matthew Roughan Jonathan Tuke Unravelling Graph-Exchange FileFormats arXiv150302781 submitted on 10 Mar 2015
Wikipedia JSON
Leland Wilkinson The Grammar of Graphics Springer-Verlag NewYork 2005
V Batagelj JSON amp D3js
- Introduction
- Description of networks
- JSON
- JSON and D3js
- JSON and R
- Displayer
- To do
- References
-
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON
firstName JohnlastName SmithisAlive trueage 25address streetAddress 21 2nd Streetcity New Yorkstate NYpostalCode 10021-3100
phoneNumbers [
type homenumber 212 555-1234
type officenumber 646 555-4567
]children []spouse null
Wikipedia
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON
XML is appropriate for describing the structure of textual dataJSON is becoming the first choice for describing structured dataJSON has much simpler grammar is more readable and compatiblewith basic data structures in modern programming languagesAll keys (names of fields) are in double quotes
JSON files are by default based on the encoding Unicode (UTF-8)
The MIME type for JSON files is applicationjson therecommended file extension is json
For work with JSON there exists supporting libraries for all importantprogramming languages httpwwwjsonorg
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
eval and JSONparseevalhtml
lthtmlgtltheadgtlttitlegtJSON eval and parselttitlegtltheadgtltbodygtltscriptgtvar data=rsquo[abca[true null314]bBBBBBc12e+5]rsquoalert(JSON + data)documentwrite(JSONltttgt+data+ltttgtltbrgt)var value = eval(rsquo(rsquo + data + rsquo)rsquo)consolelog(eval) consolelog(value)documentwrite(evalltttgt+JSONstringify(value)+ltttgtltbrgt)var json = JSONparse(data)consolelog(JSONparse) consolelog(json)ltscriptgtltbodygtlthtmlgt
To run the Javascript code I used the Google Chrome browser To get theconsole we selectCustomize and Control GC More tools Developer tools
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
eval and JSONparse
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Importing data as Javascript assignmentimporthtml
lthtmlgtltheadgtlttitlegtJSON importlttitlegtltscript src=personjsgtltscriptgtltheadgtltbodygtltscriptgtdocumentwrite(JSONltttgt+person+ltttgtltbrgt)documentwrite(stringltttgt+JSONstringify(person)+ltttgtltbrgt)consolelog(JSON) consolelog(person)ltscriptgtltbodygtlthtmlgt
personjs
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Well formed and valid JSON files
A JSON file is well formed iff it respects JSONrsquos grammarIs my file well formed service JSONlint - another checker
JSON editor
Similar to XMLrsquos DTD files or schema we can imposeadditional restrictions to the structure of JSON files describingspecial types of data using JSON schema ndash the JSON filesrespecting these additional restrictions are called valid
Github validation JSON Schema Lint JSON Schemavalidator
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Simple examplegraphjson
infoorg0nNodes4nodes[nameAnnx02y02Num1Size100nameBenx02y08Num4Size500nameTimx08y02Num2Size200nameZoex08y08Num3Size400
]links[source0target1Count1Weight100source1target2Count1Weight100source2target3Count1Weight100source1target3Count2Weight300
]
In graphjs the JSON description is assigned to the variable graph
graph = infoorg0nNodes4nodes[
]
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Circular layoutadapted from Brath and Jonker p 257-258
ltDOCTYPE htmlgtlthtmlgtltheadgtltmeta charset=utf-8gtltscript src=graphjsgtltscriptgtlt-- script src=classjsgtltscript --gtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltscriptgt set up the drawing areavar width = 500
height = 500var svg = d3select(body)append(svg)
attr(width width)
attr(height height)
attr(xmlns httpwwww3org2000svg) angle and radius for layout assistancevar ang = 2 MathPI graphnodeslengthvar rad = width 25
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Circular layout
create the linksvar link = svgselectAll(line)data(graphlinks)enter()append(line)style(strokeblue)attr(stroke-width2)attr(x1function(d)return(radMathcos(dsourceang)+5width))attr(y1function(d)return(radMathsin(dsourceang)+5width))attr(x2function(d)return(radMathcos(dtargetang)+5width))attr(y2function(d)return(radMathsin(dtargetang)+5width))
create the nodes and set out in a circular layoutvar node = svgselectAll(circle)data(graphnodes)enter()append(circle)attr(r10)attr(cxfunction(di)return(radMathcos(iang)+5width))attr(cyfunction(di)return(radMathsin(iang)+5width))attr(fillyellow)attr(strokered)
ltscriptgtltbodygt
graphCirclehtml classjson classjs classCirclehtml+ labels classCircleLhtml+ permutation classPjson classPjs classCirclePhtm
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
SVG
ltxml version=10 encoding=UTF-8 standalone=yesgtltsvg width=500 height=500 xmlns=httpwwww3org2000svggtltline stroke-width=2 x1=450 y1=250 x2=250 y2=450 style=stroke bluegtltlinegtltline stroke-width=2 x1=250 y1=450 x2=50 y2=250 style=stroke bluegtltlinegtltline stroke-width=2 x1=50 y1=250 x2=250 y2=50 style=stroke bluegtltlinegtltline stroke-width=2 x1=250 y1=450 x2=250 y2=50 style=stroke bluegtltlinegtltcircle r=10 cx=450 cy=250 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=250 cy=450 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=50 cy=250 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=250 cy=50 fill=yellow stroke=redgtltcirclegtltsvggt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Networks in JSON format basic netJSONclassjson
netJSON basicinfo network class org 1 nNodes 15
nArcs 30 nEdges 13 nWeak 1title borrowing study materialsmeta date October 2015 author V Batagelj
nodes [
id 1 short m02 x 01857 y 02781 size 1 id 2 short m03 x 05482 y 06169 size 1 id 3 short w07 x 02219 y 04526 size 2 id 4 short w09 x 08078 y 03223 size 2
id 14 short m89 x 04000 y 08469 size 1 id 15 short m96 x 03482 y 01778 size 1
]links [
type arc source 6 target 15 weight 1 type arc source 2 target 7 weight 1
type arc source15 target 3 weight 1 type edge source 6 target 12 weight 1
type edge source 4 target 12 weight 1 type edge source 6 target 13 weight 1
]
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON and RTransforming Pajek NET and CLU files in to JSON
nodes[nameMyrielgroup1nameNapoleongroup1 nameBrujongroup4nameMmeHucheloupgroup8]
links[source1target0value1source2target0value8 source76target48value1source76target58value1]
setwd(CUsersBatageljtestpython2012amazon)library(rjson)
net2json lt- function(netFcluFjsonF)net lt- file(netFr) clu lt- file(cluFr)b lt- unlist(strsplit(readLines(netn=1) ))n lt- asinteger(b[length(b)])N lt- readLines(netn=n) nam lt- character(n)for(i in 1n) nam[i] lt- unlist(strsplit(N[i]rsquorsquo))[2]skip lt- readLines(clun=1) C lt- asinteger(readLines(clun=n))skip lt- readLines(netn=1) L lt- readLines(netn=-1)M lt- matrix(asinteger(unlist(strsplit(sub(rsquo^s+rsquorsquorsquoL)rsquos+rsquo)))ncol=3byrow=TRUE)nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(name=nam[i]group=C[i])m lt- nrow(M) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(source=M[i1]-1target=M[i2]-1value=M[i3])data lt- list(nodes=nodslinks=lnks)jstr lt- toJSON(data)json lt- file(jsonFw) cat(jstrfile=json)close(json) close(net) close(clu)
net2json(islandsnetislandscluislandsjson)
islands island 1 island 4 force islands
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
CSV2JSONR
transforming CSV files to JSON file by Vladimir Batagelj June 2016setwd(CUsersbatageljworkPythongraphSVGEUSN)library(rjson)colC lt- c(rep(character4)rep(numeric5)) nas lt- c(NANaN)nodes lt- readcsv2(bibNodesXYcsvencoding=rsquoUTF-8rsquocolClasses=colCnastrings=nas)M lt- factor(nodes$mode) mod lt- levels(M) M lt- asnumeric(M)S lt- factor(nodes$sex) sx lt- levels(S) S lt- asnumeric(S) S[isna(S)] lt- 0links lt- readcsv2(bibLinkscsvencoding=rsquoUTF-8rsquocolClasses=character)F lt- asnumeric(factor(links$fromlevels=nodes$nameordered=TRUE))T lt- asnumeric(factor(links$tolevels=nodes$nameordered=TRUE))R lt- factor(links$relation) rel lt-levels(R) R lt- asnumeric(R)n lt- nrow(nodes) nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(id=iname=nodes$name[i]mode=M[i]
sex=S[i]x=asnumeric(nodes$x[i])1000y=asnumeric(nodes$y[i])1000)m lt- nrow(links) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(type=arcsource=F[i]target=T[i]
rel=R[i]weight=1)meta lt- list(date=June 112016author=Vladimir Batagelj)leg lt- list(mode=modsex=sxrel=rel)inf lt- list(network=biborg=1nNodes=nnArcs=mtitle=Example for EUSNrsquo16legend=legmeta=meta)
data lt- list(netJSON=basicinfo=infnodes=nodslinks=lnks)json lt- file(bibjsonw) cat(toJSON(data)file=json) close(json)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibjson
netJSONbasicinfonetworkbiborg1nNodes16nArcs19titleExample for EUSNrsquo16legendmode[bookjournalpaperpersonpublisherseries]sex[fm]rel[authorOfcitescontainedIneditorOfpublishedBy]
metadateJune 112016authorVladimir Batageljnodes[id1nameBatagelj Vladimirmode4sex2x08091y06537id2nameDoreian Patrickmode4sex2x03585y06791id3nameFerligoj Anuu0161kamode4sex1x06195y06807id4nameGranovetter Markmode4sex2x01456y06605id5nameMoustaki Irinimode4sex1x0783y0228id6nameMrvar Andrejmode4sex2x0478y06301id7nameClustering with relational constraintmode3sex0x06841y03801
id15nameCambridge University Pressmode5sex0x05343y02382id16nameSpringermode5sex0x08846y0174]links[typearcsource1target10rel1weight1typearcsource2target10rel1weight1typearcsource3target10rel1weight1typearcsource1target7rel1weight1typearcsource3target7rel1weight1typearcsource4target8rel1weight1typearcsource4target14rel4weight1
typearcsource10target7rel2weight1typearcsource14target15rel5weight1typearcsource11target16rel5weight1
]
bibjson picture bibV Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON files anddisplaying a network with given nodesrsquo coordinates
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltinput type=rsquofilersquo accept=rsquoapplicationjsonrsquo onchange=rsquoopenFile(event)rsquogtltscriptgtfunction process(graph) set up the drawing areavar width = 500height = 500 s = graphattributesorg
var svg = d3select(body)append(svg)attr(width width)attr(height height)attr(xmlns httpwwww3org2000svg)
draw the linksvar link = svgselectAll(line)data(graphlinks)enter()append(line)style(stroke function(di) return((dtype==arc magenta blue)))attr(stroke-width 2)attr(x1 function(d) return(graphnodes[dsource-s]xwidth))attr(y1 function(d) return(graphnodes[dsource-s]yheight))attr(x2 function(d) return(graphnodes[dtarget-s]xwidth))attr(y2 function(d) return(graphnodes[dtarget-s]yheight))
draw the nodesvar node = svgselectAll(circle)data(graphnodes)enter()append(circle)attr(r 15)attr(cx function(di) return(dxwidth))attr(cy function(di) return(dyheight))attr(fill yellow)attr(stroke red)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
readingadapted from Matt West Reading Files Using The HTML5 FileReader API
var openFile = function(event) var input = eventtargetvar reader = new FileReader()readeronload = function()process(JSONparse(readerresult))
readerreadAsText(inputfiles[0])
ltscriptgtltbodygt
graphReadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON file from serveradapted from Ying Kit Yuen jQuery amp Javascript -ndash Read JSON files on server
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtlttitlegtLoad JSON file from serverlttitlegtlt-- httpeurekaykyueninfo20130925jquery-javascript-read-json-files-on-server --gtltscript src=httpajaxgoogleapiscomajaxlibsjquery1102jqueryminjsgtltscriptgtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltselect id=datagtltoption value=graphjsongtgraphjsonltoptiongtltoption value=classjsongtclassjsonltoptiongt
ltselectgtltbutton id=btngtReadltbuttongtltscriptgtfunction process(graph) set up the drawing area the body of function process is the same as in the previous exampleattr(stroke red)
$(btn)click(function()$getJSON($(data)val() function(json) process(json))
)ltscriptgtltbodygt
graphLoadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Network displayer graphXY
drawNetjs
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
graphXYgen
ltDOCTYPE htmlgtltmeta charset=utf-8gtltbodygtlt-- script src=graphAjsgtltscript --gtltscript src=graphBjsgtltscriptgtlt-- script src=classSjsgtltscript --gtltscript src=drawNetjsgtltscriptgtltscript src=d3d3jsgtltscriptgtltscriptgtvars = graphinfoorgwidth = graphstylecanvaswidthheight = graphstylecanvasheightvar lw = 1if ( typeof graphstyle == rsquoundefinedrsquo ampamp graphstyle) if ( typeof graphstylelink == rsquoundefinedrsquo ampamp graphstylelink )
if ( typeof graphstylelinkwidth == rsquoundefinedrsquo ampamp graphstylelinkwidth ) var lw = graphstylelinkwidth
if(graphnetJSON==rsquogeneralrsquo) var OK = drawNet(graphpersonsdatagraphfrienddata)
else var OK = drawNet(graphnodesgraphlinks)
ltscriptgtltbodygt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Saving SVG pictureS Murray Interactive Data Visualization for the Web p 235
In Google Chrome we draw a picture and open the Developer ToolsIn the Elements we identify the SVG subobject select it copy it intosome text editor and save with extension svg
To enhance the picture or to transform it to other picture formats we
process it using some vector graphics editor
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
To do
bull displayer templates can be based on GUI
bull for a description of multirelational networks we use the rel
attribute in the general version they can be treated asseparate sets of links
bull properties are considered as attributes in the general versionthey can be represented as special objects vector partitionpermutation and cluster
bull use temporal quantities for describing temporal networks
bull extend the list of info-attributes attributes type (simpletemporal) twoModeOrg nStrong nRelations planar
bull icons can be used for visualization of nodes Font AwesomeMaterial Icons tests
bull links can be visually represented in many different ways that canbe described in style
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
to do
bull style can be attached as an attribute also to an element(node link) thus changing the default settings
bull add the visualization of arcs with arrows Directed Graph EditorD3 Tips and Tricks
bull to be included in netD3js vzmetno risanje Force in urejanjeSpringy Matrix with permutations
bull can some attributes be renamed from tail nodeA rarrsource to head nodeB rarr target may be the simplestsolution is a replace in some text editor
bull implement saving of the obtained SVG picture to a file ExportSVG with Style d3jsSVG Export demo
bull include in netJSON elements useful in some applications suchas hooks or inout-ports background image etc
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Sources
Ideas for visualization styles can be found in GoJS - InteractiveDiagrams for JavaScript and HTML Visjs in VisualComplexity
GoJS mdashSankey Diagram Family Tree Logic Circuit DynamicPortsVega - a visualization grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References I
Vladimir Batagelj Complex Networks Visualization of RA Meyersed Encyclopedia of Complexity and Systems Science Springer 20091253-1268
Vladimir Batagelj Andrej Mrvar Pajek manual
Jernej Bodlaj Network Data File Formats in Reda Alhajj Jon Rokne(eds) Encyclopedia of Social Network Analysis and Mining SpringerNew York 2014 p 1076-1091
Richard Brath David Jonker Graph Analysis and VisualizationDiscovering Business Opportunity in Linked Data John Wiley amp SonsIndianapolis Indiana 2015
Emden Gansner Eleftherios Koutsofios Stephen North Drawinggraphs with dot January 26 2006
Scott Murray Interactive Data Visualization for the Web OrsquoReillySebastopol 2013
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References II
Wouter De Nooy Andrej Mrvar Vladimir Batagelj Exploratory SocialNetwork Analysis with Pajek Revised and Expanded Second EditionStructural Analysis in the Social Sciences Cambridge UniversityPress September 2011
Matthew Roughan Jonathan Tuke Unravelling Graph-Exchange FileFormats arXiv150302781 submitted on 10 Mar 2015
Wikipedia JSON
Leland Wilkinson The Grammar of Graphics Springer-Verlag NewYork 2005
V Batagelj JSON amp D3js
- Introduction
- Description of networks
- JSON
- JSON and D3js
- JSON and R
- Displayer
- To do
- References
-
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON
XML is appropriate for describing the structure of textual dataJSON is becoming the first choice for describing structured dataJSON has much simpler grammar is more readable and compatiblewith basic data structures in modern programming languagesAll keys (names of fields) are in double quotes
JSON files are by default based on the encoding Unicode (UTF-8)
The MIME type for JSON files is applicationjson therecommended file extension is json
For work with JSON there exists supporting libraries for all importantprogramming languages httpwwwjsonorg
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
eval and JSONparseevalhtml
lthtmlgtltheadgtlttitlegtJSON eval and parselttitlegtltheadgtltbodygtltscriptgtvar data=rsquo[abca[true null314]bBBBBBc12e+5]rsquoalert(JSON + data)documentwrite(JSONltttgt+data+ltttgtltbrgt)var value = eval(rsquo(rsquo + data + rsquo)rsquo)consolelog(eval) consolelog(value)documentwrite(evalltttgt+JSONstringify(value)+ltttgtltbrgt)var json = JSONparse(data)consolelog(JSONparse) consolelog(json)ltscriptgtltbodygtlthtmlgt
To run the Javascript code I used the Google Chrome browser To get theconsole we selectCustomize and Control GC More tools Developer tools
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
eval and JSONparse
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Importing data as Javascript assignmentimporthtml
lthtmlgtltheadgtlttitlegtJSON importlttitlegtltscript src=personjsgtltscriptgtltheadgtltbodygtltscriptgtdocumentwrite(JSONltttgt+person+ltttgtltbrgt)documentwrite(stringltttgt+JSONstringify(person)+ltttgtltbrgt)consolelog(JSON) consolelog(person)ltscriptgtltbodygtlthtmlgt
personjs
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Well formed and valid JSON files
A JSON file is well formed iff it respects JSONrsquos grammarIs my file well formed service JSONlint - another checker
JSON editor
Similar to XMLrsquos DTD files or schema we can imposeadditional restrictions to the structure of JSON files describingspecial types of data using JSON schema ndash the JSON filesrespecting these additional restrictions are called valid
Github validation JSON Schema Lint JSON Schemavalidator
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Simple examplegraphjson
infoorg0nNodes4nodes[nameAnnx02y02Num1Size100nameBenx02y08Num4Size500nameTimx08y02Num2Size200nameZoex08y08Num3Size400
]links[source0target1Count1Weight100source1target2Count1Weight100source2target3Count1Weight100source1target3Count2Weight300
]
In graphjs the JSON description is assigned to the variable graph
graph = infoorg0nNodes4nodes[
]
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Circular layoutadapted from Brath and Jonker p 257-258
ltDOCTYPE htmlgtlthtmlgtltheadgtltmeta charset=utf-8gtltscript src=graphjsgtltscriptgtlt-- script src=classjsgtltscript --gtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltscriptgt set up the drawing areavar width = 500
height = 500var svg = d3select(body)append(svg)
attr(width width)
attr(height height)
attr(xmlns httpwwww3org2000svg) angle and radius for layout assistancevar ang = 2 MathPI graphnodeslengthvar rad = width 25
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Circular layout
create the linksvar link = svgselectAll(line)data(graphlinks)enter()append(line)style(strokeblue)attr(stroke-width2)attr(x1function(d)return(radMathcos(dsourceang)+5width))attr(y1function(d)return(radMathsin(dsourceang)+5width))attr(x2function(d)return(radMathcos(dtargetang)+5width))attr(y2function(d)return(radMathsin(dtargetang)+5width))
create the nodes and set out in a circular layoutvar node = svgselectAll(circle)data(graphnodes)enter()append(circle)attr(r10)attr(cxfunction(di)return(radMathcos(iang)+5width))attr(cyfunction(di)return(radMathsin(iang)+5width))attr(fillyellow)attr(strokered)
ltscriptgtltbodygt
graphCirclehtml classjson classjs classCirclehtml+ labels classCircleLhtml+ permutation classPjson classPjs classCirclePhtm
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
SVG
ltxml version=10 encoding=UTF-8 standalone=yesgtltsvg width=500 height=500 xmlns=httpwwww3org2000svggtltline stroke-width=2 x1=450 y1=250 x2=250 y2=450 style=stroke bluegtltlinegtltline stroke-width=2 x1=250 y1=450 x2=50 y2=250 style=stroke bluegtltlinegtltline stroke-width=2 x1=50 y1=250 x2=250 y2=50 style=stroke bluegtltlinegtltline stroke-width=2 x1=250 y1=450 x2=250 y2=50 style=stroke bluegtltlinegtltcircle r=10 cx=450 cy=250 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=250 cy=450 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=50 cy=250 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=250 cy=50 fill=yellow stroke=redgtltcirclegtltsvggt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Networks in JSON format basic netJSONclassjson
netJSON basicinfo network class org 1 nNodes 15
nArcs 30 nEdges 13 nWeak 1title borrowing study materialsmeta date October 2015 author V Batagelj
nodes [
id 1 short m02 x 01857 y 02781 size 1 id 2 short m03 x 05482 y 06169 size 1 id 3 short w07 x 02219 y 04526 size 2 id 4 short w09 x 08078 y 03223 size 2
id 14 short m89 x 04000 y 08469 size 1 id 15 short m96 x 03482 y 01778 size 1
]links [
type arc source 6 target 15 weight 1 type arc source 2 target 7 weight 1
type arc source15 target 3 weight 1 type edge source 6 target 12 weight 1
type edge source 4 target 12 weight 1 type edge source 6 target 13 weight 1
]
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON and RTransforming Pajek NET and CLU files in to JSON
nodes[nameMyrielgroup1nameNapoleongroup1 nameBrujongroup4nameMmeHucheloupgroup8]
links[source1target0value1source2target0value8 source76target48value1source76target58value1]
setwd(CUsersBatageljtestpython2012amazon)library(rjson)
net2json lt- function(netFcluFjsonF)net lt- file(netFr) clu lt- file(cluFr)b lt- unlist(strsplit(readLines(netn=1) ))n lt- asinteger(b[length(b)])N lt- readLines(netn=n) nam lt- character(n)for(i in 1n) nam[i] lt- unlist(strsplit(N[i]rsquorsquo))[2]skip lt- readLines(clun=1) C lt- asinteger(readLines(clun=n))skip lt- readLines(netn=1) L lt- readLines(netn=-1)M lt- matrix(asinteger(unlist(strsplit(sub(rsquo^s+rsquorsquorsquoL)rsquos+rsquo)))ncol=3byrow=TRUE)nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(name=nam[i]group=C[i])m lt- nrow(M) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(source=M[i1]-1target=M[i2]-1value=M[i3])data lt- list(nodes=nodslinks=lnks)jstr lt- toJSON(data)json lt- file(jsonFw) cat(jstrfile=json)close(json) close(net) close(clu)
net2json(islandsnetislandscluislandsjson)
islands island 1 island 4 force islands
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
CSV2JSONR
transforming CSV files to JSON file by Vladimir Batagelj June 2016setwd(CUsersbatageljworkPythongraphSVGEUSN)library(rjson)colC lt- c(rep(character4)rep(numeric5)) nas lt- c(NANaN)nodes lt- readcsv2(bibNodesXYcsvencoding=rsquoUTF-8rsquocolClasses=colCnastrings=nas)M lt- factor(nodes$mode) mod lt- levels(M) M lt- asnumeric(M)S lt- factor(nodes$sex) sx lt- levels(S) S lt- asnumeric(S) S[isna(S)] lt- 0links lt- readcsv2(bibLinkscsvencoding=rsquoUTF-8rsquocolClasses=character)F lt- asnumeric(factor(links$fromlevels=nodes$nameordered=TRUE))T lt- asnumeric(factor(links$tolevels=nodes$nameordered=TRUE))R lt- factor(links$relation) rel lt-levels(R) R lt- asnumeric(R)n lt- nrow(nodes) nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(id=iname=nodes$name[i]mode=M[i]
sex=S[i]x=asnumeric(nodes$x[i])1000y=asnumeric(nodes$y[i])1000)m lt- nrow(links) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(type=arcsource=F[i]target=T[i]
rel=R[i]weight=1)meta lt- list(date=June 112016author=Vladimir Batagelj)leg lt- list(mode=modsex=sxrel=rel)inf lt- list(network=biborg=1nNodes=nnArcs=mtitle=Example for EUSNrsquo16legend=legmeta=meta)
data lt- list(netJSON=basicinfo=infnodes=nodslinks=lnks)json lt- file(bibjsonw) cat(toJSON(data)file=json) close(json)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibjson
netJSONbasicinfonetworkbiborg1nNodes16nArcs19titleExample for EUSNrsquo16legendmode[bookjournalpaperpersonpublisherseries]sex[fm]rel[authorOfcitescontainedIneditorOfpublishedBy]
metadateJune 112016authorVladimir Batageljnodes[id1nameBatagelj Vladimirmode4sex2x08091y06537id2nameDoreian Patrickmode4sex2x03585y06791id3nameFerligoj Anuu0161kamode4sex1x06195y06807id4nameGranovetter Markmode4sex2x01456y06605id5nameMoustaki Irinimode4sex1x0783y0228id6nameMrvar Andrejmode4sex2x0478y06301id7nameClustering with relational constraintmode3sex0x06841y03801
id15nameCambridge University Pressmode5sex0x05343y02382id16nameSpringermode5sex0x08846y0174]links[typearcsource1target10rel1weight1typearcsource2target10rel1weight1typearcsource3target10rel1weight1typearcsource1target7rel1weight1typearcsource3target7rel1weight1typearcsource4target8rel1weight1typearcsource4target14rel4weight1
typearcsource10target7rel2weight1typearcsource14target15rel5weight1typearcsource11target16rel5weight1
]
bibjson picture bibV Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON files anddisplaying a network with given nodesrsquo coordinates
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltinput type=rsquofilersquo accept=rsquoapplicationjsonrsquo onchange=rsquoopenFile(event)rsquogtltscriptgtfunction process(graph) set up the drawing areavar width = 500height = 500 s = graphattributesorg
var svg = d3select(body)append(svg)attr(width width)attr(height height)attr(xmlns httpwwww3org2000svg)
draw the linksvar link = svgselectAll(line)data(graphlinks)enter()append(line)style(stroke function(di) return((dtype==arc magenta blue)))attr(stroke-width 2)attr(x1 function(d) return(graphnodes[dsource-s]xwidth))attr(y1 function(d) return(graphnodes[dsource-s]yheight))attr(x2 function(d) return(graphnodes[dtarget-s]xwidth))attr(y2 function(d) return(graphnodes[dtarget-s]yheight))
draw the nodesvar node = svgselectAll(circle)data(graphnodes)enter()append(circle)attr(r 15)attr(cx function(di) return(dxwidth))attr(cy function(di) return(dyheight))attr(fill yellow)attr(stroke red)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
readingadapted from Matt West Reading Files Using The HTML5 FileReader API
var openFile = function(event) var input = eventtargetvar reader = new FileReader()readeronload = function()process(JSONparse(readerresult))
readerreadAsText(inputfiles[0])
ltscriptgtltbodygt
graphReadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON file from serveradapted from Ying Kit Yuen jQuery amp Javascript -ndash Read JSON files on server
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtlttitlegtLoad JSON file from serverlttitlegtlt-- httpeurekaykyueninfo20130925jquery-javascript-read-json-files-on-server --gtltscript src=httpajaxgoogleapiscomajaxlibsjquery1102jqueryminjsgtltscriptgtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltselect id=datagtltoption value=graphjsongtgraphjsonltoptiongtltoption value=classjsongtclassjsonltoptiongt
ltselectgtltbutton id=btngtReadltbuttongtltscriptgtfunction process(graph) set up the drawing area the body of function process is the same as in the previous exampleattr(stroke red)
$(btn)click(function()$getJSON($(data)val() function(json) process(json))
)ltscriptgtltbodygt
graphLoadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Network displayer graphXY
drawNetjs
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
graphXYgen
ltDOCTYPE htmlgtltmeta charset=utf-8gtltbodygtlt-- script src=graphAjsgtltscript --gtltscript src=graphBjsgtltscriptgtlt-- script src=classSjsgtltscript --gtltscript src=drawNetjsgtltscriptgtltscript src=d3d3jsgtltscriptgtltscriptgtvars = graphinfoorgwidth = graphstylecanvaswidthheight = graphstylecanvasheightvar lw = 1if ( typeof graphstyle == rsquoundefinedrsquo ampamp graphstyle) if ( typeof graphstylelink == rsquoundefinedrsquo ampamp graphstylelink )
if ( typeof graphstylelinkwidth == rsquoundefinedrsquo ampamp graphstylelinkwidth ) var lw = graphstylelinkwidth
if(graphnetJSON==rsquogeneralrsquo) var OK = drawNet(graphpersonsdatagraphfrienddata)
else var OK = drawNet(graphnodesgraphlinks)
ltscriptgtltbodygt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Saving SVG pictureS Murray Interactive Data Visualization for the Web p 235
In Google Chrome we draw a picture and open the Developer ToolsIn the Elements we identify the SVG subobject select it copy it intosome text editor and save with extension svg
To enhance the picture or to transform it to other picture formats we
process it using some vector graphics editor
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
To do
bull displayer templates can be based on GUI
bull for a description of multirelational networks we use the rel
attribute in the general version they can be treated asseparate sets of links
bull properties are considered as attributes in the general versionthey can be represented as special objects vector partitionpermutation and cluster
bull use temporal quantities for describing temporal networks
bull extend the list of info-attributes attributes type (simpletemporal) twoModeOrg nStrong nRelations planar
bull icons can be used for visualization of nodes Font AwesomeMaterial Icons tests
bull links can be visually represented in many different ways that canbe described in style
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
to do
bull style can be attached as an attribute also to an element(node link) thus changing the default settings
bull add the visualization of arcs with arrows Directed Graph EditorD3 Tips and Tricks
bull to be included in netD3js vzmetno risanje Force in urejanjeSpringy Matrix with permutations
bull can some attributes be renamed from tail nodeA rarrsource to head nodeB rarr target may be the simplestsolution is a replace in some text editor
bull implement saving of the obtained SVG picture to a file ExportSVG with Style d3jsSVG Export demo
bull include in netJSON elements useful in some applications suchas hooks or inout-ports background image etc
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Sources
Ideas for visualization styles can be found in GoJS - InteractiveDiagrams for JavaScript and HTML Visjs in VisualComplexity
GoJS mdashSankey Diagram Family Tree Logic Circuit DynamicPortsVega - a visualization grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References I
Vladimir Batagelj Complex Networks Visualization of RA Meyersed Encyclopedia of Complexity and Systems Science Springer 20091253-1268
Vladimir Batagelj Andrej Mrvar Pajek manual
Jernej Bodlaj Network Data File Formats in Reda Alhajj Jon Rokne(eds) Encyclopedia of Social Network Analysis and Mining SpringerNew York 2014 p 1076-1091
Richard Brath David Jonker Graph Analysis and VisualizationDiscovering Business Opportunity in Linked Data John Wiley amp SonsIndianapolis Indiana 2015
Emden Gansner Eleftherios Koutsofios Stephen North Drawinggraphs with dot January 26 2006
Scott Murray Interactive Data Visualization for the Web OrsquoReillySebastopol 2013
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References II
Wouter De Nooy Andrej Mrvar Vladimir Batagelj Exploratory SocialNetwork Analysis with Pajek Revised and Expanded Second EditionStructural Analysis in the Social Sciences Cambridge UniversityPress September 2011
Matthew Roughan Jonathan Tuke Unravelling Graph-Exchange FileFormats arXiv150302781 submitted on 10 Mar 2015
Wikipedia JSON
Leland Wilkinson The Grammar of Graphics Springer-Verlag NewYork 2005
V Batagelj JSON amp D3js
- Introduction
- Description of networks
- JSON
- JSON and D3js
- JSON and R
- Displayer
- To do
- References
-
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
eval and JSONparseevalhtml
lthtmlgtltheadgtlttitlegtJSON eval and parselttitlegtltheadgtltbodygtltscriptgtvar data=rsquo[abca[true null314]bBBBBBc12e+5]rsquoalert(JSON + data)documentwrite(JSONltttgt+data+ltttgtltbrgt)var value = eval(rsquo(rsquo + data + rsquo)rsquo)consolelog(eval) consolelog(value)documentwrite(evalltttgt+JSONstringify(value)+ltttgtltbrgt)var json = JSONparse(data)consolelog(JSONparse) consolelog(json)ltscriptgtltbodygtlthtmlgt
To run the Javascript code I used the Google Chrome browser To get theconsole we selectCustomize and Control GC More tools Developer tools
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
eval and JSONparse
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Importing data as Javascript assignmentimporthtml
lthtmlgtltheadgtlttitlegtJSON importlttitlegtltscript src=personjsgtltscriptgtltheadgtltbodygtltscriptgtdocumentwrite(JSONltttgt+person+ltttgtltbrgt)documentwrite(stringltttgt+JSONstringify(person)+ltttgtltbrgt)consolelog(JSON) consolelog(person)ltscriptgtltbodygtlthtmlgt
personjs
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Well formed and valid JSON files
A JSON file is well formed iff it respects JSONrsquos grammarIs my file well formed service JSONlint - another checker
JSON editor
Similar to XMLrsquos DTD files or schema we can imposeadditional restrictions to the structure of JSON files describingspecial types of data using JSON schema ndash the JSON filesrespecting these additional restrictions are called valid
Github validation JSON Schema Lint JSON Schemavalidator
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Simple examplegraphjson
infoorg0nNodes4nodes[nameAnnx02y02Num1Size100nameBenx02y08Num4Size500nameTimx08y02Num2Size200nameZoex08y08Num3Size400
]links[source0target1Count1Weight100source1target2Count1Weight100source2target3Count1Weight100source1target3Count2Weight300
]
In graphjs the JSON description is assigned to the variable graph
graph = infoorg0nNodes4nodes[
]
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Circular layoutadapted from Brath and Jonker p 257-258
ltDOCTYPE htmlgtlthtmlgtltheadgtltmeta charset=utf-8gtltscript src=graphjsgtltscriptgtlt-- script src=classjsgtltscript --gtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltscriptgt set up the drawing areavar width = 500
height = 500var svg = d3select(body)append(svg)
attr(width width)
attr(height height)
attr(xmlns httpwwww3org2000svg) angle and radius for layout assistancevar ang = 2 MathPI graphnodeslengthvar rad = width 25
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Circular layout
create the linksvar link = svgselectAll(line)data(graphlinks)enter()append(line)style(strokeblue)attr(stroke-width2)attr(x1function(d)return(radMathcos(dsourceang)+5width))attr(y1function(d)return(radMathsin(dsourceang)+5width))attr(x2function(d)return(radMathcos(dtargetang)+5width))attr(y2function(d)return(radMathsin(dtargetang)+5width))
create the nodes and set out in a circular layoutvar node = svgselectAll(circle)data(graphnodes)enter()append(circle)attr(r10)attr(cxfunction(di)return(radMathcos(iang)+5width))attr(cyfunction(di)return(radMathsin(iang)+5width))attr(fillyellow)attr(strokered)
ltscriptgtltbodygt
graphCirclehtml classjson classjs classCirclehtml+ labels classCircleLhtml+ permutation classPjson classPjs classCirclePhtm
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
SVG
ltxml version=10 encoding=UTF-8 standalone=yesgtltsvg width=500 height=500 xmlns=httpwwww3org2000svggtltline stroke-width=2 x1=450 y1=250 x2=250 y2=450 style=stroke bluegtltlinegtltline stroke-width=2 x1=250 y1=450 x2=50 y2=250 style=stroke bluegtltlinegtltline stroke-width=2 x1=50 y1=250 x2=250 y2=50 style=stroke bluegtltlinegtltline stroke-width=2 x1=250 y1=450 x2=250 y2=50 style=stroke bluegtltlinegtltcircle r=10 cx=450 cy=250 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=250 cy=450 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=50 cy=250 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=250 cy=50 fill=yellow stroke=redgtltcirclegtltsvggt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Networks in JSON format basic netJSONclassjson
netJSON basicinfo network class org 1 nNodes 15
nArcs 30 nEdges 13 nWeak 1title borrowing study materialsmeta date October 2015 author V Batagelj
nodes [
id 1 short m02 x 01857 y 02781 size 1 id 2 short m03 x 05482 y 06169 size 1 id 3 short w07 x 02219 y 04526 size 2 id 4 short w09 x 08078 y 03223 size 2
id 14 short m89 x 04000 y 08469 size 1 id 15 short m96 x 03482 y 01778 size 1
]links [
type arc source 6 target 15 weight 1 type arc source 2 target 7 weight 1
type arc source15 target 3 weight 1 type edge source 6 target 12 weight 1
type edge source 4 target 12 weight 1 type edge source 6 target 13 weight 1
]
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON and RTransforming Pajek NET and CLU files in to JSON
nodes[nameMyrielgroup1nameNapoleongroup1 nameBrujongroup4nameMmeHucheloupgroup8]
links[source1target0value1source2target0value8 source76target48value1source76target58value1]
setwd(CUsersBatageljtestpython2012amazon)library(rjson)
net2json lt- function(netFcluFjsonF)net lt- file(netFr) clu lt- file(cluFr)b lt- unlist(strsplit(readLines(netn=1) ))n lt- asinteger(b[length(b)])N lt- readLines(netn=n) nam lt- character(n)for(i in 1n) nam[i] lt- unlist(strsplit(N[i]rsquorsquo))[2]skip lt- readLines(clun=1) C lt- asinteger(readLines(clun=n))skip lt- readLines(netn=1) L lt- readLines(netn=-1)M lt- matrix(asinteger(unlist(strsplit(sub(rsquo^s+rsquorsquorsquoL)rsquos+rsquo)))ncol=3byrow=TRUE)nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(name=nam[i]group=C[i])m lt- nrow(M) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(source=M[i1]-1target=M[i2]-1value=M[i3])data lt- list(nodes=nodslinks=lnks)jstr lt- toJSON(data)json lt- file(jsonFw) cat(jstrfile=json)close(json) close(net) close(clu)
net2json(islandsnetislandscluislandsjson)
islands island 1 island 4 force islands
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
CSV2JSONR
transforming CSV files to JSON file by Vladimir Batagelj June 2016setwd(CUsersbatageljworkPythongraphSVGEUSN)library(rjson)colC lt- c(rep(character4)rep(numeric5)) nas lt- c(NANaN)nodes lt- readcsv2(bibNodesXYcsvencoding=rsquoUTF-8rsquocolClasses=colCnastrings=nas)M lt- factor(nodes$mode) mod lt- levels(M) M lt- asnumeric(M)S lt- factor(nodes$sex) sx lt- levels(S) S lt- asnumeric(S) S[isna(S)] lt- 0links lt- readcsv2(bibLinkscsvencoding=rsquoUTF-8rsquocolClasses=character)F lt- asnumeric(factor(links$fromlevels=nodes$nameordered=TRUE))T lt- asnumeric(factor(links$tolevels=nodes$nameordered=TRUE))R lt- factor(links$relation) rel lt-levels(R) R lt- asnumeric(R)n lt- nrow(nodes) nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(id=iname=nodes$name[i]mode=M[i]
sex=S[i]x=asnumeric(nodes$x[i])1000y=asnumeric(nodes$y[i])1000)m lt- nrow(links) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(type=arcsource=F[i]target=T[i]
rel=R[i]weight=1)meta lt- list(date=June 112016author=Vladimir Batagelj)leg lt- list(mode=modsex=sxrel=rel)inf lt- list(network=biborg=1nNodes=nnArcs=mtitle=Example for EUSNrsquo16legend=legmeta=meta)
data lt- list(netJSON=basicinfo=infnodes=nodslinks=lnks)json lt- file(bibjsonw) cat(toJSON(data)file=json) close(json)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibjson
netJSONbasicinfonetworkbiborg1nNodes16nArcs19titleExample for EUSNrsquo16legendmode[bookjournalpaperpersonpublisherseries]sex[fm]rel[authorOfcitescontainedIneditorOfpublishedBy]
metadateJune 112016authorVladimir Batageljnodes[id1nameBatagelj Vladimirmode4sex2x08091y06537id2nameDoreian Patrickmode4sex2x03585y06791id3nameFerligoj Anuu0161kamode4sex1x06195y06807id4nameGranovetter Markmode4sex2x01456y06605id5nameMoustaki Irinimode4sex1x0783y0228id6nameMrvar Andrejmode4sex2x0478y06301id7nameClustering with relational constraintmode3sex0x06841y03801
id15nameCambridge University Pressmode5sex0x05343y02382id16nameSpringermode5sex0x08846y0174]links[typearcsource1target10rel1weight1typearcsource2target10rel1weight1typearcsource3target10rel1weight1typearcsource1target7rel1weight1typearcsource3target7rel1weight1typearcsource4target8rel1weight1typearcsource4target14rel4weight1
typearcsource10target7rel2weight1typearcsource14target15rel5weight1typearcsource11target16rel5weight1
]
bibjson picture bibV Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON files anddisplaying a network with given nodesrsquo coordinates
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltinput type=rsquofilersquo accept=rsquoapplicationjsonrsquo onchange=rsquoopenFile(event)rsquogtltscriptgtfunction process(graph) set up the drawing areavar width = 500height = 500 s = graphattributesorg
var svg = d3select(body)append(svg)attr(width width)attr(height height)attr(xmlns httpwwww3org2000svg)
draw the linksvar link = svgselectAll(line)data(graphlinks)enter()append(line)style(stroke function(di) return((dtype==arc magenta blue)))attr(stroke-width 2)attr(x1 function(d) return(graphnodes[dsource-s]xwidth))attr(y1 function(d) return(graphnodes[dsource-s]yheight))attr(x2 function(d) return(graphnodes[dtarget-s]xwidth))attr(y2 function(d) return(graphnodes[dtarget-s]yheight))
draw the nodesvar node = svgselectAll(circle)data(graphnodes)enter()append(circle)attr(r 15)attr(cx function(di) return(dxwidth))attr(cy function(di) return(dyheight))attr(fill yellow)attr(stroke red)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
readingadapted from Matt West Reading Files Using The HTML5 FileReader API
var openFile = function(event) var input = eventtargetvar reader = new FileReader()readeronload = function()process(JSONparse(readerresult))
readerreadAsText(inputfiles[0])
ltscriptgtltbodygt
graphReadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON file from serveradapted from Ying Kit Yuen jQuery amp Javascript -ndash Read JSON files on server
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtlttitlegtLoad JSON file from serverlttitlegtlt-- httpeurekaykyueninfo20130925jquery-javascript-read-json-files-on-server --gtltscript src=httpajaxgoogleapiscomajaxlibsjquery1102jqueryminjsgtltscriptgtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltselect id=datagtltoption value=graphjsongtgraphjsonltoptiongtltoption value=classjsongtclassjsonltoptiongt
ltselectgtltbutton id=btngtReadltbuttongtltscriptgtfunction process(graph) set up the drawing area the body of function process is the same as in the previous exampleattr(stroke red)
$(btn)click(function()$getJSON($(data)val() function(json) process(json))
)ltscriptgtltbodygt
graphLoadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Network displayer graphXY
drawNetjs
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
graphXYgen
ltDOCTYPE htmlgtltmeta charset=utf-8gtltbodygtlt-- script src=graphAjsgtltscript --gtltscript src=graphBjsgtltscriptgtlt-- script src=classSjsgtltscript --gtltscript src=drawNetjsgtltscriptgtltscript src=d3d3jsgtltscriptgtltscriptgtvars = graphinfoorgwidth = graphstylecanvaswidthheight = graphstylecanvasheightvar lw = 1if ( typeof graphstyle == rsquoundefinedrsquo ampamp graphstyle) if ( typeof graphstylelink == rsquoundefinedrsquo ampamp graphstylelink )
if ( typeof graphstylelinkwidth == rsquoundefinedrsquo ampamp graphstylelinkwidth ) var lw = graphstylelinkwidth
if(graphnetJSON==rsquogeneralrsquo) var OK = drawNet(graphpersonsdatagraphfrienddata)
else var OK = drawNet(graphnodesgraphlinks)
ltscriptgtltbodygt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Saving SVG pictureS Murray Interactive Data Visualization for the Web p 235
In Google Chrome we draw a picture and open the Developer ToolsIn the Elements we identify the SVG subobject select it copy it intosome text editor and save with extension svg
To enhance the picture or to transform it to other picture formats we
process it using some vector graphics editor
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
To do
bull displayer templates can be based on GUI
bull for a description of multirelational networks we use the rel
attribute in the general version they can be treated asseparate sets of links
bull properties are considered as attributes in the general versionthey can be represented as special objects vector partitionpermutation and cluster
bull use temporal quantities for describing temporal networks
bull extend the list of info-attributes attributes type (simpletemporal) twoModeOrg nStrong nRelations planar
bull icons can be used for visualization of nodes Font AwesomeMaterial Icons tests
bull links can be visually represented in many different ways that canbe described in style
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
to do
bull style can be attached as an attribute also to an element(node link) thus changing the default settings
bull add the visualization of arcs with arrows Directed Graph EditorD3 Tips and Tricks
bull to be included in netD3js vzmetno risanje Force in urejanjeSpringy Matrix with permutations
bull can some attributes be renamed from tail nodeA rarrsource to head nodeB rarr target may be the simplestsolution is a replace in some text editor
bull implement saving of the obtained SVG picture to a file ExportSVG with Style d3jsSVG Export demo
bull include in netJSON elements useful in some applications suchas hooks or inout-ports background image etc
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Sources
Ideas for visualization styles can be found in GoJS - InteractiveDiagrams for JavaScript and HTML Visjs in VisualComplexity
GoJS mdashSankey Diagram Family Tree Logic Circuit DynamicPortsVega - a visualization grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References I
Vladimir Batagelj Complex Networks Visualization of RA Meyersed Encyclopedia of Complexity and Systems Science Springer 20091253-1268
Vladimir Batagelj Andrej Mrvar Pajek manual
Jernej Bodlaj Network Data File Formats in Reda Alhajj Jon Rokne(eds) Encyclopedia of Social Network Analysis and Mining SpringerNew York 2014 p 1076-1091
Richard Brath David Jonker Graph Analysis and VisualizationDiscovering Business Opportunity in Linked Data John Wiley amp SonsIndianapolis Indiana 2015
Emden Gansner Eleftherios Koutsofios Stephen North Drawinggraphs with dot January 26 2006
Scott Murray Interactive Data Visualization for the Web OrsquoReillySebastopol 2013
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References II
Wouter De Nooy Andrej Mrvar Vladimir Batagelj Exploratory SocialNetwork Analysis with Pajek Revised and Expanded Second EditionStructural Analysis in the Social Sciences Cambridge UniversityPress September 2011
Matthew Roughan Jonathan Tuke Unravelling Graph-Exchange FileFormats arXiv150302781 submitted on 10 Mar 2015
Wikipedia JSON
Leland Wilkinson The Grammar of Graphics Springer-Verlag NewYork 2005
V Batagelj JSON amp D3js
- Introduction
- Description of networks
- JSON
- JSON and D3js
- JSON and R
- Displayer
- To do
- References
-
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
eval and JSONparseevalhtml
lthtmlgtltheadgtlttitlegtJSON eval and parselttitlegtltheadgtltbodygtltscriptgtvar data=rsquo[abca[true null314]bBBBBBc12e+5]rsquoalert(JSON + data)documentwrite(JSONltttgt+data+ltttgtltbrgt)var value = eval(rsquo(rsquo + data + rsquo)rsquo)consolelog(eval) consolelog(value)documentwrite(evalltttgt+JSONstringify(value)+ltttgtltbrgt)var json = JSONparse(data)consolelog(JSONparse) consolelog(json)ltscriptgtltbodygtlthtmlgt
To run the Javascript code I used the Google Chrome browser To get theconsole we selectCustomize and Control GC More tools Developer tools
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
eval and JSONparse
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Importing data as Javascript assignmentimporthtml
lthtmlgtltheadgtlttitlegtJSON importlttitlegtltscript src=personjsgtltscriptgtltheadgtltbodygtltscriptgtdocumentwrite(JSONltttgt+person+ltttgtltbrgt)documentwrite(stringltttgt+JSONstringify(person)+ltttgtltbrgt)consolelog(JSON) consolelog(person)ltscriptgtltbodygtlthtmlgt
personjs
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Well formed and valid JSON files
A JSON file is well formed iff it respects JSONrsquos grammarIs my file well formed service JSONlint - another checker
JSON editor
Similar to XMLrsquos DTD files or schema we can imposeadditional restrictions to the structure of JSON files describingspecial types of data using JSON schema ndash the JSON filesrespecting these additional restrictions are called valid
Github validation JSON Schema Lint JSON Schemavalidator
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Simple examplegraphjson
infoorg0nNodes4nodes[nameAnnx02y02Num1Size100nameBenx02y08Num4Size500nameTimx08y02Num2Size200nameZoex08y08Num3Size400
]links[source0target1Count1Weight100source1target2Count1Weight100source2target3Count1Weight100source1target3Count2Weight300
]
In graphjs the JSON description is assigned to the variable graph
graph = infoorg0nNodes4nodes[
]
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Circular layoutadapted from Brath and Jonker p 257-258
ltDOCTYPE htmlgtlthtmlgtltheadgtltmeta charset=utf-8gtltscript src=graphjsgtltscriptgtlt-- script src=classjsgtltscript --gtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltscriptgt set up the drawing areavar width = 500
height = 500var svg = d3select(body)append(svg)
attr(width width)
attr(height height)
attr(xmlns httpwwww3org2000svg) angle and radius for layout assistancevar ang = 2 MathPI graphnodeslengthvar rad = width 25
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Circular layout
create the linksvar link = svgselectAll(line)data(graphlinks)enter()append(line)style(strokeblue)attr(stroke-width2)attr(x1function(d)return(radMathcos(dsourceang)+5width))attr(y1function(d)return(radMathsin(dsourceang)+5width))attr(x2function(d)return(radMathcos(dtargetang)+5width))attr(y2function(d)return(radMathsin(dtargetang)+5width))
create the nodes and set out in a circular layoutvar node = svgselectAll(circle)data(graphnodes)enter()append(circle)attr(r10)attr(cxfunction(di)return(radMathcos(iang)+5width))attr(cyfunction(di)return(radMathsin(iang)+5width))attr(fillyellow)attr(strokered)
ltscriptgtltbodygt
graphCirclehtml classjson classjs classCirclehtml+ labels classCircleLhtml+ permutation classPjson classPjs classCirclePhtm
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
SVG
ltxml version=10 encoding=UTF-8 standalone=yesgtltsvg width=500 height=500 xmlns=httpwwww3org2000svggtltline stroke-width=2 x1=450 y1=250 x2=250 y2=450 style=stroke bluegtltlinegtltline stroke-width=2 x1=250 y1=450 x2=50 y2=250 style=stroke bluegtltlinegtltline stroke-width=2 x1=50 y1=250 x2=250 y2=50 style=stroke bluegtltlinegtltline stroke-width=2 x1=250 y1=450 x2=250 y2=50 style=stroke bluegtltlinegtltcircle r=10 cx=450 cy=250 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=250 cy=450 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=50 cy=250 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=250 cy=50 fill=yellow stroke=redgtltcirclegtltsvggt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Networks in JSON format basic netJSONclassjson
netJSON basicinfo network class org 1 nNodes 15
nArcs 30 nEdges 13 nWeak 1title borrowing study materialsmeta date October 2015 author V Batagelj
nodes [
id 1 short m02 x 01857 y 02781 size 1 id 2 short m03 x 05482 y 06169 size 1 id 3 short w07 x 02219 y 04526 size 2 id 4 short w09 x 08078 y 03223 size 2
id 14 short m89 x 04000 y 08469 size 1 id 15 short m96 x 03482 y 01778 size 1
]links [
type arc source 6 target 15 weight 1 type arc source 2 target 7 weight 1
type arc source15 target 3 weight 1 type edge source 6 target 12 weight 1
type edge source 4 target 12 weight 1 type edge source 6 target 13 weight 1
]
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON and RTransforming Pajek NET and CLU files in to JSON
nodes[nameMyrielgroup1nameNapoleongroup1 nameBrujongroup4nameMmeHucheloupgroup8]
links[source1target0value1source2target0value8 source76target48value1source76target58value1]
setwd(CUsersBatageljtestpython2012amazon)library(rjson)
net2json lt- function(netFcluFjsonF)net lt- file(netFr) clu lt- file(cluFr)b lt- unlist(strsplit(readLines(netn=1) ))n lt- asinteger(b[length(b)])N lt- readLines(netn=n) nam lt- character(n)for(i in 1n) nam[i] lt- unlist(strsplit(N[i]rsquorsquo))[2]skip lt- readLines(clun=1) C lt- asinteger(readLines(clun=n))skip lt- readLines(netn=1) L lt- readLines(netn=-1)M lt- matrix(asinteger(unlist(strsplit(sub(rsquo^s+rsquorsquorsquoL)rsquos+rsquo)))ncol=3byrow=TRUE)nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(name=nam[i]group=C[i])m lt- nrow(M) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(source=M[i1]-1target=M[i2]-1value=M[i3])data lt- list(nodes=nodslinks=lnks)jstr lt- toJSON(data)json lt- file(jsonFw) cat(jstrfile=json)close(json) close(net) close(clu)
net2json(islandsnetislandscluislandsjson)
islands island 1 island 4 force islands
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
CSV2JSONR
transforming CSV files to JSON file by Vladimir Batagelj June 2016setwd(CUsersbatageljworkPythongraphSVGEUSN)library(rjson)colC lt- c(rep(character4)rep(numeric5)) nas lt- c(NANaN)nodes lt- readcsv2(bibNodesXYcsvencoding=rsquoUTF-8rsquocolClasses=colCnastrings=nas)M lt- factor(nodes$mode) mod lt- levels(M) M lt- asnumeric(M)S lt- factor(nodes$sex) sx lt- levels(S) S lt- asnumeric(S) S[isna(S)] lt- 0links lt- readcsv2(bibLinkscsvencoding=rsquoUTF-8rsquocolClasses=character)F lt- asnumeric(factor(links$fromlevels=nodes$nameordered=TRUE))T lt- asnumeric(factor(links$tolevels=nodes$nameordered=TRUE))R lt- factor(links$relation) rel lt-levels(R) R lt- asnumeric(R)n lt- nrow(nodes) nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(id=iname=nodes$name[i]mode=M[i]
sex=S[i]x=asnumeric(nodes$x[i])1000y=asnumeric(nodes$y[i])1000)m lt- nrow(links) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(type=arcsource=F[i]target=T[i]
rel=R[i]weight=1)meta lt- list(date=June 112016author=Vladimir Batagelj)leg lt- list(mode=modsex=sxrel=rel)inf lt- list(network=biborg=1nNodes=nnArcs=mtitle=Example for EUSNrsquo16legend=legmeta=meta)
data lt- list(netJSON=basicinfo=infnodes=nodslinks=lnks)json lt- file(bibjsonw) cat(toJSON(data)file=json) close(json)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibjson
netJSONbasicinfonetworkbiborg1nNodes16nArcs19titleExample for EUSNrsquo16legendmode[bookjournalpaperpersonpublisherseries]sex[fm]rel[authorOfcitescontainedIneditorOfpublishedBy]
metadateJune 112016authorVladimir Batageljnodes[id1nameBatagelj Vladimirmode4sex2x08091y06537id2nameDoreian Patrickmode4sex2x03585y06791id3nameFerligoj Anuu0161kamode4sex1x06195y06807id4nameGranovetter Markmode4sex2x01456y06605id5nameMoustaki Irinimode4sex1x0783y0228id6nameMrvar Andrejmode4sex2x0478y06301id7nameClustering with relational constraintmode3sex0x06841y03801
id15nameCambridge University Pressmode5sex0x05343y02382id16nameSpringermode5sex0x08846y0174]links[typearcsource1target10rel1weight1typearcsource2target10rel1weight1typearcsource3target10rel1weight1typearcsource1target7rel1weight1typearcsource3target7rel1weight1typearcsource4target8rel1weight1typearcsource4target14rel4weight1
typearcsource10target7rel2weight1typearcsource14target15rel5weight1typearcsource11target16rel5weight1
]
bibjson picture bibV Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON files anddisplaying a network with given nodesrsquo coordinates
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltinput type=rsquofilersquo accept=rsquoapplicationjsonrsquo onchange=rsquoopenFile(event)rsquogtltscriptgtfunction process(graph) set up the drawing areavar width = 500height = 500 s = graphattributesorg
var svg = d3select(body)append(svg)attr(width width)attr(height height)attr(xmlns httpwwww3org2000svg)
draw the linksvar link = svgselectAll(line)data(graphlinks)enter()append(line)style(stroke function(di) return((dtype==arc magenta blue)))attr(stroke-width 2)attr(x1 function(d) return(graphnodes[dsource-s]xwidth))attr(y1 function(d) return(graphnodes[dsource-s]yheight))attr(x2 function(d) return(graphnodes[dtarget-s]xwidth))attr(y2 function(d) return(graphnodes[dtarget-s]yheight))
draw the nodesvar node = svgselectAll(circle)data(graphnodes)enter()append(circle)attr(r 15)attr(cx function(di) return(dxwidth))attr(cy function(di) return(dyheight))attr(fill yellow)attr(stroke red)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
readingadapted from Matt West Reading Files Using The HTML5 FileReader API
var openFile = function(event) var input = eventtargetvar reader = new FileReader()readeronload = function()process(JSONparse(readerresult))
readerreadAsText(inputfiles[0])
ltscriptgtltbodygt
graphReadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON file from serveradapted from Ying Kit Yuen jQuery amp Javascript -ndash Read JSON files on server
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtlttitlegtLoad JSON file from serverlttitlegtlt-- httpeurekaykyueninfo20130925jquery-javascript-read-json-files-on-server --gtltscript src=httpajaxgoogleapiscomajaxlibsjquery1102jqueryminjsgtltscriptgtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltselect id=datagtltoption value=graphjsongtgraphjsonltoptiongtltoption value=classjsongtclassjsonltoptiongt
ltselectgtltbutton id=btngtReadltbuttongtltscriptgtfunction process(graph) set up the drawing area the body of function process is the same as in the previous exampleattr(stroke red)
$(btn)click(function()$getJSON($(data)val() function(json) process(json))
)ltscriptgtltbodygt
graphLoadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Network displayer graphXY
drawNetjs
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
graphXYgen
ltDOCTYPE htmlgtltmeta charset=utf-8gtltbodygtlt-- script src=graphAjsgtltscript --gtltscript src=graphBjsgtltscriptgtlt-- script src=classSjsgtltscript --gtltscript src=drawNetjsgtltscriptgtltscript src=d3d3jsgtltscriptgtltscriptgtvars = graphinfoorgwidth = graphstylecanvaswidthheight = graphstylecanvasheightvar lw = 1if ( typeof graphstyle == rsquoundefinedrsquo ampamp graphstyle) if ( typeof graphstylelink == rsquoundefinedrsquo ampamp graphstylelink )
if ( typeof graphstylelinkwidth == rsquoundefinedrsquo ampamp graphstylelinkwidth ) var lw = graphstylelinkwidth
if(graphnetJSON==rsquogeneralrsquo) var OK = drawNet(graphpersonsdatagraphfrienddata)
else var OK = drawNet(graphnodesgraphlinks)
ltscriptgtltbodygt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Saving SVG pictureS Murray Interactive Data Visualization for the Web p 235
In Google Chrome we draw a picture and open the Developer ToolsIn the Elements we identify the SVG subobject select it copy it intosome text editor and save with extension svg
To enhance the picture or to transform it to other picture formats we
process it using some vector graphics editor
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
To do
bull displayer templates can be based on GUI
bull for a description of multirelational networks we use the rel
attribute in the general version they can be treated asseparate sets of links
bull properties are considered as attributes in the general versionthey can be represented as special objects vector partitionpermutation and cluster
bull use temporal quantities for describing temporal networks
bull extend the list of info-attributes attributes type (simpletemporal) twoModeOrg nStrong nRelations planar
bull icons can be used for visualization of nodes Font AwesomeMaterial Icons tests
bull links can be visually represented in many different ways that canbe described in style
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
to do
bull style can be attached as an attribute also to an element(node link) thus changing the default settings
bull add the visualization of arcs with arrows Directed Graph EditorD3 Tips and Tricks
bull to be included in netD3js vzmetno risanje Force in urejanjeSpringy Matrix with permutations
bull can some attributes be renamed from tail nodeA rarrsource to head nodeB rarr target may be the simplestsolution is a replace in some text editor
bull implement saving of the obtained SVG picture to a file ExportSVG with Style d3jsSVG Export demo
bull include in netJSON elements useful in some applications suchas hooks or inout-ports background image etc
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Sources
Ideas for visualization styles can be found in GoJS - InteractiveDiagrams for JavaScript and HTML Visjs in VisualComplexity
GoJS mdashSankey Diagram Family Tree Logic Circuit DynamicPortsVega - a visualization grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References I
Vladimir Batagelj Complex Networks Visualization of RA Meyersed Encyclopedia of Complexity and Systems Science Springer 20091253-1268
Vladimir Batagelj Andrej Mrvar Pajek manual
Jernej Bodlaj Network Data File Formats in Reda Alhajj Jon Rokne(eds) Encyclopedia of Social Network Analysis and Mining SpringerNew York 2014 p 1076-1091
Richard Brath David Jonker Graph Analysis and VisualizationDiscovering Business Opportunity in Linked Data John Wiley amp SonsIndianapolis Indiana 2015
Emden Gansner Eleftherios Koutsofios Stephen North Drawinggraphs with dot January 26 2006
Scott Murray Interactive Data Visualization for the Web OrsquoReillySebastopol 2013
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References II
Wouter De Nooy Andrej Mrvar Vladimir Batagelj Exploratory SocialNetwork Analysis with Pajek Revised and Expanded Second EditionStructural Analysis in the Social Sciences Cambridge UniversityPress September 2011
Matthew Roughan Jonathan Tuke Unravelling Graph-Exchange FileFormats arXiv150302781 submitted on 10 Mar 2015
Wikipedia JSON
Leland Wilkinson The Grammar of Graphics Springer-Verlag NewYork 2005
V Batagelj JSON amp D3js
- Introduction
- Description of networks
- JSON
- JSON and D3js
- JSON and R
- Displayer
- To do
- References
-
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
eval and JSONparseevalhtml
lthtmlgtltheadgtlttitlegtJSON eval and parselttitlegtltheadgtltbodygtltscriptgtvar data=rsquo[abca[true null314]bBBBBBc12e+5]rsquoalert(JSON + data)documentwrite(JSONltttgt+data+ltttgtltbrgt)var value = eval(rsquo(rsquo + data + rsquo)rsquo)consolelog(eval) consolelog(value)documentwrite(evalltttgt+JSONstringify(value)+ltttgtltbrgt)var json = JSONparse(data)consolelog(JSONparse) consolelog(json)ltscriptgtltbodygtlthtmlgt
To run the Javascript code I used the Google Chrome browser To get theconsole we selectCustomize and Control GC More tools Developer tools
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
eval and JSONparse
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Importing data as Javascript assignmentimporthtml
lthtmlgtltheadgtlttitlegtJSON importlttitlegtltscript src=personjsgtltscriptgtltheadgtltbodygtltscriptgtdocumentwrite(JSONltttgt+person+ltttgtltbrgt)documentwrite(stringltttgt+JSONstringify(person)+ltttgtltbrgt)consolelog(JSON) consolelog(person)ltscriptgtltbodygtlthtmlgt
personjs
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Well formed and valid JSON files
A JSON file is well formed iff it respects JSONrsquos grammarIs my file well formed service JSONlint - another checker
JSON editor
Similar to XMLrsquos DTD files or schema we can imposeadditional restrictions to the structure of JSON files describingspecial types of data using JSON schema ndash the JSON filesrespecting these additional restrictions are called valid
Github validation JSON Schema Lint JSON Schemavalidator
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Simple examplegraphjson
infoorg0nNodes4nodes[nameAnnx02y02Num1Size100nameBenx02y08Num4Size500nameTimx08y02Num2Size200nameZoex08y08Num3Size400
]links[source0target1Count1Weight100source1target2Count1Weight100source2target3Count1Weight100source1target3Count2Weight300
]
In graphjs the JSON description is assigned to the variable graph
graph = infoorg0nNodes4nodes[
]
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Circular layoutadapted from Brath and Jonker p 257-258
ltDOCTYPE htmlgtlthtmlgtltheadgtltmeta charset=utf-8gtltscript src=graphjsgtltscriptgtlt-- script src=classjsgtltscript --gtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltscriptgt set up the drawing areavar width = 500
height = 500var svg = d3select(body)append(svg)
attr(width width)
attr(height height)
attr(xmlns httpwwww3org2000svg) angle and radius for layout assistancevar ang = 2 MathPI graphnodeslengthvar rad = width 25
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Circular layout
create the linksvar link = svgselectAll(line)data(graphlinks)enter()append(line)style(strokeblue)attr(stroke-width2)attr(x1function(d)return(radMathcos(dsourceang)+5width))attr(y1function(d)return(radMathsin(dsourceang)+5width))attr(x2function(d)return(radMathcos(dtargetang)+5width))attr(y2function(d)return(radMathsin(dtargetang)+5width))
create the nodes and set out in a circular layoutvar node = svgselectAll(circle)data(graphnodes)enter()append(circle)attr(r10)attr(cxfunction(di)return(radMathcos(iang)+5width))attr(cyfunction(di)return(radMathsin(iang)+5width))attr(fillyellow)attr(strokered)
ltscriptgtltbodygt
graphCirclehtml classjson classjs classCirclehtml+ labels classCircleLhtml+ permutation classPjson classPjs classCirclePhtm
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
SVG
ltxml version=10 encoding=UTF-8 standalone=yesgtltsvg width=500 height=500 xmlns=httpwwww3org2000svggtltline stroke-width=2 x1=450 y1=250 x2=250 y2=450 style=stroke bluegtltlinegtltline stroke-width=2 x1=250 y1=450 x2=50 y2=250 style=stroke bluegtltlinegtltline stroke-width=2 x1=50 y1=250 x2=250 y2=50 style=stroke bluegtltlinegtltline stroke-width=2 x1=250 y1=450 x2=250 y2=50 style=stroke bluegtltlinegtltcircle r=10 cx=450 cy=250 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=250 cy=450 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=50 cy=250 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=250 cy=50 fill=yellow stroke=redgtltcirclegtltsvggt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Networks in JSON format basic netJSONclassjson
netJSON basicinfo network class org 1 nNodes 15
nArcs 30 nEdges 13 nWeak 1title borrowing study materialsmeta date October 2015 author V Batagelj
nodes [
id 1 short m02 x 01857 y 02781 size 1 id 2 short m03 x 05482 y 06169 size 1 id 3 short w07 x 02219 y 04526 size 2 id 4 short w09 x 08078 y 03223 size 2
id 14 short m89 x 04000 y 08469 size 1 id 15 short m96 x 03482 y 01778 size 1
]links [
type arc source 6 target 15 weight 1 type arc source 2 target 7 weight 1
type arc source15 target 3 weight 1 type edge source 6 target 12 weight 1
type edge source 4 target 12 weight 1 type edge source 6 target 13 weight 1
]
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON and RTransforming Pajek NET and CLU files in to JSON
nodes[nameMyrielgroup1nameNapoleongroup1 nameBrujongroup4nameMmeHucheloupgroup8]
links[source1target0value1source2target0value8 source76target48value1source76target58value1]
setwd(CUsersBatageljtestpython2012amazon)library(rjson)
net2json lt- function(netFcluFjsonF)net lt- file(netFr) clu lt- file(cluFr)b lt- unlist(strsplit(readLines(netn=1) ))n lt- asinteger(b[length(b)])N lt- readLines(netn=n) nam lt- character(n)for(i in 1n) nam[i] lt- unlist(strsplit(N[i]rsquorsquo))[2]skip lt- readLines(clun=1) C lt- asinteger(readLines(clun=n))skip lt- readLines(netn=1) L lt- readLines(netn=-1)M lt- matrix(asinteger(unlist(strsplit(sub(rsquo^s+rsquorsquorsquoL)rsquos+rsquo)))ncol=3byrow=TRUE)nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(name=nam[i]group=C[i])m lt- nrow(M) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(source=M[i1]-1target=M[i2]-1value=M[i3])data lt- list(nodes=nodslinks=lnks)jstr lt- toJSON(data)json lt- file(jsonFw) cat(jstrfile=json)close(json) close(net) close(clu)
net2json(islandsnetislandscluislandsjson)
islands island 1 island 4 force islands
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
CSV2JSONR
transforming CSV files to JSON file by Vladimir Batagelj June 2016setwd(CUsersbatageljworkPythongraphSVGEUSN)library(rjson)colC lt- c(rep(character4)rep(numeric5)) nas lt- c(NANaN)nodes lt- readcsv2(bibNodesXYcsvencoding=rsquoUTF-8rsquocolClasses=colCnastrings=nas)M lt- factor(nodes$mode) mod lt- levels(M) M lt- asnumeric(M)S lt- factor(nodes$sex) sx lt- levels(S) S lt- asnumeric(S) S[isna(S)] lt- 0links lt- readcsv2(bibLinkscsvencoding=rsquoUTF-8rsquocolClasses=character)F lt- asnumeric(factor(links$fromlevels=nodes$nameordered=TRUE))T lt- asnumeric(factor(links$tolevels=nodes$nameordered=TRUE))R lt- factor(links$relation) rel lt-levels(R) R lt- asnumeric(R)n lt- nrow(nodes) nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(id=iname=nodes$name[i]mode=M[i]
sex=S[i]x=asnumeric(nodes$x[i])1000y=asnumeric(nodes$y[i])1000)m lt- nrow(links) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(type=arcsource=F[i]target=T[i]
rel=R[i]weight=1)meta lt- list(date=June 112016author=Vladimir Batagelj)leg lt- list(mode=modsex=sxrel=rel)inf lt- list(network=biborg=1nNodes=nnArcs=mtitle=Example for EUSNrsquo16legend=legmeta=meta)
data lt- list(netJSON=basicinfo=infnodes=nodslinks=lnks)json lt- file(bibjsonw) cat(toJSON(data)file=json) close(json)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibjson
netJSONbasicinfonetworkbiborg1nNodes16nArcs19titleExample for EUSNrsquo16legendmode[bookjournalpaperpersonpublisherseries]sex[fm]rel[authorOfcitescontainedIneditorOfpublishedBy]
metadateJune 112016authorVladimir Batageljnodes[id1nameBatagelj Vladimirmode4sex2x08091y06537id2nameDoreian Patrickmode4sex2x03585y06791id3nameFerligoj Anuu0161kamode4sex1x06195y06807id4nameGranovetter Markmode4sex2x01456y06605id5nameMoustaki Irinimode4sex1x0783y0228id6nameMrvar Andrejmode4sex2x0478y06301id7nameClustering with relational constraintmode3sex0x06841y03801
id15nameCambridge University Pressmode5sex0x05343y02382id16nameSpringermode5sex0x08846y0174]links[typearcsource1target10rel1weight1typearcsource2target10rel1weight1typearcsource3target10rel1weight1typearcsource1target7rel1weight1typearcsource3target7rel1weight1typearcsource4target8rel1weight1typearcsource4target14rel4weight1
typearcsource10target7rel2weight1typearcsource14target15rel5weight1typearcsource11target16rel5weight1
]
bibjson picture bibV Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON files anddisplaying a network with given nodesrsquo coordinates
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltinput type=rsquofilersquo accept=rsquoapplicationjsonrsquo onchange=rsquoopenFile(event)rsquogtltscriptgtfunction process(graph) set up the drawing areavar width = 500height = 500 s = graphattributesorg
var svg = d3select(body)append(svg)attr(width width)attr(height height)attr(xmlns httpwwww3org2000svg)
draw the linksvar link = svgselectAll(line)data(graphlinks)enter()append(line)style(stroke function(di) return((dtype==arc magenta blue)))attr(stroke-width 2)attr(x1 function(d) return(graphnodes[dsource-s]xwidth))attr(y1 function(d) return(graphnodes[dsource-s]yheight))attr(x2 function(d) return(graphnodes[dtarget-s]xwidth))attr(y2 function(d) return(graphnodes[dtarget-s]yheight))
draw the nodesvar node = svgselectAll(circle)data(graphnodes)enter()append(circle)attr(r 15)attr(cx function(di) return(dxwidth))attr(cy function(di) return(dyheight))attr(fill yellow)attr(stroke red)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
readingadapted from Matt West Reading Files Using The HTML5 FileReader API
var openFile = function(event) var input = eventtargetvar reader = new FileReader()readeronload = function()process(JSONparse(readerresult))
readerreadAsText(inputfiles[0])
ltscriptgtltbodygt
graphReadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON file from serveradapted from Ying Kit Yuen jQuery amp Javascript -ndash Read JSON files on server
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtlttitlegtLoad JSON file from serverlttitlegtlt-- httpeurekaykyueninfo20130925jquery-javascript-read-json-files-on-server --gtltscript src=httpajaxgoogleapiscomajaxlibsjquery1102jqueryminjsgtltscriptgtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltselect id=datagtltoption value=graphjsongtgraphjsonltoptiongtltoption value=classjsongtclassjsonltoptiongt
ltselectgtltbutton id=btngtReadltbuttongtltscriptgtfunction process(graph) set up the drawing area the body of function process is the same as in the previous exampleattr(stroke red)
$(btn)click(function()$getJSON($(data)val() function(json) process(json))
)ltscriptgtltbodygt
graphLoadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Network displayer graphXY
drawNetjs
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
graphXYgen
ltDOCTYPE htmlgtltmeta charset=utf-8gtltbodygtlt-- script src=graphAjsgtltscript --gtltscript src=graphBjsgtltscriptgtlt-- script src=classSjsgtltscript --gtltscript src=drawNetjsgtltscriptgtltscript src=d3d3jsgtltscriptgtltscriptgtvars = graphinfoorgwidth = graphstylecanvaswidthheight = graphstylecanvasheightvar lw = 1if ( typeof graphstyle == rsquoundefinedrsquo ampamp graphstyle) if ( typeof graphstylelink == rsquoundefinedrsquo ampamp graphstylelink )
if ( typeof graphstylelinkwidth == rsquoundefinedrsquo ampamp graphstylelinkwidth ) var lw = graphstylelinkwidth
if(graphnetJSON==rsquogeneralrsquo) var OK = drawNet(graphpersonsdatagraphfrienddata)
else var OK = drawNet(graphnodesgraphlinks)
ltscriptgtltbodygt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Saving SVG pictureS Murray Interactive Data Visualization for the Web p 235
In Google Chrome we draw a picture and open the Developer ToolsIn the Elements we identify the SVG subobject select it copy it intosome text editor and save with extension svg
To enhance the picture or to transform it to other picture formats we
process it using some vector graphics editor
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
To do
bull displayer templates can be based on GUI
bull for a description of multirelational networks we use the rel
attribute in the general version they can be treated asseparate sets of links
bull properties are considered as attributes in the general versionthey can be represented as special objects vector partitionpermutation and cluster
bull use temporal quantities for describing temporal networks
bull extend the list of info-attributes attributes type (simpletemporal) twoModeOrg nStrong nRelations planar
bull icons can be used for visualization of nodes Font AwesomeMaterial Icons tests
bull links can be visually represented in many different ways that canbe described in style
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
to do
bull style can be attached as an attribute also to an element(node link) thus changing the default settings
bull add the visualization of arcs with arrows Directed Graph EditorD3 Tips and Tricks
bull to be included in netD3js vzmetno risanje Force in urejanjeSpringy Matrix with permutations
bull can some attributes be renamed from tail nodeA rarrsource to head nodeB rarr target may be the simplestsolution is a replace in some text editor
bull implement saving of the obtained SVG picture to a file ExportSVG with Style d3jsSVG Export demo
bull include in netJSON elements useful in some applications suchas hooks or inout-ports background image etc
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Sources
Ideas for visualization styles can be found in GoJS - InteractiveDiagrams for JavaScript and HTML Visjs in VisualComplexity
GoJS mdashSankey Diagram Family Tree Logic Circuit DynamicPortsVega - a visualization grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References I
Vladimir Batagelj Complex Networks Visualization of RA Meyersed Encyclopedia of Complexity and Systems Science Springer 20091253-1268
Vladimir Batagelj Andrej Mrvar Pajek manual
Jernej Bodlaj Network Data File Formats in Reda Alhajj Jon Rokne(eds) Encyclopedia of Social Network Analysis and Mining SpringerNew York 2014 p 1076-1091
Richard Brath David Jonker Graph Analysis and VisualizationDiscovering Business Opportunity in Linked Data John Wiley amp SonsIndianapolis Indiana 2015
Emden Gansner Eleftherios Koutsofios Stephen North Drawinggraphs with dot January 26 2006
Scott Murray Interactive Data Visualization for the Web OrsquoReillySebastopol 2013
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References II
Wouter De Nooy Andrej Mrvar Vladimir Batagelj Exploratory SocialNetwork Analysis with Pajek Revised and Expanded Second EditionStructural Analysis in the Social Sciences Cambridge UniversityPress September 2011
Matthew Roughan Jonathan Tuke Unravelling Graph-Exchange FileFormats arXiv150302781 submitted on 10 Mar 2015
Wikipedia JSON
Leland Wilkinson The Grammar of Graphics Springer-Verlag NewYork 2005
V Batagelj JSON amp D3js
- Introduction
- Description of networks
- JSON
- JSON and D3js
- JSON and R
- Displayer
- To do
- References
-
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
eval and JSONparseevalhtml
lthtmlgtltheadgtlttitlegtJSON eval and parselttitlegtltheadgtltbodygtltscriptgtvar data=rsquo[abca[true null314]bBBBBBc12e+5]rsquoalert(JSON + data)documentwrite(JSONltttgt+data+ltttgtltbrgt)var value = eval(rsquo(rsquo + data + rsquo)rsquo)consolelog(eval) consolelog(value)documentwrite(evalltttgt+JSONstringify(value)+ltttgtltbrgt)var json = JSONparse(data)consolelog(JSONparse) consolelog(json)ltscriptgtltbodygtlthtmlgt
To run the Javascript code I used the Google Chrome browser To get theconsole we selectCustomize and Control GC More tools Developer tools
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
eval and JSONparse
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Importing data as Javascript assignmentimporthtml
lthtmlgtltheadgtlttitlegtJSON importlttitlegtltscript src=personjsgtltscriptgtltheadgtltbodygtltscriptgtdocumentwrite(JSONltttgt+person+ltttgtltbrgt)documentwrite(stringltttgt+JSONstringify(person)+ltttgtltbrgt)consolelog(JSON) consolelog(person)ltscriptgtltbodygtlthtmlgt
personjs
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Well formed and valid JSON files
A JSON file is well formed iff it respects JSONrsquos grammarIs my file well formed service JSONlint - another checker
JSON editor
Similar to XMLrsquos DTD files or schema we can imposeadditional restrictions to the structure of JSON files describingspecial types of data using JSON schema ndash the JSON filesrespecting these additional restrictions are called valid
Github validation JSON Schema Lint JSON Schemavalidator
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Simple examplegraphjson
infoorg0nNodes4nodes[nameAnnx02y02Num1Size100nameBenx02y08Num4Size500nameTimx08y02Num2Size200nameZoex08y08Num3Size400
]links[source0target1Count1Weight100source1target2Count1Weight100source2target3Count1Weight100source1target3Count2Weight300
]
In graphjs the JSON description is assigned to the variable graph
graph = infoorg0nNodes4nodes[
]
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Circular layoutadapted from Brath and Jonker p 257-258
ltDOCTYPE htmlgtlthtmlgtltheadgtltmeta charset=utf-8gtltscript src=graphjsgtltscriptgtlt-- script src=classjsgtltscript --gtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltscriptgt set up the drawing areavar width = 500
height = 500var svg = d3select(body)append(svg)
attr(width width)
attr(height height)
attr(xmlns httpwwww3org2000svg) angle and radius for layout assistancevar ang = 2 MathPI graphnodeslengthvar rad = width 25
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Circular layout
create the linksvar link = svgselectAll(line)data(graphlinks)enter()append(line)style(strokeblue)attr(stroke-width2)attr(x1function(d)return(radMathcos(dsourceang)+5width))attr(y1function(d)return(radMathsin(dsourceang)+5width))attr(x2function(d)return(radMathcos(dtargetang)+5width))attr(y2function(d)return(radMathsin(dtargetang)+5width))
create the nodes and set out in a circular layoutvar node = svgselectAll(circle)data(graphnodes)enter()append(circle)attr(r10)attr(cxfunction(di)return(radMathcos(iang)+5width))attr(cyfunction(di)return(radMathsin(iang)+5width))attr(fillyellow)attr(strokered)
ltscriptgtltbodygt
graphCirclehtml classjson classjs classCirclehtml+ labels classCircleLhtml+ permutation classPjson classPjs classCirclePhtm
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
SVG
ltxml version=10 encoding=UTF-8 standalone=yesgtltsvg width=500 height=500 xmlns=httpwwww3org2000svggtltline stroke-width=2 x1=450 y1=250 x2=250 y2=450 style=stroke bluegtltlinegtltline stroke-width=2 x1=250 y1=450 x2=50 y2=250 style=stroke bluegtltlinegtltline stroke-width=2 x1=50 y1=250 x2=250 y2=50 style=stroke bluegtltlinegtltline stroke-width=2 x1=250 y1=450 x2=250 y2=50 style=stroke bluegtltlinegtltcircle r=10 cx=450 cy=250 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=250 cy=450 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=50 cy=250 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=250 cy=50 fill=yellow stroke=redgtltcirclegtltsvggt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Networks in JSON format basic netJSONclassjson
netJSON basicinfo network class org 1 nNodes 15
nArcs 30 nEdges 13 nWeak 1title borrowing study materialsmeta date October 2015 author V Batagelj
nodes [
id 1 short m02 x 01857 y 02781 size 1 id 2 short m03 x 05482 y 06169 size 1 id 3 short w07 x 02219 y 04526 size 2 id 4 short w09 x 08078 y 03223 size 2
id 14 short m89 x 04000 y 08469 size 1 id 15 short m96 x 03482 y 01778 size 1
]links [
type arc source 6 target 15 weight 1 type arc source 2 target 7 weight 1
type arc source15 target 3 weight 1 type edge source 6 target 12 weight 1
type edge source 4 target 12 weight 1 type edge source 6 target 13 weight 1
]
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON and RTransforming Pajek NET and CLU files in to JSON
nodes[nameMyrielgroup1nameNapoleongroup1 nameBrujongroup4nameMmeHucheloupgroup8]
links[source1target0value1source2target0value8 source76target48value1source76target58value1]
setwd(CUsersBatageljtestpython2012amazon)library(rjson)
net2json lt- function(netFcluFjsonF)net lt- file(netFr) clu lt- file(cluFr)b lt- unlist(strsplit(readLines(netn=1) ))n lt- asinteger(b[length(b)])N lt- readLines(netn=n) nam lt- character(n)for(i in 1n) nam[i] lt- unlist(strsplit(N[i]rsquorsquo))[2]skip lt- readLines(clun=1) C lt- asinteger(readLines(clun=n))skip lt- readLines(netn=1) L lt- readLines(netn=-1)M lt- matrix(asinteger(unlist(strsplit(sub(rsquo^s+rsquorsquorsquoL)rsquos+rsquo)))ncol=3byrow=TRUE)nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(name=nam[i]group=C[i])m lt- nrow(M) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(source=M[i1]-1target=M[i2]-1value=M[i3])data lt- list(nodes=nodslinks=lnks)jstr lt- toJSON(data)json lt- file(jsonFw) cat(jstrfile=json)close(json) close(net) close(clu)
net2json(islandsnetislandscluislandsjson)
islands island 1 island 4 force islands
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
CSV2JSONR
transforming CSV files to JSON file by Vladimir Batagelj June 2016setwd(CUsersbatageljworkPythongraphSVGEUSN)library(rjson)colC lt- c(rep(character4)rep(numeric5)) nas lt- c(NANaN)nodes lt- readcsv2(bibNodesXYcsvencoding=rsquoUTF-8rsquocolClasses=colCnastrings=nas)M lt- factor(nodes$mode) mod lt- levels(M) M lt- asnumeric(M)S lt- factor(nodes$sex) sx lt- levels(S) S lt- asnumeric(S) S[isna(S)] lt- 0links lt- readcsv2(bibLinkscsvencoding=rsquoUTF-8rsquocolClasses=character)F lt- asnumeric(factor(links$fromlevels=nodes$nameordered=TRUE))T lt- asnumeric(factor(links$tolevels=nodes$nameordered=TRUE))R lt- factor(links$relation) rel lt-levels(R) R lt- asnumeric(R)n lt- nrow(nodes) nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(id=iname=nodes$name[i]mode=M[i]
sex=S[i]x=asnumeric(nodes$x[i])1000y=asnumeric(nodes$y[i])1000)m lt- nrow(links) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(type=arcsource=F[i]target=T[i]
rel=R[i]weight=1)meta lt- list(date=June 112016author=Vladimir Batagelj)leg lt- list(mode=modsex=sxrel=rel)inf lt- list(network=biborg=1nNodes=nnArcs=mtitle=Example for EUSNrsquo16legend=legmeta=meta)
data lt- list(netJSON=basicinfo=infnodes=nodslinks=lnks)json lt- file(bibjsonw) cat(toJSON(data)file=json) close(json)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibjson
netJSONbasicinfonetworkbiborg1nNodes16nArcs19titleExample for EUSNrsquo16legendmode[bookjournalpaperpersonpublisherseries]sex[fm]rel[authorOfcitescontainedIneditorOfpublishedBy]
metadateJune 112016authorVladimir Batageljnodes[id1nameBatagelj Vladimirmode4sex2x08091y06537id2nameDoreian Patrickmode4sex2x03585y06791id3nameFerligoj Anuu0161kamode4sex1x06195y06807id4nameGranovetter Markmode4sex2x01456y06605id5nameMoustaki Irinimode4sex1x0783y0228id6nameMrvar Andrejmode4sex2x0478y06301id7nameClustering with relational constraintmode3sex0x06841y03801
id15nameCambridge University Pressmode5sex0x05343y02382id16nameSpringermode5sex0x08846y0174]links[typearcsource1target10rel1weight1typearcsource2target10rel1weight1typearcsource3target10rel1weight1typearcsource1target7rel1weight1typearcsource3target7rel1weight1typearcsource4target8rel1weight1typearcsource4target14rel4weight1
typearcsource10target7rel2weight1typearcsource14target15rel5weight1typearcsource11target16rel5weight1
]
bibjson picture bibV Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON files anddisplaying a network with given nodesrsquo coordinates
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltinput type=rsquofilersquo accept=rsquoapplicationjsonrsquo onchange=rsquoopenFile(event)rsquogtltscriptgtfunction process(graph) set up the drawing areavar width = 500height = 500 s = graphattributesorg
var svg = d3select(body)append(svg)attr(width width)attr(height height)attr(xmlns httpwwww3org2000svg)
draw the linksvar link = svgselectAll(line)data(graphlinks)enter()append(line)style(stroke function(di) return((dtype==arc magenta blue)))attr(stroke-width 2)attr(x1 function(d) return(graphnodes[dsource-s]xwidth))attr(y1 function(d) return(graphnodes[dsource-s]yheight))attr(x2 function(d) return(graphnodes[dtarget-s]xwidth))attr(y2 function(d) return(graphnodes[dtarget-s]yheight))
draw the nodesvar node = svgselectAll(circle)data(graphnodes)enter()append(circle)attr(r 15)attr(cx function(di) return(dxwidth))attr(cy function(di) return(dyheight))attr(fill yellow)attr(stroke red)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
readingadapted from Matt West Reading Files Using The HTML5 FileReader API
var openFile = function(event) var input = eventtargetvar reader = new FileReader()readeronload = function()process(JSONparse(readerresult))
readerreadAsText(inputfiles[0])
ltscriptgtltbodygt
graphReadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON file from serveradapted from Ying Kit Yuen jQuery amp Javascript -ndash Read JSON files on server
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtlttitlegtLoad JSON file from serverlttitlegtlt-- httpeurekaykyueninfo20130925jquery-javascript-read-json-files-on-server --gtltscript src=httpajaxgoogleapiscomajaxlibsjquery1102jqueryminjsgtltscriptgtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltselect id=datagtltoption value=graphjsongtgraphjsonltoptiongtltoption value=classjsongtclassjsonltoptiongt
ltselectgtltbutton id=btngtReadltbuttongtltscriptgtfunction process(graph) set up the drawing area the body of function process is the same as in the previous exampleattr(stroke red)
$(btn)click(function()$getJSON($(data)val() function(json) process(json))
)ltscriptgtltbodygt
graphLoadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Network displayer graphXY
drawNetjs
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
graphXYgen
ltDOCTYPE htmlgtltmeta charset=utf-8gtltbodygtlt-- script src=graphAjsgtltscript --gtltscript src=graphBjsgtltscriptgtlt-- script src=classSjsgtltscript --gtltscript src=drawNetjsgtltscriptgtltscript src=d3d3jsgtltscriptgtltscriptgtvars = graphinfoorgwidth = graphstylecanvaswidthheight = graphstylecanvasheightvar lw = 1if ( typeof graphstyle == rsquoundefinedrsquo ampamp graphstyle) if ( typeof graphstylelink == rsquoundefinedrsquo ampamp graphstylelink )
if ( typeof graphstylelinkwidth == rsquoundefinedrsquo ampamp graphstylelinkwidth ) var lw = graphstylelinkwidth
if(graphnetJSON==rsquogeneralrsquo) var OK = drawNet(graphpersonsdatagraphfrienddata)
else var OK = drawNet(graphnodesgraphlinks)
ltscriptgtltbodygt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Saving SVG pictureS Murray Interactive Data Visualization for the Web p 235
In Google Chrome we draw a picture and open the Developer ToolsIn the Elements we identify the SVG subobject select it copy it intosome text editor and save with extension svg
To enhance the picture or to transform it to other picture formats we
process it using some vector graphics editor
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
To do
bull displayer templates can be based on GUI
bull for a description of multirelational networks we use the rel
attribute in the general version they can be treated asseparate sets of links
bull properties are considered as attributes in the general versionthey can be represented as special objects vector partitionpermutation and cluster
bull use temporal quantities for describing temporal networks
bull extend the list of info-attributes attributes type (simpletemporal) twoModeOrg nStrong nRelations planar
bull icons can be used for visualization of nodes Font AwesomeMaterial Icons tests
bull links can be visually represented in many different ways that canbe described in style
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
to do
bull style can be attached as an attribute also to an element(node link) thus changing the default settings
bull add the visualization of arcs with arrows Directed Graph EditorD3 Tips and Tricks
bull to be included in netD3js vzmetno risanje Force in urejanjeSpringy Matrix with permutations
bull can some attributes be renamed from tail nodeA rarrsource to head nodeB rarr target may be the simplestsolution is a replace in some text editor
bull implement saving of the obtained SVG picture to a file ExportSVG with Style d3jsSVG Export demo
bull include in netJSON elements useful in some applications suchas hooks or inout-ports background image etc
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Sources
Ideas for visualization styles can be found in GoJS - InteractiveDiagrams for JavaScript and HTML Visjs in VisualComplexity
GoJS mdashSankey Diagram Family Tree Logic Circuit DynamicPortsVega - a visualization grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References I
Vladimir Batagelj Complex Networks Visualization of RA Meyersed Encyclopedia of Complexity and Systems Science Springer 20091253-1268
Vladimir Batagelj Andrej Mrvar Pajek manual
Jernej Bodlaj Network Data File Formats in Reda Alhajj Jon Rokne(eds) Encyclopedia of Social Network Analysis and Mining SpringerNew York 2014 p 1076-1091
Richard Brath David Jonker Graph Analysis and VisualizationDiscovering Business Opportunity in Linked Data John Wiley amp SonsIndianapolis Indiana 2015
Emden Gansner Eleftherios Koutsofios Stephen North Drawinggraphs with dot January 26 2006
Scott Murray Interactive Data Visualization for the Web OrsquoReillySebastopol 2013
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References II
Wouter De Nooy Andrej Mrvar Vladimir Batagelj Exploratory SocialNetwork Analysis with Pajek Revised and Expanded Second EditionStructural Analysis in the Social Sciences Cambridge UniversityPress September 2011
Matthew Roughan Jonathan Tuke Unravelling Graph-Exchange FileFormats arXiv150302781 submitted on 10 Mar 2015
Wikipedia JSON
Leland Wilkinson The Grammar of Graphics Springer-Verlag NewYork 2005
V Batagelj JSON amp D3js
- Introduction
- Description of networks
- JSON
- JSON and D3js
- JSON and R
- Displayer
- To do
- References
-
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
eval and JSONparseevalhtml
lthtmlgtltheadgtlttitlegtJSON eval and parselttitlegtltheadgtltbodygtltscriptgtvar data=rsquo[abca[true null314]bBBBBBc12e+5]rsquoalert(JSON + data)documentwrite(JSONltttgt+data+ltttgtltbrgt)var value = eval(rsquo(rsquo + data + rsquo)rsquo)consolelog(eval) consolelog(value)documentwrite(evalltttgt+JSONstringify(value)+ltttgtltbrgt)var json = JSONparse(data)consolelog(JSONparse) consolelog(json)ltscriptgtltbodygtlthtmlgt
To run the Javascript code I used the Google Chrome browser To get theconsole we selectCustomize and Control GC More tools Developer tools
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
eval and JSONparse
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Importing data as Javascript assignmentimporthtml
lthtmlgtltheadgtlttitlegtJSON importlttitlegtltscript src=personjsgtltscriptgtltheadgtltbodygtltscriptgtdocumentwrite(JSONltttgt+person+ltttgtltbrgt)documentwrite(stringltttgt+JSONstringify(person)+ltttgtltbrgt)consolelog(JSON) consolelog(person)ltscriptgtltbodygtlthtmlgt
personjs
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Well formed and valid JSON files
A JSON file is well formed iff it respects JSONrsquos grammarIs my file well formed service JSONlint - another checker
JSON editor
Similar to XMLrsquos DTD files or schema we can imposeadditional restrictions to the structure of JSON files describingspecial types of data using JSON schema ndash the JSON filesrespecting these additional restrictions are called valid
Github validation JSON Schema Lint JSON Schemavalidator
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Simple examplegraphjson
infoorg0nNodes4nodes[nameAnnx02y02Num1Size100nameBenx02y08Num4Size500nameTimx08y02Num2Size200nameZoex08y08Num3Size400
]links[source0target1Count1Weight100source1target2Count1Weight100source2target3Count1Weight100source1target3Count2Weight300
]
In graphjs the JSON description is assigned to the variable graph
graph = infoorg0nNodes4nodes[
]
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Circular layoutadapted from Brath and Jonker p 257-258
ltDOCTYPE htmlgtlthtmlgtltheadgtltmeta charset=utf-8gtltscript src=graphjsgtltscriptgtlt-- script src=classjsgtltscript --gtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltscriptgt set up the drawing areavar width = 500
height = 500var svg = d3select(body)append(svg)
attr(width width)
attr(height height)
attr(xmlns httpwwww3org2000svg) angle and radius for layout assistancevar ang = 2 MathPI graphnodeslengthvar rad = width 25
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Circular layout
create the linksvar link = svgselectAll(line)data(graphlinks)enter()append(line)style(strokeblue)attr(stroke-width2)attr(x1function(d)return(radMathcos(dsourceang)+5width))attr(y1function(d)return(radMathsin(dsourceang)+5width))attr(x2function(d)return(radMathcos(dtargetang)+5width))attr(y2function(d)return(radMathsin(dtargetang)+5width))
create the nodes and set out in a circular layoutvar node = svgselectAll(circle)data(graphnodes)enter()append(circle)attr(r10)attr(cxfunction(di)return(radMathcos(iang)+5width))attr(cyfunction(di)return(radMathsin(iang)+5width))attr(fillyellow)attr(strokered)
ltscriptgtltbodygt
graphCirclehtml classjson classjs classCirclehtml+ labels classCircleLhtml+ permutation classPjson classPjs classCirclePhtm
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
SVG
ltxml version=10 encoding=UTF-8 standalone=yesgtltsvg width=500 height=500 xmlns=httpwwww3org2000svggtltline stroke-width=2 x1=450 y1=250 x2=250 y2=450 style=stroke bluegtltlinegtltline stroke-width=2 x1=250 y1=450 x2=50 y2=250 style=stroke bluegtltlinegtltline stroke-width=2 x1=50 y1=250 x2=250 y2=50 style=stroke bluegtltlinegtltline stroke-width=2 x1=250 y1=450 x2=250 y2=50 style=stroke bluegtltlinegtltcircle r=10 cx=450 cy=250 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=250 cy=450 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=50 cy=250 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=250 cy=50 fill=yellow stroke=redgtltcirclegtltsvggt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Networks in JSON format basic netJSONclassjson
netJSON basicinfo network class org 1 nNodes 15
nArcs 30 nEdges 13 nWeak 1title borrowing study materialsmeta date October 2015 author V Batagelj
nodes [
id 1 short m02 x 01857 y 02781 size 1 id 2 short m03 x 05482 y 06169 size 1 id 3 short w07 x 02219 y 04526 size 2 id 4 short w09 x 08078 y 03223 size 2
id 14 short m89 x 04000 y 08469 size 1 id 15 short m96 x 03482 y 01778 size 1
]links [
type arc source 6 target 15 weight 1 type arc source 2 target 7 weight 1
type arc source15 target 3 weight 1 type edge source 6 target 12 weight 1
type edge source 4 target 12 weight 1 type edge source 6 target 13 weight 1
]
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON and RTransforming Pajek NET and CLU files in to JSON
nodes[nameMyrielgroup1nameNapoleongroup1 nameBrujongroup4nameMmeHucheloupgroup8]
links[source1target0value1source2target0value8 source76target48value1source76target58value1]
setwd(CUsersBatageljtestpython2012amazon)library(rjson)
net2json lt- function(netFcluFjsonF)net lt- file(netFr) clu lt- file(cluFr)b lt- unlist(strsplit(readLines(netn=1) ))n lt- asinteger(b[length(b)])N lt- readLines(netn=n) nam lt- character(n)for(i in 1n) nam[i] lt- unlist(strsplit(N[i]rsquorsquo))[2]skip lt- readLines(clun=1) C lt- asinteger(readLines(clun=n))skip lt- readLines(netn=1) L lt- readLines(netn=-1)M lt- matrix(asinteger(unlist(strsplit(sub(rsquo^s+rsquorsquorsquoL)rsquos+rsquo)))ncol=3byrow=TRUE)nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(name=nam[i]group=C[i])m lt- nrow(M) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(source=M[i1]-1target=M[i2]-1value=M[i3])data lt- list(nodes=nodslinks=lnks)jstr lt- toJSON(data)json lt- file(jsonFw) cat(jstrfile=json)close(json) close(net) close(clu)
net2json(islandsnetislandscluislandsjson)
islands island 1 island 4 force islands
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
CSV2JSONR
transforming CSV files to JSON file by Vladimir Batagelj June 2016setwd(CUsersbatageljworkPythongraphSVGEUSN)library(rjson)colC lt- c(rep(character4)rep(numeric5)) nas lt- c(NANaN)nodes lt- readcsv2(bibNodesXYcsvencoding=rsquoUTF-8rsquocolClasses=colCnastrings=nas)M lt- factor(nodes$mode) mod lt- levels(M) M lt- asnumeric(M)S lt- factor(nodes$sex) sx lt- levels(S) S lt- asnumeric(S) S[isna(S)] lt- 0links lt- readcsv2(bibLinkscsvencoding=rsquoUTF-8rsquocolClasses=character)F lt- asnumeric(factor(links$fromlevels=nodes$nameordered=TRUE))T lt- asnumeric(factor(links$tolevels=nodes$nameordered=TRUE))R lt- factor(links$relation) rel lt-levels(R) R lt- asnumeric(R)n lt- nrow(nodes) nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(id=iname=nodes$name[i]mode=M[i]
sex=S[i]x=asnumeric(nodes$x[i])1000y=asnumeric(nodes$y[i])1000)m lt- nrow(links) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(type=arcsource=F[i]target=T[i]
rel=R[i]weight=1)meta lt- list(date=June 112016author=Vladimir Batagelj)leg lt- list(mode=modsex=sxrel=rel)inf lt- list(network=biborg=1nNodes=nnArcs=mtitle=Example for EUSNrsquo16legend=legmeta=meta)
data lt- list(netJSON=basicinfo=infnodes=nodslinks=lnks)json lt- file(bibjsonw) cat(toJSON(data)file=json) close(json)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibjson
netJSONbasicinfonetworkbiborg1nNodes16nArcs19titleExample for EUSNrsquo16legendmode[bookjournalpaperpersonpublisherseries]sex[fm]rel[authorOfcitescontainedIneditorOfpublishedBy]
metadateJune 112016authorVladimir Batageljnodes[id1nameBatagelj Vladimirmode4sex2x08091y06537id2nameDoreian Patrickmode4sex2x03585y06791id3nameFerligoj Anuu0161kamode4sex1x06195y06807id4nameGranovetter Markmode4sex2x01456y06605id5nameMoustaki Irinimode4sex1x0783y0228id6nameMrvar Andrejmode4sex2x0478y06301id7nameClustering with relational constraintmode3sex0x06841y03801
id15nameCambridge University Pressmode5sex0x05343y02382id16nameSpringermode5sex0x08846y0174]links[typearcsource1target10rel1weight1typearcsource2target10rel1weight1typearcsource3target10rel1weight1typearcsource1target7rel1weight1typearcsource3target7rel1weight1typearcsource4target8rel1weight1typearcsource4target14rel4weight1
typearcsource10target7rel2weight1typearcsource14target15rel5weight1typearcsource11target16rel5weight1
]
bibjson picture bibV Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON files anddisplaying a network with given nodesrsquo coordinates
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltinput type=rsquofilersquo accept=rsquoapplicationjsonrsquo onchange=rsquoopenFile(event)rsquogtltscriptgtfunction process(graph) set up the drawing areavar width = 500height = 500 s = graphattributesorg
var svg = d3select(body)append(svg)attr(width width)attr(height height)attr(xmlns httpwwww3org2000svg)
draw the linksvar link = svgselectAll(line)data(graphlinks)enter()append(line)style(stroke function(di) return((dtype==arc magenta blue)))attr(stroke-width 2)attr(x1 function(d) return(graphnodes[dsource-s]xwidth))attr(y1 function(d) return(graphnodes[dsource-s]yheight))attr(x2 function(d) return(graphnodes[dtarget-s]xwidth))attr(y2 function(d) return(graphnodes[dtarget-s]yheight))
draw the nodesvar node = svgselectAll(circle)data(graphnodes)enter()append(circle)attr(r 15)attr(cx function(di) return(dxwidth))attr(cy function(di) return(dyheight))attr(fill yellow)attr(stroke red)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
readingadapted from Matt West Reading Files Using The HTML5 FileReader API
var openFile = function(event) var input = eventtargetvar reader = new FileReader()readeronload = function()process(JSONparse(readerresult))
readerreadAsText(inputfiles[0])
ltscriptgtltbodygt
graphReadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON file from serveradapted from Ying Kit Yuen jQuery amp Javascript -ndash Read JSON files on server
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtlttitlegtLoad JSON file from serverlttitlegtlt-- httpeurekaykyueninfo20130925jquery-javascript-read-json-files-on-server --gtltscript src=httpajaxgoogleapiscomajaxlibsjquery1102jqueryminjsgtltscriptgtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltselect id=datagtltoption value=graphjsongtgraphjsonltoptiongtltoption value=classjsongtclassjsonltoptiongt
ltselectgtltbutton id=btngtReadltbuttongtltscriptgtfunction process(graph) set up the drawing area the body of function process is the same as in the previous exampleattr(stroke red)
$(btn)click(function()$getJSON($(data)val() function(json) process(json))
)ltscriptgtltbodygt
graphLoadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Network displayer graphXY
drawNetjs
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
graphXYgen
ltDOCTYPE htmlgtltmeta charset=utf-8gtltbodygtlt-- script src=graphAjsgtltscript --gtltscript src=graphBjsgtltscriptgtlt-- script src=classSjsgtltscript --gtltscript src=drawNetjsgtltscriptgtltscript src=d3d3jsgtltscriptgtltscriptgtvars = graphinfoorgwidth = graphstylecanvaswidthheight = graphstylecanvasheightvar lw = 1if ( typeof graphstyle == rsquoundefinedrsquo ampamp graphstyle) if ( typeof graphstylelink == rsquoundefinedrsquo ampamp graphstylelink )
if ( typeof graphstylelinkwidth == rsquoundefinedrsquo ampamp graphstylelinkwidth ) var lw = graphstylelinkwidth
if(graphnetJSON==rsquogeneralrsquo) var OK = drawNet(graphpersonsdatagraphfrienddata)
else var OK = drawNet(graphnodesgraphlinks)
ltscriptgtltbodygt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Saving SVG pictureS Murray Interactive Data Visualization for the Web p 235
In Google Chrome we draw a picture and open the Developer ToolsIn the Elements we identify the SVG subobject select it copy it intosome text editor and save with extension svg
To enhance the picture or to transform it to other picture formats we
process it using some vector graphics editor
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
To do
bull displayer templates can be based on GUI
bull for a description of multirelational networks we use the rel
attribute in the general version they can be treated asseparate sets of links
bull properties are considered as attributes in the general versionthey can be represented as special objects vector partitionpermutation and cluster
bull use temporal quantities for describing temporal networks
bull extend the list of info-attributes attributes type (simpletemporal) twoModeOrg nStrong nRelations planar
bull icons can be used for visualization of nodes Font AwesomeMaterial Icons tests
bull links can be visually represented in many different ways that canbe described in style
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
to do
bull style can be attached as an attribute also to an element(node link) thus changing the default settings
bull add the visualization of arcs with arrows Directed Graph EditorD3 Tips and Tricks
bull to be included in netD3js vzmetno risanje Force in urejanjeSpringy Matrix with permutations
bull can some attributes be renamed from tail nodeA rarrsource to head nodeB rarr target may be the simplestsolution is a replace in some text editor
bull implement saving of the obtained SVG picture to a file ExportSVG with Style d3jsSVG Export demo
bull include in netJSON elements useful in some applications suchas hooks or inout-ports background image etc
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Sources
Ideas for visualization styles can be found in GoJS - InteractiveDiagrams for JavaScript and HTML Visjs in VisualComplexity
GoJS mdashSankey Diagram Family Tree Logic Circuit DynamicPortsVega - a visualization grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References I
Vladimir Batagelj Complex Networks Visualization of RA Meyersed Encyclopedia of Complexity and Systems Science Springer 20091253-1268
Vladimir Batagelj Andrej Mrvar Pajek manual
Jernej Bodlaj Network Data File Formats in Reda Alhajj Jon Rokne(eds) Encyclopedia of Social Network Analysis and Mining SpringerNew York 2014 p 1076-1091
Richard Brath David Jonker Graph Analysis and VisualizationDiscovering Business Opportunity in Linked Data John Wiley amp SonsIndianapolis Indiana 2015
Emden Gansner Eleftherios Koutsofios Stephen North Drawinggraphs with dot January 26 2006
Scott Murray Interactive Data Visualization for the Web OrsquoReillySebastopol 2013
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References II
Wouter De Nooy Andrej Mrvar Vladimir Batagelj Exploratory SocialNetwork Analysis with Pajek Revised and Expanded Second EditionStructural Analysis in the Social Sciences Cambridge UniversityPress September 2011
Matthew Roughan Jonathan Tuke Unravelling Graph-Exchange FileFormats arXiv150302781 submitted on 10 Mar 2015
Wikipedia JSON
Leland Wilkinson The Grammar of Graphics Springer-Verlag NewYork 2005
V Batagelj JSON amp D3js
- Introduction
- Description of networks
- JSON
- JSON and D3js
- JSON and R
- Displayer
- To do
- References
-
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
eval and JSONparseevalhtml
lthtmlgtltheadgtlttitlegtJSON eval and parselttitlegtltheadgtltbodygtltscriptgtvar data=rsquo[abca[true null314]bBBBBBc12e+5]rsquoalert(JSON + data)documentwrite(JSONltttgt+data+ltttgtltbrgt)var value = eval(rsquo(rsquo + data + rsquo)rsquo)consolelog(eval) consolelog(value)documentwrite(evalltttgt+JSONstringify(value)+ltttgtltbrgt)var json = JSONparse(data)consolelog(JSONparse) consolelog(json)ltscriptgtltbodygtlthtmlgt
To run the Javascript code I used the Google Chrome browser To get theconsole we selectCustomize and Control GC More tools Developer tools
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
eval and JSONparse
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Importing data as Javascript assignmentimporthtml
lthtmlgtltheadgtlttitlegtJSON importlttitlegtltscript src=personjsgtltscriptgtltheadgtltbodygtltscriptgtdocumentwrite(JSONltttgt+person+ltttgtltbrgt)documentwrite(stringltttgt+JSONstringify(person)+ltttgtltbrgt)consolelog(JSON) consolelog(person)ltscriptgtltbodygtlthtmlgt
personjs
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Well formed and valid JSON files
A JSON file is well formed iff it respects JSONrsquos grammarIs my file well formed service JSONlint - another checker
JSON editor
Similar to XMLrsquos DTD files or schema we can imposeadditional restrictions to the structure of JSON files describingspecial types of data using JSON schema ndash the JSON filesrespecting these additional restrictions are called valid
Github validation JSON Schema Lint JSON Schemavalidator
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Simple examplegraphjson
infoorg0nNodes4nodes[nameAnnx02y02Num1Size100nameBenx02y08Num4Size500nameTimx08y02Num2Size200nameZoex08y08Num3Size400
]links[source0target1Count1Weight100source1target2Count1Weight100source2target3Count1Weight100source1target3Count2Weight300
]
In graphjs the JSON description is assigned to the variable graph
graph = infoorg0nNodes4nodes[
]
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Circular layoutadapted from Brath and Jonker p 257-258
ltDOCTYPE htmlgtlthtmlgtltheadgtltmeta charset=utf-8gtltscript src=graphjsgtltscriptgtlt-- script src=classjsgtltscript --gtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltscriptgt set up the drawing areavar width = 500
height = 500var svg = d3select(body)append(svg)
attr(width width)
attr(height height)
attr(xmlns httpwwww3org2000svg) angle and radius for layout assistancevar ang = 2 MathPI graphnodeslengthvar rad = width 25
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Circular layout
create the linksvar link = svgselectAll(line)data(graphlinks)enter()append(line)style(strokeblue)attr(stroke-width2)attr(x1function(d)return(radMathcos(dsourceang)+5width))attr(y1function(d)return(radMathsin(dsourceang)+5width))attr(x2function(d)return(radMathcos(dtargetang)+5width))attr(y2function(d)return(radMathsin(dtargetang)+5width))
create the nodes and set out in a circular layoutvar node = svgselectAll(circle)data(graphnodes)enter()append(circle)attr(r10)attr(cxfunction(di)return(radMathcos(iang)+5width))attr(cyfunction(di)return(radMathsin(iang)+5width))attr(fillyellow)attr(strokered)
ltscriptgtltbodygt
graphCirclehtml classjson classjs classCirclehtml+ labels classCircleLhtml+ permutation classPjson classPjs classCirclePhtm
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
SVG
ltxml version=10 encoding=UTF-8 standalone=yesgtltsvg width=500 height=500 xmlns=httpwwww3org2000svggtltline stroke-width=2 x1=450 y1=250 x2=250 y2=450 style=stroke bluegtltlinegtltline stroke-width=2 x1=250 y1=450 x2=50 y2=250 style=stroke bluegtltlinegtltline stroke-width=2 x1=50 y1=250 x2=250 y2=50 style=stroke bluegtltlinegtltline stroke-width=2 x1=250 y1=450 x2=250 y2=50 style=stroke bluegtltlinegtltcircle r=10 cx=450 cy=250 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=250 cy=450 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=50 cy=250 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=250 cy=50 fill=yellow stroke=redgtltcirclegtltsvggt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Networks in JSON format basic netJSONclassjson
netJSON basicinfo network class org 1 nNodes 15
nArcs 30 nEdges 13 nWeak 1title borrowing study materialsmeta date October 2015 author V Batagelj
nodes [
id 1 short m02 x 01857 y 02781 size 1 id 2 short m03 x 05482 y 06169 size 1 id 3 short w07 x 02219 y 04526 size 2 id 4 short w09 x 08078 y 03223 size 2
id 14 short m89 x 04000 y 08469 size 1 id 15 short m96 x 03482 y 01778 size 1
]links [
type arc source 6 target 15 weight 1 type arc source 2 target 7 weight 1
type arc source15 target 3 weight 1 type edge source 6 target 12 weight 1
type edge source 4 target 12 weight 1 type edge source 6 target 13 weight 1
]
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON and RTransforming Pajek NET and CLU files in to JSON
nodes[nameMyrielgroup1nameNapoleongroup1 nameBrujongroup4nameMmeHucheloupgroup8]
links[source1target0value1source2target0value8 source76target48value1source76target58value1]
setwd(CUsersBatageljtestpython2012amazon)library(rjson)
net2json lt- function(netFcluFjsonF)net lt- file(netFr) clu lt- file(cluFr)b lt- unlist(strsplit(readLines(netn=1) ))n lt- asinteger(b[length(b)])N lt- readLines(netn=n) nam lt- character(n)for(i in 1n) nam[i] lt- unlist(strsplit(N[i]rsquorsquo))[2]skip lt- readLines(clun=1) C lt- asinteger(readLines(clun=n))skip lt- readLines(netn=1) L lt- readLines(netn=-1)M lt- matrix(asinteger(unlist(strsplit(sub(rsquo^s+rsquorsquorsquoL)rsquos+rsquo)))ncol=3byrow=TRUE)nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(name=nam[i]group=C[i])m lt- nrow(M) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(source=M[i1]-1target=M[i2]-1value=M[i3])data lt- list(nodes=nodslinks=lnks)jstr lt- toJSON(data)json lt- file(jsonFw) cat(jstrfile=json)close(json) close(net) close(clu)
net2json(islandsnetislandscluislandsjson)
islands island 1 island 4 force islands
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
CSV2JSONR
transforming CSV files to JSON file by Vladimir Batagelj June 2016setwd(CUsersbatageljworkPythongraphSVGEUSN)library(rjson)colC lt- c(rep(character4)rep(numeric5)) nas lt- c(NANaN)nodes lt- readcsv2(bibNodesXYcsvencoding=rsquoUTF-8rsquocolClasses=colCnastrings=nas)M lt- factor(nodes$mode) mod lt- levels(M) M lt- asnumeric(M)S lt- factor(nodes$sex) sx lt- levels(S) S lt- asnumeric(S) S[isna(S)] lt- 0links lt- readcsv2(bibLinkscsvencoding=rsquoUTF-8rsquocolClasses=character)F lt- asnumeric(factor(links$fromlevels=nodes$nameordered=TRUE))T lt- asnumeric(factor(links$tolevels=nodes$nameordered=TRUE))R lt- factor(links$relation) rel lt-levels(R) R lt- asnumeric(R)n lt- nrow(nodes) nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(id=iname=nodes$name[i]mode=M[i]
sex=S[i]x=asnumeric(nodes$x[i])1000y=asnumeric(nodes$y[i])1000)m lt- nrow(links) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(type=arcsource=F[i]target=T[i]
rel=R[i]weight=1)meta lt- list(date=June 112016author=Vladimir Batagelj)leg lt- list(mode=modsex=sxrel=rel)inf lt- list(network=biborg=1nNodes=nnArcs=mtitle=Example for EUSNrsquo16legend=legmeta=meta)
data lt- list(netJSON=basicinfo=infnodes=nodslinks=lnks)json lt- file(bibjsonw) cat(toJSON(data)file=json) close(json)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibjson
netJSONbasicinfonetworkbiborg1nNodes16nArcs19titleExample for EUSNrsquo16legendmode[bookjournalpaperpersonpublisherseries]sex[fm]rel[authorOfcitescontainedIneditorOfpublishedBy]
metadateJune 112016authorVladimir Batageljnodes[id1nameBatagelj Vladimirmode4sex2x08091y06537id2nameDoreian Patrickmode4sex2x03585y06791id3nameFerligoj Anuu0161kamode4sex1x06195y06807id4nameGranovetter Markmode4sex2x01456y06605id5nameMoustaki Irinimode4sex1x0783y0228id6nameMrvar Andrejmode4sex2x0478y06301id7nameClustering with relational constraintmode3sex0x06841y03801
id15nameCambridge University Pressmode5sex0x05343y02382id16nameSpringermode5sex0x08846y0174]links[typearcsource1target10rel1weight1typearcsource2target10rel1weight1typearcsource3target10rel1weight1typearcsource1target7rel1weight1typearcsource3target7rel1weight1typearcsource4target8rel1weight1typearcsource4target14rel4weight1
typearcsource10target7rel2weight1typearcsource14target15rel5weight1typearcsource11target16rel5weight1
]
bibjson picture bibV Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON files anddisplaying a network with given nodesrsquo coordinates
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltinput type=rsquofilersquo accept=rsquoapplicationjsonrsquo onchange=rsquoopenFile(event)rsquogtltscriptgtfunction process(graph) set up the drawing areavar width = 500height = 500 s = graphattributesorg
var svg = d3select(body)append(svg)attr(width width)attr(height height)attr(xmlns httpwwww3org2000svg)
draw the linksvar link = svgselectAll(line)data(graphlinks)enter()append(line)style(stroke function(di) return((dtype==arc magenta blue)))attr(stroke-width 2)attr(x1 function(d) return(graphnodes[dsource-s]xwidth))attr(y1 function(d) return(graphnodes[dsource-s]yheight))attr(x2 function(d) return(graphnodes[dtarget-s]xwidth))attr(y2 function(d) return(graphnodes[dtarget-s]yheight))
draw the nodesvar node = svgselectAll(circle)data(graphnodes)enter()append(circle)attr(r 15)attr(cx function(di) return(dxwidth))attr(cy function(di) return(dyheight))attr(fill yellow)attr(stroke red)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
readingadapted from Matt West Reading Files Using The HTML5 FileReader API
var openFile = function(event) var input = eventtargetvar reader = new FileReader()readeronload = function()process(JSONparse(readerresult))
readerreadAsText(inputfiles[0])
ltscriptgtltbodygt
graphReadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON file from serveradapted from Ying Kit Yuen jQuery amp Javascript -ndash Read JSON files on server
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtlttitlegtLoad JSON file from serverlttitlegtlt-- httpeurekaykyueninfo20130925jquery-javascript-read-json-files-on-server --gtltscript src=httpajaxgoogleapiscomajaxlibsjquery1102jqueryminjsgtltscriptgtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltselect id=datagtltoption value=graphjsongtgraphjsonltoptiongtltoption value=classjsongtclassjsonltoptiongt
ltselectgtltbutton id=btngtReadltbuttongtltscriptgtfunction process(graph) set up the drawing area the body of function process is the same as in the previous exampleattr(stroke red)
$(btn)click(function()$getJSON($(data)val() function(json) process(json))
)ltscriptgtltbodygt
graphLoadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Network displayer graphXY
drawNetjs
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
graphXYgen
ltDOCTYPE htmlgtltmeta charset=utf-8gtltbodygtlt-- script src=graphAjsgtltscript --gtltscript src=graphBjsgtltscriptgtlt-- script src=classSjsgtltscript --gtltscript src=drawNetjsgtltscriptgtltscript src=d3d3jsgtltscriptgtltscriptgtvars = graphinfoorgwidth = graphstylecanvaswidthheight = graphstylecanvasheightvar lw = 1if ( typeof graphstyle == rsquoundefinedrsquo ampamp graphstyle) if ( typeof graphstylelink == rsquoundefinedrsquo ampamp graphstylelink )
if ( typeof graphstylelinkwidth == rsquoundefinedrsquo ampamp graphstylelinkwidth ) var lw = graphstylelinkwidth
if(graphnetJSON==rsquogeneralrsquo) var OK = drawNet(graphpersonsdatagraphfrienddata)
else var OK = drawNet(graphnodesgraphlinks)
ltscriptgtltbodygt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Saving SVG pictureS Murray Interactive Data Visualization for the Web p 235
In Google Chrome we draw a picture and open the Developer ToolsIn the Elements we identify the SVG subobject select it copy it intosome text editor and save with extension svg
To enhance the picture or to transform it to other picture formats we
process it using some vector graphics editor
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
To do
bull displayer templates can be based on GUI
bull for a description of multirelational networks we use the rel
attribute in the general version they can be treated asseparate sets of links
bull properties are considered as attributes in the general versionthey can be represented as special objects vector partitionpermutation and cluster
bull use temporal quantities for describing temporal networks
bull extend the list of info-attributes attributes type (simpletemporal) twoModeOrg nStrong nRelations planar
bull icons can be used for visualization of nodes Font AwesomeMaterial Icons tests
bull links can be visually represented in many different ways that canbe described in style
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
to do
bull style can be attached as an attribute also to an element(node link) thus changing the default settings
bull add the visualization of arcs with arrows Directed Graph EditorD3 Tips and Tricks
bull to be included in netD3js vzmetno risanje Force in urejanjeSpringy Matrix with permutations
bull can some attributes be renamed from tail nodeA rarrsource to head nodeB rarr target may be the simplestsolution is a replace in some text editor
bull implement saving of the obtained SVG picture to a file ExportSVG with Style d3jsSVG Export demo
bull include in netJSON elements useful in some applications suchas hooks or inout-ports background image etc
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Sources
Ideas for visualization styles can be found in GoJS - InteractiveDiagrams for JavaScript and HTML Visjs in VisualComplexity
GoJS mdashSankey Diagram Family Tree Logic Circuit DynamicPortsVega - a visualization grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References I
Vladimir Batagelj Complex Networks Visualization of RA Meyersed Encyclopedia of Complexity and Systems Science Springer 20091253-1268
Vladimir Batagelj Andrej Mrvar Pajek manual
Jernej Bodlaj Network Data File Formats in Reda Alhajj Jon Rokne(eds) Encyclopedia of Social Network Analysis and Mining SpringerNew York 2014 p 1076-1091
Richard Brath David Jonker Graph Analysis and VisualizationDiscovering Business Opportunity in Linked Data John Wiley amp SonsIndianapolis Indiana 2015
Emden Gansner Eleftherios Koutsofios Stephen North Drawinggraphs with dot January 26 2006
Scott Murray Interactive Data Visualization for the Web OrsquoReillySebastopol 2013
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References II
Wouter De Nooy Andrej Mrvar Vladimir Batagelj Exploratory SocialNetwork Analysis with Pajek Revised and Expanded Second EditionStructural Analysis in the Social Sciences Cambridge UniversityPress September 2011
Matthew Roughan Jonathan Tuke Unravelling Graph-Exchange FileFormats arXiv150302781 submitted on 10 Mar 2015
Wikipedia JSON
Leland Wilkinson The Grammar of Graphics Springer-Verlag NewYork 2005
V Batagelj JSON amp D3js
- Introduction
- Description of networks
- JSON
- JSON and D3js
- JSON and R
- Displayer
- To do
- References
-
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
eval and JSONparse
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Importing data as Javascript assignmentimporthtml
lthtmlgtltheadgtlttitlegtJSON importlttitlegtltscript src=personjsgtltscriptgtltheadgtltbodygtltscriptgtdocumentwrite(JSONltttgt+person+ltttgtltbrgt)documentwrite(stringltttgt+JSONstringify(person)+ltttgtltbrgt)consolelog(JSON) consolelog(person)ltscriptgtltbodygtlthtmlgt
personjs
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Well formed and valid JSON files
A JSON file is well formed iff it respects JSONrsquos grammarIs my file well formed service JSONlint - another checker
JSON editor
Similar to XMLrsquos DTD files or schema we can imposeadditional restrictions to the structure of JSON files describingspecial types of data using JSON schema ndash the JSON filesrespecting these additional restrictions are called valid
Github validation JSON Schema Lint JSON Schemavalidator
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Simple examplegraphjson
infoorg0nNodes4nodes[nameAnnx02y02Num1Size100nameBenx02y08Num4Size500nameTimx08y02Num2Size200nameZoex08y08Num3Size400
]links[source0target1Count1Weight100source1target2Count1Weight100source2target3Count1Weight100source1target3Count2Weight300
]
In graphjs the JSON description is assigned to the variable graph
graph = infoorg0nNodes4nodes[
]
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Circular layoutadapted from Brath and Jonker p 257-258
ltDOCTYPE htmlgtlthtmlgtltheadgtltmeta charset=utf-8gtltscript src=graphjsgtltscriptgtlt-- script src=classjsgtltscript --gtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltscriptgt set up the drawing areavar width = 500
height = 500var svg = d3select(body)append(svg)
attr(width width)
attr(height height)
attr(xmlns httpwwww3org2000svg) angle and radius for layout assistancevar ang = 2 MathPI graphnodeslengthvar rad = width 25
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Circular layout
create the linksvar link = svgselectAll(line)data(graphlinks)enter()append(line)style(strokeblue)attr(stroke-width2)attr(x1function(d)return(radMathcos(dsourceang)+5width))attr(y1function(d)return(radMathsin(dsourceang)+5width))attr(x2function(d)return(radMathcos(dtargetang)+5width))attr(y2function(d)return(radMathsin(dtargetang)+5width))
create the nodes and set out in a circular layoutvar node = svgselectAll(circle)data(graphnodes)enter()append(circle)attr(r10)attr(cxfunction(di)return(radMathcos(iang)+5width))attr(cyfunction(di)return(radMathsin(iang)+5width))attr(fillyellow)attr(strokered)
ltscriptgtltbodygt
graphCirclehtml classjson classjs classCirclehtml+ labels classCircleLhtml+ permutation classPjson classPjs classCirclePhtm
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
SVG
ltxml version=10 encoding=UTF-8 standalone=yesgtltsvg width=500 height=500 xmlns=httpwwww3org2000svggtltline stroke-width=2 x1=450 y1=250 x2=250 y2=450 style=stroke bluegtltlinegtltline stroke-width=2 x1=250 y1=450 x2=50 y2=250 style=stroke bluegtltlinegtltline stroke-width=2 x1=50 y1=250 x2=250 y2=50 style=stroke bluegtltlinegtltline stroke-width=2 x1=250 y1=450 x2=250 y2=50 style=stroke bluegtltlinegtltcircle r=10 cx=450 cy=250 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=250 cy=450 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=50 cy=250 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=250 cy=50 fill=yellow stroke=redgtltcirclegtltsvggt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Networks in JSON format basic netJSONclassjson
netJSON basicinfo network class org 1 nNodes 15
nArcs 30 nEdges 13 nWeak 1title borrowing study materialsmeta date October 2015 author V Batagelj
nodes [
id 1 short m02 x 01857 y 02781 size 1 id 2 short m03 x 05482 y 06169 size 1 id 3 short w07 x 02219 y 04526 size 2 id 4 short w09 x 08078 y 03223 size 2
id 14 short m89 x 04000 y 08469 size 1 id 15 short m96 x 03482 y 01778 size 1
]links [
type arc source 6 target 15 weight 1 type arc source 2 target 7 weight 1
type arc source15 target 3 weight 1 type edge source 6 target 12 weight 1
type edge source 4 target 12 weight 1 type edge source 6 target 13 weight 1
]
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON and RTransforming Pajek NET and CLU files in to JSON
nodes[nameMyrielgroup1nameNapoleongroup1 nameBrujongroup4nameMmeHucheloupgroup8]
links[source1target0value1source2target0value8 source76target48value1source76target58value1]
setwd(CUsersBatageljtestpython2012amazon)library(rjson)
net2json lt- function(netFcluFjsonF)net lt- file(netFr) clu lt- file(cluFr)b lt- unlist(strsplit(readLines(netn=1) ))n lt- asinteger(b[length(b)])N lt- readLines(netn=n) nam lt- character(n)for(i in 1n) nam[i] lt- unlist(strsplit(N[i]rsquorsquo))[2]skip lt- readLines(clun=1) C lt- asinteger(readLines(clun=n))skip lt- readLines(netn=1) L lt- readLines(netn=-1)M lt- matrix(asinteger(unlist(strsplit(sub(rsquo^s+rsquorsquorsquoL)rsquos+rsquo)))ncol=3byrow=TRUE)nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(name=nam[i]group=C[i])m lt- nrow(M) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(source=M[i1]-1target=M[i2]-1value=M[i3])data lt- list(nodes=nodslinks=lnks)jstr lt- toJSON(data)json lt- file(jsonFw) cat(jstrfile=json)close(json) close(net) close(clu)
net2json(islandsnetislandscluislandsjson)
islands island 1 island 4 force islands
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
CSV2JSONR
transforming CSV files to JSON file by Vladimir Batagelj June 2016setwd(CUsersbatageljworkPythongraphSVGEUSN)library(rjson)colC lt- c(rep(character4)rep(numeric5)) nas lt- c(NANaN)nodes lt- readcsv2(bibNodesXYcsvencoding=rsquoUTF-8rsquocolClasses=colCnastrings=nas)M lt- factor(nodes$mode) mod lt- levels(M) M lt- asnumeric(M)S lt- factor(nodes$sex) sx lt- levels(S) S lt- asnumeric(S) S[isna(S)] lt- 0links lt- readcsv2(bibLinkscsvencoding=rsquoUTF-8rsquocolClasses=character)F lt- asnumeric(factor(links$fromlevels=nodes$nameordered=TRUE))T lt- asnumeric(factor(links$tolevels=nodes$nameordered=TRUE))R lt- factor(links$relation) rel lt-levels(R) R lt- asnumeric(R)n lt- nrow(nodes) nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(id=iname=nodes$name[i]mode=M[i]
sex=S[i]x=asnumeric(nodes$x[i])1000y=asnumeric(nodes$y[i])1000)m lt- nrow(links) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(type=arcsource=F[i]target=T[i]
rel=R[i]weight=1)meta lt- list(date=June 112016author=Vladimir Batagelj)leg lt- list(mode=modsex=sxrel=rel)inf lt- list(network=biborg=1nNodes=nnArcs=mtitle=Example for EUSNrsquo16legend=legmeta=meta)
data lt- list(netJSON=basicinfo=infnodes=nodslinks=lnks)json lt- file(bibjsonw) cat(toJSON(data)file=json) close(json)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibjson
netJSONbasicinfonetworkbiborg1nNodes16nArcs19titleExample for EUSNrsquo16legendmode[bookjournalpaperpersonpublisherseries]sex[fm]rel[authorOfcitescontainedIneditorOfpublishedBy]
metadateJune 112016authorVladimir Batageljnodes[id1nameBatagelj Vladimirmode4sex2x08091y06537id2nameDoreian Patrickmode4sex2x03585y06791id3nameFerligoj Anuu0161kamode4sex1x06195y06807id4nameGranovetter Markmode4sex2x01456y06605id5nameMoustaki Irinimode4sex1x0783y0228id6nameMrvar Andrejmode4sex2x0478y06301id7nameClustering with relational constraintmode3sex0x06841y03801
id15nameCambridge University Pressmode5sex0x05343y02382id16nameSpringermode5sex0x08846y0174]links[typearcsource1target10rel1weight1typearcsource2target10rel1weight1typearcsource3target10rel1weight1typearcsource1target7rel1weight1typearcsource3target7rel1weight1typearcsource4target8rel1weight1typearcsource4target14rel4weight1
typearcsource10target7rel2weight1typearcsource14target15rel5weight1typearcsource11target16rel5weight1
]
bibjson picture bibV Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON files anddisplaying a network with given nodesrsquo coordinates
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltinput type=rsquofilersquo accept=rsquoapplicationjsonrsquo onchange=rsquoopenFile(event)rsquogtltscriptgtfunction process(graph) set up the drawing areavar width = 500height = 500 s = graphattributesorg
var svg = d3select(body)append(svg)attr(width width)attr(height height)attr(xmlns httpwwww3org2000svg)
draw the linksvar link = svgselectAll(line)data(graphlinks)enter()append(line)style(stroke function(di) return((dtype==arc magenta blue)))attr(stroke-width 2)attr(x1 function(d) return(graphnodes[dsource-s]xwidth))attr(y1 function(d) return(graphnodes[dsource-s]yheight))attr(x2 function(d) return(graphnodes[dtarget-s]xwidth))attr(y2 function(d) return(graphnodes[dtarget-s]yheight))
draw the nodesvar node = svgselectAll(circle)data(graphnodes)enter()append(circle)attr(r 15)attr(cx function(di) return(dxwidth))attr(cy function(di) return(dyheight))attr(fill yellow)attr(stroke red)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
readingadapted from Matt West Reading Files Using The HTML5 FileReader API
var openFile = function(event) var input = eventtargetvar reader = new FileReader()readeronload = function()process(JSONparse(readerresult))
readerreadAsText(inputfiles[0])
ltscriptgtltbodygt
graphReadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON file from serveradapted from Ying Kit Yuen jQuery amp Javascript -ndash Read JSON files on server
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtlttitlegtLoad JSON file from serverlttitlegtlt-- httpeurekaykyueninfo20130925jquery-javascript-read-json-files-on-server --gtltscript src=httpajaxgoogleapiscomajaxlibsjquery1102jqueryminjsgtltscriptgtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltselect id=datagtltoption value=graphjsongtgraphjsonltoptiongtltoption value=classjsongtclassjsonltoptiongt
ltselectgtltbutton id=btngtReadltbuttongtltscriptgtfunction process(graph) set up the drawing area the body of function process is the same as in the previous exampleattr(stroke red)
$(btn)click(function()$getJSON($(data)val() function(json) process(json))
)ltscriptgtltbodygt
graphLoadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Network displayer graphXY
drawNetjs
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
graphXYgen
ltDOCTYPE htmlgtltmeta charset=utf-8gtltbodygtlt-- script src=graphAjsgtltscript --gtltscript src=graphBjsgtltscriptgtlt-- script src=classSjsgtltscript --gtltscript src=drawNetjsgtltscriptgtltscript src=d3d3jsgtltscriptgtltscriptgtvars = graphinfoorgwidth = graphstylecanvaswidthheight = graphstylecanvasheightvar lw = 1if ( typeof graphstyle == rsquoundefinedrsquo ampamp graphstyle) if ( typeof graphstylelink == rsquoundefinedrsquo ampamp graphstylelink )
if ( typeof graphstylelinkwidth == rsquoundefinedrsquo ampamp graphstylelinkwidth ) var lw = graphstylelinkwidth
if(graphnetJSON==rsquogeneralrsquo) var OK = drawNet(graphpersonsdatagraphfrienddata)
else var OK = drawNet(graphnodesgraphlinks)
ltscriptgtltbodygt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Saving SVG pictureS Murray Interactive Data Visualization for the Web p 235
In Google Chrome we draw a picture and open the Developer ToolsIn the Elements we identify the SVG subobject select it copy it intosome text editor and save with extension svg
To enhance the picture or to transform it to other picture formats we
process it using some vector graphics editor
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
To do
bull displayer templates can be based on GUI
bull for a description of multirelational networks we use the rel
attribute in the general version they can be treated asseparate sets of links
bull properties are considered as attributes in the general versionthey can be represented as special objects vector partitionpermutation and cluster
bull use temporal quantities for describing temporal networks
bull extend the list of info-attributes attributes type (simpletemporal) twoModeOrg nStrong nRelations planar
bull icons can be used for visualization of nodes Font AwesomeMaterial Icons tests
bull links can be visually represented in many different ways that canbe described in style
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
to do
bull style can be attached as an attribute also to an element(node link) thus changing the default settings
bull add the visualization of arcs with arrows Directed Graph EditorD3 Tips and Tricks
bull to be included in netD3js vzmetno risanje Force in urejanjeSpringy Matrix with permutations
bull can some attributes be renamed from tail nodeA rarrsource to head nodeB rarr target may be the simplestsolution is a replace in some text editor
bull implement saving of the obtained SVG picture to a file ExportSVG with Style d3jsSVG Export demo
bull include in netJSON elements useful in some applications suchas hooks or inout-ports background image etc
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Sources
Ideas for visualization styles can be found in GoJS - InteractiveDiagrams for JavaScript and HTML Visjs in VisualComplexity
GoJS mdashSankey Diagram Family Tree Logic Circuit DynamicPortsVega - a visualization grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References I
Vladimir Batagelj Complex Networks Visualization of RA Meyersed Encyclopedia of Complexity and Systems Science Springer 20091253-1268
Vladimir Batagelj Andrej Mrvar Pajek manual
Jernej Bodlaj Network Data File Formats in Reda Alhajj Jon Rokne(eds) Encyclopedia of Social Network Analysis and Mining SpringerNew York 2014 p 1076-1091
Richard Brath David Jonker Graph Analysis and VisualizationDiscovering Business Opportunity in Linked Data John Wiley amp SonsIndianapolis Indiana 2015
Emden Gansner Eleftherios Koutsofios Stephen North Drawinggraphs with dot January 26 2006
Scott Murray Interactive Data Visualization for the Web OrsquoReillySebastopol 2013
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References II
Wouter De Nooy Andrej Mrvar Vladimir Batagelj Exploratory SocialNetwork Analysis with Pajek Revised and Expanded Second EditionStructural Analysis in the Social Sciences Cambridge UniversityPress September 2011
Matthew Roughan Jonathan Tuke Unravelling Graph-Exchange FileFormats arXiv150302781 submitted on 10 Mar 2015
Wikipedia JSON
Leland Wilkinson The Grammar of Graphics Springer-Verlag NewYork 2005
V Batagelj JSON amp D3js
- Introduction
- Description of networks
- JSON
- JSON and D3js
- JSON and R
- Displayer
- To do
- References
-
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Importing data as Javascript assignmentimporthtml
lthtmlgtltheadgtlttitlegtJSON importlttitlegtltscript src=personjsgtltscriptgtltheadgtltbodygtltscriptgtdocumentwrite(JSONltttgt+person+ltttgtltbrgt)documentwrite(stringltttgt+JSONstringify(person)+ltttgtltbrgt)consolelog(JSON) consolelog(person)ltscriptgtltbodygtlthtmlgt
personjs
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Well formed and valid JSON files
A JSON file is well formed iff it respects JSONrsquos grammarIs my file well formed service JSONlint - another checker
JSON editor
Similar to XMLrsquos DTD files or schema we can imposeadditional restrictions to the structure of JSON files describingspecial types of data using JSON schema ndash the JSON filesrespecting these additional restrictions are called valid
Github validation JSON Schema Lint JSON Schemavalidator
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Simple examplegraphjson
infoorg0nNodes4nodes[nameAnnx02y02Num1Size100nameBenx02y08Num4Size500nameTimx08y02Num2Size200nameZoex08y08Num3Size400
]links[source0target1Count1Weight100source1target2Count1Weight100source2target3Count1Weight100source1target3Count2Weight300
]
In graphjs the JSON description is assigned to the variable graph
graph = infoorg0nNodes4nodes[
]
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Circular layoutadapted from Brath and Jonker p 257-258
ltDOCTYPE htmlgtlthtmlgtltheadgtltmeta charset=utf-8gtltscript src=graphjsgtltscriptgtlt-- script src=classjsgtltscript --gtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltscriptgt set up the drawing areavar width = 500
height = 500var svg = d3select(body)append(svg)
attr(width width)
attr(height height)
attr(xmlns httpwwww3org2000svg) angle and radius for layout assistancevar ang = 2 MathPI graphnodeslengthvar rad = width 25
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Circular layout
create the linksvar link = svgselectAll(line)data(graphlinks)enter()append(line)style(strokeblue)attr(stroke-width2)attr(x1function(d)return(radMathcos(dsourceang)+5width))attr(y1function(d)return(radMathsin(dsourceang)+5width))attr(x2function(d)return(radMathcos(dtargetang)+5width))attr(y2function(d)return(radMathsin(dtargetang)+5width))
create the nodes and set out in a circular layoutvar node = svgselectAll(circle)data(graphnodes)enter()append(circle)attr(r10)attr(cxfunction(di)return(radMathcos(iang)+5width))attr(cyfunction(di)return(radMathsin(iang)+5width))attr(fillyellow)attr(strokered)
ltscriptgtltbodygt
graphCirclehtml classjson classjs classCirclehtml+ labels classCircleLhtml+ permutation classPjson classPjs classCirclePhtm
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
SVG
ltxml version=10 encoding=UTF-8 standalone=yesgtltsvg width=500 height=500 xmlns=httpwwww3org2000svggtltline stroke-width=2 x1=450 y1=250 x2=250 y2=450 style=stroke bluegtltlinegtltline stroke-width=2 x1=250 y1=450 x2=50 y2=250 style=stroke bluegtltlinegtltline stroke-width=2 x1=50 y1=250 x2=250 y2=50 style=stroke bluegtltlinegtltline stroke-width=2 x1=250 y1=450 x2=250 y2=50 style=stroke bluegtltlinegtltcircle r=10 cx=450 cy=250 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=250 cy=450 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=50 cy=250 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=250 cy=50 fill=yellow stroke=redgtltcirclegtltsvggt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Networks in JSON format basic netJSONclassjson
netJSON basicinfo network class org 1 nNodes 15
nArcs 30 nEdges 13 nWeak 1title borrowing study materialsmeta date October 2015 author V Batagelj
nodes [
id 1 short m02 x 01857 y 02781 size 1 id 2 short m03 x 05482 y 06169 size 1 id 3 short w07 x 02219 y 04526 size 2 id 4 short w09 x 08078 y 03223 size 2
id 14 short m89 x 04000 y 08469 size 1 id 15 short m96 x 03482 y 01778 size 1
]links [
type arc source 6 target 15 weight 1 type arc source 2 target 7 weight 1
type arc source15 target 3 weight 1 type edge source 6 target 12 weight 1
type edge source 4 target 12 weight 1 type edge source 6 target 13 weight 1
]
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON and RTransforming Pajek NET and CLU files in to JSON
nodes[nameMyrielgroup1nameNapoleongroup1 nameBrujongroup4nameMmeHucheloupgroup8]
links[source1target0value1source2target0value8 source76target48value1source76target58value1]
setwd(CUsersBatageljtestpython2012amazon)library(rjson)
net2json lt- function(netFcluFjsonF)net lt- file(netFr) clu lt- file(cluFr)b lt- unlist(strsplit(readLines(netn=1) ))n lt- asinteger(b[length(b)])N lt- readLines(netn=n) nam lt- character(n)for(i in 1n) nam[i] lt- unlist(strsplit(N[i]rsquorsquo))[2]skip lt- readLines(clun=1) C lt- asinteger(readLines(clun=n))skip lt- readLines(netn=1) L lt- readLines(netn=-1)M lt- matrix(asinteger(unlist(strsplit(sub(rsquo^s+rsquorsquorsquoL)rsquos+rsquo)))ncol=3byrow=TRUE)nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(name=nam[i]group=C[i])m lt- nrow(M) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(source=M[i1]-1target=M[i2]-1value=M[i3])data lt- list(nodes=nodslinks=lnks)jstr lt- toJSON(data)json lt- file(jsonFw) cat(jstrfile=json)close(json) close(net) close(clu)
net2json(islandsnetislandscluislandsjson)
islands island 1 island 4 force islands
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
CSV2JSONR
transforming CSV files to JSON file by Vladimir Batagelj June 2016setwd(CUsersbatageljworkPythongraphSVGEUSN)library(rjson)colC lt- c(rep(character4)rep(numeric5)) nas lt- c(NANaN)nodes lt- readcsv2(bibNodesXYcsvencoding=rsquoUTF-8rsquocolClasses=colCnastrings=nas)M lt- factor(nodes$mode) mod lt- levels(M) M lt- asnumeric(M)S lt- factor(nodes$sex) sx lt- levels(S) S lt- asnumeric(S) S[isna(S)] lt- 0links lt- readcsv2(bibLinkscsvencoding=rsquoUTF-8rsquocolClasses=character)F lt- asnumeric(factor(links$fromlevels=nodes$nameordered=TRUE))T lt- asnumeric(factor(links$tolevels=nodes$nameordered=TRUE))R lt- factor(links$relation) rel lt-levels(R) R lt- asnumeric(R)n lt- nrow(nodes) nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(id=iname=nodes$name[i]mode=M[i]
sex=S[i]x=asnumeric(nodes$x[i])1000y=asnumeric(nodes$y[i])1000)m lt- nrow(links) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(type=arcsource=F[i]target=T[i]
rel=R[i]weight=1)meta lt- list(date=June 112016author=Vladimir Batagelj)leg lt- list(mode=modsex=sxrel=rel)inf lt- list(network=biborg=1nNodes=nnArcs=mtitle=Example for EUSNrsquo16legend=legmeta=meta)
data lt- list(netJSON=basicinfo=infnodes=nodslinks=lnks)json lt- file(bibjsonw) cat(toJSON(data)file=json) close(json)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibjson
netJSONbasicinfonetworkbiborg1nNodes16nArcs19titleExample for EUSNrsquo16legendmode[bookjournalpaperpersonpublisherseries]sex[fm]rel[authorOfcitescontainedIneditorOfpublishedBy]
metadateJune 112016authorVladimir Batageljnodes[id1nameBatagelj Vladimirmode4sex2x08091y06537id2nameDoreian Patrickmode4sex2x03585y06791id3nameFerligoj Anuu0161kamode4sex1x06195y06807id4nameGranovetter Markmode4sex2x01456y06605id5nameMoustaki Irinimode4sex1x0783y0228id6nameMrvar Andrejmode4sex2x0478y06301id7nameClustering with relational constraintmode3sex0x06841y03801
id15nameCambridge University Pressmode5sex0x05343y02382id16nameSpringermode5sex0x08846y0174]links[typearcsource1target10rel1weight1typearcsource2target10rel1weight1typearcsource3target10rel1weight1typearcsource1target7rel1weight1typearcsource3target7rel1weight1typearcsource4target8rel1weight1typearcsource4target14rel4weight1
typearcsource10target7rel2weight1typearcsource14target15rel5weight1typearcsource11target16rel5weight1
]
bibjson picture bibV Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON files anddisplaying a network with given nodesrsquo coordinates
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltinput type=rsquofilersquo accept=rsquoapplicationjsonrsquo onchange=rsquoopenFile(event)rsquogtltscriptgtfunction process(graph) set up the drawing areavar width = 500height = 500 s = graphattributesorg
var svg = d3select(body)append(svg)attr(width width)attr(height height)attr(xmlns httpwwww3org2000svg)
draw the linksvar link = svgselectAll(line)data(graphlinks)enter()append(line)style(stroke function(di) return((dtype==arc magenta blue)))attr(stroke-width 2)attr(x1 function(d) return(graphnodes[dsource-s]xwidth))attr(y1 function(d) return(graphnodes[dsource-s]yheight))attr(x2 function(d) return(graphnodes[dtarget-s]xwidth))attr(y2 function(d) return(graphnodes[dtarget-s]yheight))
draw the nodesvar node = svgselectAll(circle)data(graphnodes)enter()append(circle)attr(r 15)attr(cx function(di) return(dxwidth))attr(cy function(di) return(dyheight))attr(fill yellow)attr(stroke red)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
readingadapted from Matt West Reading Files Using The HTML5 FileReader API
var openFile = function(event) var input = eventtargetvar reader = new FileReader()readeronload = function()process(JSONparse(readerresult))
readerreadAsText(inputfiles[0])
ltscriptgtltbodygt
graphReadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON file from serveradapted from Ying Kit Yuen jQuery amp Javascript -ndash Read JSON files on server
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtlttitlegtLoad JSON file from serverlttitlegtlt-- httpeurekaykyueninfo20130925jquery-javascript-read-json-files-on-server --gtltscript src=httpajaxgoogleapiscomajaxlibsjquery1102jqueryminjsgtltscriptgtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltselect id=datagtltoption value=graphjsongtgraphjsonltoptiongtltoption value=classjsongtclassjsonltoptiongt
ltselectgtltbutton id=btngtReadltbuttongtltscriptgtfunction process(graph) set up the drawing area the body of function process is the same as in the previous exampleattr(stroke red)
$(btn)click(function()$getJSON($(data)val() function(json) process(json))
)ltscriptgtltbodygt
graphLoadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Network displayer graphXY
drawNetjs
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
graphXYgen
ltDOCTYPE htmlgtltmeta charset=utf-8gtltbodygtlt-- script src=graphAjsgtltscript --gtltscript src=graphBjsgtltscriptgtlt-- script src=classSjsgtltscript --gtltscript src=drawNetjsgtltscriptgtltscript src=d3d3jsgtltscriptgtltscriptgtvars = graphinfoorgwidth = graphstylecanvaswidthheight = graphstylecanvasheightvar lw = 1if ( typeof graphstyle == rsquoundefinedrsquo ampamp graphstyle) if ( typeof graphstylelink == rsquoundefinedrsquo ampamp graphstylelink )
if ( typeof graphstylelinkwidth == rsquoundefinedrsquo ampamp graphstylelinkwidth ) var lw = graphstylelinkwidth
if(graphnetJSON==rsquogeneralrsquo) var OK = drawNet(graphpersonsdatagraphfrienddata)
else var OK = drawNet(graphnodesgraphlinks)
ltscriptgtltbodygt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Saving SVG pictureS Murray Interactive Data Visualization for the Web p 235
In Google Chrome we draw a picture and open the Developer ToolsIn the Elements we identify the SVG subobject select it copy it intosome text editor and save with extension svg
To enhance the picture or to transform it to other picture formats we
process it using some vector graphics editor
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
To do
bull displayer templates can be based on GUI
bull for a description of multirelational networks we use the rel
attribute in the general version they can be treated asseparate sets of links
bull properties are considered as attributes in the general versionthey can be represented as special objects vector partitionpermutation and cluster
bull use temporal quantities for describing temporal networks
bull extend the list of info-attributes attributes type (simpletemporal) twoModeOrg nStrong nRelations planar
bull icons can be used for visualization of nodes Font AwesomeMaterial Icons tests
bull links can be visually represented in many different ways that canbe described in style
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
to do
bull style can be attached as an attribute also to an element(node link) thus changing the default settings
bull add the visualization of arcs with arrows Directed Graph EditorD3 Tips and Tricks
bull to be included in netD3js vzmetno risanje Force in urejanjeSpringy Matrix with permutations
bull can some attributes be renamed from tail nodeA rarrsource to head nodeB rarr target may be the simplestsolution is a replace in some text editor
bull implement saving of the obtained SVG picture to a file ExportSVG with Style d3jsSVG Export demo
bull include in netJSON elements useful in some applications suchas hooks or inout-ports background image etc
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Sources
Ideas for visualization styles can be found in GoJS - InteractiveDiagrams for JavaScript and HTML Visjs in VisualComplexity
GoJS mdashSankey Diagram Family Tree Logic Circuit DynamicPortsVega - a visualization grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References I
Vladimir Batagelj Complex Networks Visualization of RA Meyersed Encyclopedia of Complexity and Systems Science Springer 20091253-1268
Vladimir Batagelj Andrej Mrvar Pajek manual
Jernej Bodlaj Network Data File Formats in Reda Alhajj Jon Rokne(eds) Encyclopedia of Social Network Analysis and Mining SpringerNew York 2014 p 1076-1091
Richard Brath David Jonker Graph Analysis and VisualizationDiscovering Business Opportunity in Linked Data John Wiley amp SonsIndianapolis Indiana 2015
Emden Gansner Eleftherios Koutsofios Stephen North Drawinggraphs with dot January 26 2006
Scott Murray Interactive Data Visualization for the Web OrsquoReillySebastopol 2013
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References II
Wouter De Nooy Andrej Mrvar Vladimir Batagelj Exploratory SocialNetwork Analysis with Pajek Revised and Expanded Second EditionStructural Analysis in the Social Sciences Cambridge UniversityPress September 2011
Matthew Roughan Jonathan Tuke Unravelling Graph-Exchange FileFormats arXiv150302781 submitted on 10 Mar 2015
Wikipedia JSON
Leland Wilkinson The Grammar of Graphics Springer-Verlag NewYork 2005
V Batagelj JSON amp D3js
- Introduction
- Description of networks
- JSON
- JSON and D3js
- JSON and R
- Displayer
- To do
- References
-
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Well formed and valid JSON files
A JSON file is well formed iff it respects JSONrsquos grammarIs my file well formed service JSONlint - another checker
JSON editor
Similar to XMLrsquos DTD files or schema we can imposeadditional restrictions to the structure of JSON files describingspecial types of data using JSON schema ndash the JSON filesrespecting these additional restrictions are called valid
Github validation JSON Schema Lint JSON Schemavalidator
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Simple examplegraphjson
infoorg0nNodes4nodes[nameAnnx02y02Num1Size100nameBenx02y08Num4Size500nameTimx08y02Num2Size200nameZoex08y08Num3Size400
]links[source0target1Count1Weight100source1target2Count1Weight100source2target3Count1Weight100source1target3Count2Weight300
]
In graphjs the JSON description is assigned to the variable graph
graph = infoorg0nNodes4nodes[
]
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Circular layoutadapted from Brath and Jonker p 257-258
ltDOCTYPE htmlgtlthtmlgtltheadgtltmeta charset=utf-8gtltscript src=graphjsgtltscriptgtlt-- script src=classjsgtltscript --gtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltscriptgt set up the drawing areavar width = 500
height = 500var svg = d3select(body)append(svg)
attr(width width)
attr(height height)
attr(xmlns httpwwww3org2000svg) angle and radius for layout assistancevar ang = 2 MathPI graphnodeslengthvar rad = width 25
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Circular layout
create the linksvar link = svgselectAll(line)data(graphlinks)enter()append(line)style(strokeblue)attr(stroke-width2)attr(x1function(d)return(radMathcos(dsourceang)+5width))attr(y1function(d)return(radMathsin(dsourceang)+5width))attr(x2function(d)return(radMathcos(dtargetang)+5width))attr(y2function(d)return(radMathsin(dtargetang)+5width))
create the nodes and set out in a circular layoutvar node = svgselectAll(circle)data(graphnodes)enter()append(circle)attr(r10)attr(cxfunction(di)return(radMathcos(iang)+5width))attr(cyfunction(di)return(radMathsin(iang)+5width))attr(fillyellow)attr(strokered)
ltscriptgtltbodygt
graphCirclehtml classjson classjs classCirclehtml+ labels classCircleLhtml+ permutation classPjson classPjs classCirclePhtm
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
SVG
ltxml version=10 encoding=UTF-8 standalone=yesgtltsvg width=500 height=500 xmlns=httpwwww3org2000svggtltline stroke-width=2 x1=450 y1=250 x2=250 y2=450 style=stroke bluegtltlinegtltline stroke-width=2 x1=250 y1=450 x2=50 y2=250 style=stroke bluegtltlinegtltline stroke-width=2 x1=50 y1=250 x2=250 y2=50 style=stroke bluegtltlinegtltline stroke-width=2 x1=250 y1=450 x2=250 y2=50 style=stroke bluegtltlinegtltcircle r=10 cx=450 cy=250 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=250 cy=450 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=50 cy=250 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=250 cy=50 fill=yellow stroke=redgtltcirclegtltsvggt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Networks in JSON format basic netJSONclassjson
netJSON basicinfo network class org 1 nNodes 15
nArcs 30 nEdges 13 nWeak 1title borrowing study materialsmeta date October 2015 author V Batagelj
nodes [
id 1 short m02 x 01857 y 02781 size 1 id 2 short m03 x 05482 y 06169 size 1 id 3 short w07 x 02219 y 04526 size 2 id 4 short w09 x 08078 y 03223 size 2
id 14 short m89 x 04000 y 08469 size 1 id 15 short m96 x 03482 y 01778 size 1
]links [
type arc source 6 target 15 weight 1 type arc source 2 target 7 weight 1
type arc source15 target 3 weight 1 type edge source 6 target 12 weight 1
type edge source 4 target 12 weight 1 type edge source 6 target 13 weight 1
]
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON and RTransforming Pajek NET and CLU files in to JSON
nodes[nameMyrielgroup1nameNapoleongroup1 nameBrujongroup4nameMmeHucheloupgroup8]
links[source1target0value1source2target0value8 source76target48value1source76target58value1]
setwd(CUsersBatageljtestpython2012amazon)library(rjson)
net2json lt- function(netFcluFjsonF)net lt- file(netFr) clu lt- file(cluFr)b lt- unlist(strsplit(readLines(netn=1) ))n lt- asinteger(b[length(b)])N lt- readLines(netn=n) nam lt- character(n)for(i in 1n) nam[i] lt- unlist(strsplit(N[i]rsquorsquo))[2]skip lt- readLines(clun=1) C lt- asinteger(readLines(clun=n))skip lt- readLines(netn=1) L lt- readLines(netn=-1)M lt- matrix(asinteger(unlist(strsplit(sub(rsquo^s+rsquorsquorsquoL)rsquos+rsquo)))ncol=3byrow=TRUE)nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(name=nam[i]group=C[i])m lt- nrow(M) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(source=M[i1]-1target=M[i2]-1value=M[i3])data lt- list(nodes=nodslinks=lnks)jstr lt- toJSON(data)json lt- file(jsonFw) cat(jstrfile=json)close(json) close(net) close(clu)
net2json(islandsnetislandscluislandsjson)
islands island 1 island 4 force islands
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
CSV2JSONR
transforming CSV files to JSON file by Vladimir Batagelj June 2016setwd(CUsersbatageljworkPythongraphSVGEUSN)library(rjson)colC lt- c(rep(character4)rep(numeric5)) nas lt- c(NANaN)nodes lt- readcsv2(bibNodesXYcsvencoding=rsquoUTF-8rsquocolClasses=colCnastrings=nas)M lt- factor(nodes$mode) mod lt- levels(M) M lt- asnumeric(M)S lt- factor(nodes$sex) sx lt- levels(S) S lt- asnumeric(S) S[isna(S)] lt- 0links lt- readcsv2(bibLinkscsvencoding=rsquoUTF-8rsquocolClasses=character)F lt- asnumeric(factor(links$fromlevels=nodes$nameordered=TRUE))T lt- asnumeric(factor(links$tolevels=nodes$nameordered=TRUE))R lt- factor(links$relation) rel lt-levels(R) R lt- asnumeric(R)n lt- nrow(nodes) nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(id=iname=nodes$name[i]mode=M[i]
sex=S[i]x=asnumeric(nodes$x[i])1000y=asnumeric(nodes$y[i])1000)m lt- nrow(links) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(type=arcsource=F[i]target=T[i]
rel=R[i]weight=1)meta lt- list(date=June 112016author=Vladimir Batagelj)leg lt- list(mode=modsex=sxrel=rel)inf lt- list(network=biborg=1nNodes=nnArcs=mtitle=Example for EUSNrsquo16legend=legmeta=meta)
data lt- list(netJSON=basicinfo=infnodes=nodslinks=lnks)json lt- file(bibjsonw) cat(toJSON(data)file=json) close(json)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibjson
netJSONbasicinfonetworkbiborg1nNodes16nArcs19titleExample for EUSNrsquo16legendmode[bookjournalpaperpersonpublisherseries]sex[fm]rel[authorOfcitescontainedIneditorOfpublishedBy]
metadateJune 112016authorVladimir Batageljnodes[id1nameBatagelj Vladimirmode4sex2x08091y06537id2nameDoreian Patrickmode4sex2x03585y06791id3nameFerligoj Anuu0161kamode4sex1x06195y06807id4nameGranovetter Markmode4sex2x01456y06605id5nameMoustaki Irinimode4sex1x0783y0228id6nameMrvar Andrejmode4sex2x0478y06301id7nameClustering with relational constraintmode3sex0x06841y03801
id15nameCambridge University Pressmode5sex0x05343y02382id16nameSpringermode5sex0x08846y0174]links[typearcsource1target10rel1weight1typearcsource2target10rel1weight1typearcsource3target10rel1weight1typearcsource1target7rel1weight1typearcsource3target7rel1weight1typearcsource4target8rel1weight1typearcsource4target14rel4weight1
typearcsource10target7rel2weight1typearcsource14target15rel5weight1typearcsource11target16rel5weight1
]
bibjson picture bibV Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON files anddisplaying a network with given nodesrsquo coordinates
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltinput type=rsquofilersquo accept=rsquoapplicationjsonrsquo onchange=rsquoopenFile(event)rsquogtltscriptgtfunction process(graph) set up the drawing areavar width = 500height = 500 s = graphattributesorg
var svg = d3select(body)append(svg)attr(width width)attr(height height)attr(xmlns httpwwww3org2000svg)
draw the linksvar link = svgselectAll(line)data(graphlinks)enter()append(line)style(stroke function(di) return((dtype==arc magenta blue)))attr(stroke-width 2)attr(x1 function(d) return(graphnodes[dsource-s]xwidth))attr(y1 function(d) return(graphnodes[dsource-s]yheight))attr(x2 function(d) return(graphnodes[dtarget-s]xwidth))attr(y2 function(d) return(graphnodes[dtarget-s]yheight))
draw the nodesvar node = svgselectAll(circle)data(graphnodes)enter()append(circle)attr(r 15)attr(cx function(di) return(dxwidth))attr(cy function(di) return(dyheight))attr(fill yellow)attr(stroke red)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
readingadapted from Matt West Reading Files Using The HTML5 FileReader API
var openFile = function(event) var input = eventtargetvar reader = new FileReader()readeronload = function()process(JSONparse(readerresult))
readerreadAsText(inputfiles[0])
ltscriptgtltbodygt
graphReadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON file from serveradapted from Ying Kit Yuen jQuery amp Javascript -ndash Read JSON files on server
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtlttitlegtLoad JSON file from serverlttitlegtlt-- httpeurekaykyueninfo20130925jquery-javascript-read-json-files-on-server --gtltscript src=httpajaxgoogleapiscomajaxlibsjquery1102jqueryminjsgtltscriptgtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltselect id=datagtltoption value=graphjsongtgraphjsonltoptiongtltoption value=classjsongtclassjsonltoptiongt
ltselectgtltbutton id=btngtReadltbuttongtltscriptgtfunction process(graph) set up the drawing area the body of function process is the same as in the previous exampleattr(stroke red)
$(btn)click(function()$getJSON($(data)val() function(json) process(json))
)ltscriptgtltbodygt
graphLoadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Network displayer graphXY
drawNetjs
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
graphXYgen
ltDOCTYPE htmlgtltmeta charset=utf-8gtltbodygtlt-- script src=graphAjsgtltscript --gtltscript src=graphBjsgtltscriptgtlt-- script src=classSjsgtltscript --gtltscript src=drawNetjsgtltscriptgtltscript src=d3d3jsgtltscriptgtltscriptgtvars = graphinfoorgwidth = graphstylecanvaswidthheight = graphstylecanvasheightvar lw = 1if ( typeof graphstyle == rsquoundefinedrsquo ampamp graphstyle) if ( typeof graphstylelink == rsquoundefinedrsquo ampamp graphstylelink )
if ( typeof graphstylelinkwidth == rsquoundefinedrsquo ampamp graphstylelinkwidth ) var lw = graphstylelinkwidth
if(graphnetJSON==rsquogeneralrsquo) var OK = drawNet(graphpersonsdatagraphfrienddata)
else var OK = drawNet(graphnodesgraphlinks)
ltscriptgtltbodygt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Saving SVG pictureS Murray Interactive Data Visualization for the Web p 235
In Google Chrome we draw a picture and open the Developer ToolsIn the Elements we identify the SVG subobject select it copy it intosome text editor and save with extension svg
To enhance the picture or to transform it to other picture formats we
process it using some vector graphics editor
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
To do
bull displayer templates can be based on GUI
bull for a description of multirelational networks we use the rel
attribute in the general version they can be treated asseparate sets of links
bull properties are considered as attributes in the general versionthey can be represented as special objects vector partitionpermutation and cluster
bull use temporal quantities for describing temporal networks
bull extend the list of info-attributes attributes type (simpletemporal) twoModeOrg nStrong nRelations planar
bull icons can be used for visualization of nodes Font AwesomeMaterial Icons tests
bull links can be visually represented in many different ways that canbe described in style
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
to do
bull style can be attached as an attribute also to an element(node link) thus changing the default settings
bull add the visualization of arcs with arrows Directed Graph EditorD3 Tips and Tricks
bull to be included in netD3js vzmetno risanje Force in urejanjeSpringy Matrix with permutations
bull can some attributes be renamed from tail nodeA rarrsource to head nodeB rarr target may be the simplestsolution is a replace in some text editor
bull implement saving of the obtained SVG picture to a file ExportSVG with Style d3jsSVG Export demo
bull include in netJSON elements useful in some applications suchas hooks or inout-ports background image etc
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Sources
Ideas for visualization styles can be found in GoJS - InteractiveDiagrams for JavaScript and HTML Visjs in VisualComplexity
GoJS mdashSankey Diagram Family Tree Logic Circuit DynamicPortsVega - a visualization grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References I
Vladimir Batagelj Complex Networks Visualization of RA Meyersed Encyclopedia of Complexity and Systems Science Springer 20091253-1268
Vladimir Batagelj Andrej Mrvar Pajek manual
Jernej Bodlaj Network Data File Formats in Reda Alhajj Jon Rokne(eds) Encyclopedia of Social Network Analysis and Mining SpringerNew York 2014 p 1076-1091
Richard Brath David Jonker Graph Analysis and VisualizationDiscovering Business Opportunity in Linked Data John Wiley amp SonsIndianapolis Indiana 2015
Emden Gansner Eleftherios Koutsofios Stephen North Drawinggraphs with dot January 26 2006
Scott Murray Interactive Data Visualization for the Web OrsquoReillySebastopol 2013
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References II
Wouter De Nooy Andrej Mrvar Vladimir Batagelj Exploratory SocialNetwork Analysis with Pajek Revised and Expanded Second EditionStructural Analysis in the Social Sciences Cambridge UniversityPress September 2011
Matthew Roughan Jonathan Tuke Unravelling Graph-Exchange FileFormats arXiv150302781 submitted on 10 Mar 2015
Wikipedia JSON
Leland Wilkinson The Grammar of Graphics Springer-Verlag NewYork 2005
V Batagelj JSON amp D3js
- Introduction
- Description of networks
- JSON
- JSON and D3js
- JSON and R
- Displayer
- To do
- References
-
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Simple examplegraphjson
infoorg0nNodes4nodes[nameAnnx02y02Num1Size100nameBenx02y08Num4Size500nameTimx08y02Num2Size200nameZoex08y08Num3Size400
]links[source0target1Count1Weight100source1target2Count1Weight100source2target3Count1Weight100source1target3Count2Weight300
]
In graphjs the JSON description is assigned to the variable graph
graph = infoorg0nNodes4nodes[
]
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Circular layoutadapted from Brath and Jonker p 257-258
ltDOCTYPE htmlgtlthtmlgtltheadgtltmeta charset=utf-8gtltscript src=graphjsgtltscriptgtlt-- script src=classjsgtltscript --gtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltscriptgt set up the drawing areavar width = 500
height = 500var svg = d3select(body)append(svg)
attr(width width)
attr(height height)
attr(xmlns httpwwww3org2000svg) angle and radius for layout assistancevar ang = 2 MathPI graphnodeslengthvar rad = width 25
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Circular layout
create the linksvar link = svgselectAll(line)data(graphlinks)enter()append(line)style(strokeblue)attr(stroke-width2)attr(x1function(d)return(radMathcos(dsourceang)+5width))attr(y1function(d)return(radMathsin(dsourceang)+5width))attr(x2function(d)return(radMathcos(dtargetang)+5width))attr(y2function(d)return(radMathsin(dtargetang)+5width))
create the nodes and set out in a circular layoutvar node = svgselectAll(circle)data(graphnodes)enter()append(circle)attr(r10)attr(cxfunction(di)return(radMathcos(iang)+5width))attr(cyfunction(di)return(radMathsin(iang)+5width))attr(fillyellow)attr(strokered)
ltscriptgtltbodygt
graphCirclehtml classjson classjs classCirclehtml+ labels classCircleLhtml+ permutation classPjson classPjs classCirclePhtm
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
SVG
ltxml version=10 encoding=UTF-8 standalone=yesgtltsvg width=500 height=500 xmlns=httpwwww3org2000svggtltline stroke-width=2 x1=450 y1=250 x2=250 y2=450 style=stroke bluegtltlinegtltline stroke-width=2 x1=250 y1=450 x2=50 y2=250 style=stroke bluegtltlinegtltline stroke-width=2 x1=50 y1=250 x2=250 y2=50 style=stroke bluegtltlinegtltline stroke-width=2 x1=250 y1=450 x2=250 y2=50 style=stroke bluegtltlinegtltcircle r=10 cx=450 cy=250 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=250 cy=450 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=50 cy=250 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=250 cy=50 fill=yellow stroke=redgtltcirclegtltsvggt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Networks in JSON format basic netJSONclassjson
netJSON basicinfo network class org 1 nNodes 15
nArcs 30 nEdges 13 nWeak 1title borrowing study materialsmeta date October 2015 author V Batagelj
nodes [
id 1 short m02 x 01857 y 02781 size 1 id 2 short m03 x 05482 y 06169 size 1 id 3 short w07 x 02219 y 04526 size 2 id 4 short w09 x 08078 y 03223 size 2
id 14 short m89 x 04000 y 08469 size 1 id 15 short m96 x 03482 y 01778 size 1
]links [
type arc source 6 target 15 weight 1 type arc source 2 target 7 weight 1
type arc source15 target 3 weight 1 type edge source 6 target 12 weight 1
type edge source 4 target 12 weight 1 type edge source 6 target 13 weight 1
]
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON and RTransforming Pajek NET and CLU files in to JSON
nodes[nameMyrielgroup1nameNapoleongroup1 nameBrujongroup4nameMmeHucheloupgroup8]
links[source1target0value1source2target0value8 source76target48value1source76target58value1]
setwd(CUsersBatageljtestpython2012amazon)library(rjson)
net2json lt- function(netFcluFjsonF)net lt- file(netFr) clu lt- file(cluFr)b lt- unlist(strsplit(readLines(netn=1) ))n lt- asinteger(b[length(b)])N lt- readLines(netn=n) nam lt- character(n)for(i in 1n) nam[i] lt- unlist(strsplit(N[i]rsquorsquo))[2]skip lt- readLines(clun=1) C lt- asinteger(readLines(clun=n))skip lt- readLines(netn=1) L lt- readLines(netn=-1)M lt- matrix(asinteger(unlist(strsplit(sub(rsquo^s+rsquorsquorsquoL)rsquos+rsquo)))ncol=3byrow=TRUE)nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(name=nam[i]group=C[i])m lt- nrow(M) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(source=M[i1]-1target=M[i2]-1value=M[i3])data lt- list(nodes=nodslinks=lnks)jstr lt- toJSON(data)json lt- file(jsonFw) cat(jstrfile=json)close(json) close(net) close(clu)
net2json(islandsnetislandscluislandsjson)
islands island 1 island 4 force islands
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
CSV2JSONR
transforming CSV files to JSON file by Vladimir Batagelj June 2016setwd(CUsersbatageljworkPythongraphSVGEUSN)library(rjson)colC lt- c(rep(character4)rep(numeric5)) nas lt- c(NANaN)nodes lt- readcsv2(bibNodesXYcsvencoding=rsquoUTF-8rsquocolClasses=colCnastrings=nas)M lt- factor(nodes$mode) mod lt- levels(M) M lt- asnumeric(M)S lt- factor(nodes$sex) sx lt- levels(S) S lt- asnumeric(S) S[isna(S)] lt- 0links lt- readcsv2(bibLinkscsvencoding=rsquoUTF-8rsquocolClasses=character)F lt- asnumeric(factor(links$fromlevels=nodes$nameordered=TRUE))T lt- asnumeric(factor(links$tolevels=nodes$nameordered=TRUE))R lt- factor(links$relation) rel lt-levels(R) R lt- asnumeric(R)n lt- nrow(nodes) nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(id=iname=nodes$name[i]mode=M[i]
sex=S[i]x=asnumeric(nodes$x[i])1000y=asnumeric(nodes$y[i])1000)m lt- nrow(links) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(type=arcsource=F[i]target=T[i]
rel=R[i]weight=1)meta lt- list(date=June 112016author=Vladimir Batagelj)leg lt- list(mode=modsex=sxrel=rel)inf lt- list(network=biborg=1nNodes=nnArcs=mtitle=Example for EUSNrsquo16legend=legmeta=meta)
data lt- list(netJSON=basicinfo=infnodes=nodslinks=lnks)json lt- file(bibjsonw) cat(toJSON(data)file=json) close(json)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibjson
netJSONbasicinfonetworkbiborg1nNodes16nArcs19titleExample for EUSNrsquo16legendmode[bookjournalpaperpersonpublisherseries]sex[fm]rel[authorOfcitescontainedIneditorOfpublishedBy]
metadateJune 112016authorVladimir Batageljnodes[id1nameBatagelj Vladimirmode4sex2x08091y06537id2nameDoreian Patrickmode4sex2x03585y06791id3nameFerligoj Anuu0161kamode4sex1x06195y06807id4nameGranovetter Markmode4sex2x01456y06605id5nameMoustaki Irinimode4sex1x0783y0228id6nameMrvar Andrejmode4sex2x0478y06301id7nameClustering with relational constraintmode3sex0x06841y03801
id15nameCambridge University Pressmode5sex0x05343y02382id16nameSpringermode5sex0x08846y0174]links[typearcsource1target10rel1weight1typearcsource2target10rel1weight1typearcsource3target10rel1weight1typearcsource1target7rel1weight1typearcsource3target7rel1weight1typearcsource4target8rel1weight1typearcsource4target14rel4weight1
typearcsource10target7rel2weight1typearcsource14target15rel5weight1typearcsource11target16rel5weight1
]
bibjson picture bibV Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON files anddisplaying a network with given nodesrsquo coordinates
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltinput type=rsquofilersquo accept=rsquoapplicationjsonrsquo onchange=rsquoopenFile(event)rsquogtltscriptgtfunction process(graph) set up the drawing areavar width = 500height = 500 s = graphattributesorg
var svg = d3select(body)append(svg)attr(width width)attr(height height)attr(xmlns httpwwww3org2000svg)
draw the linksvar link = svgselectAll(line)data(graphlinks)enter()append(line)style(stroke function(di) return((dtype==arc magenta blue)))attr(stroke-width 2)attr(x1 function(d) return(graphnodes[dsource-s]xwidth))attr(y1 function(d) return(graphnodes[dsource-s]yheight))attr(x2 function(d) return(graphnodes[dtarget-s]xwidth))attr(y2 function(d) return(graphnodes[dtarget-s]yheight))
draw the nodesvar node = svgselectAll(circle)data(graphnodes)enter()append(circle)attr(r 15)attr(cx function(di) return(dxwidth))attr(cy function(di) return(dyheight))attr(fill yellow)attr(stroke red)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
readingadapted from Matt West Reading Files Using The HTML5 FileReader API
var openFile = function(event) var input = eventtargetvar reader = new FileReader()readeronload = function()process(JSONparse(readerresult))
readerreadAsText(inputfiles[0])
ltscriptgtltbodygt
graphReadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON file from serveradapted from Ying Kit Yuen jQuery amp Javascript -ndash Read JSON files on server
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtlttitlegtLoad JSON file from serverlttitlegtlt-- httpeurekaykyueninfo20130925jquery-javascript-read-json-files-on-server --gtltscript src=httpajaxgoogleapiscomajaxlibsjquery1102jqueryminjsgtltscriptgtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltselect id=datagtltoption value=graphjsongtgraphjsonltoptiongtltoption value=classjsongtclassjsonltoptiongt
ltselectgtltbutton id=btngtReadltbuttongtltscriptgtfunction process(graph) set up the drawing area the body of function process is the same as in the previous exampleattr(stroke red)
$(btn)click(function()$getJSON($(data)val() function(json) process(json))
)ltscriptgtltbodygt
graphLoadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Network displayer graphXY
drawNetjs
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
graphXYgen
ltDOCTYPE htmlgtltmeta charset=utf-8gtltbodygtlt-- script src=graphAjsgtltscript --gtltscript src=graphBjsgtltscriptgtlt-- script src=classSjsgtltscript --gtltscript src=drawNetjsgtltscriptgtltscript src=d3d3jsgtltscriptgtltscriptgtvars = graphinfoorgwidth = graphstylecanvaswidthheight = graphstylecanvasheightvar lw = 1if ( typeof graphstyle == rsquoundefinedrsquo ampamp graphstyle) if ( typeof graphstylelink == rsquoundefinedrsquo ampamp graphstylelink )
if ( typeof graphstylelinkwidth == rsquoundefinedrsquo ampamp graphstylelinkwidth ) var lw = graphstylelinkwidth
if(graphnetJSON==rsquogeneralrsquo) var OK = drawNet(graphpersonsdatagraphfrienddata)
else var OK = drawNet(graphnodesgraphlinks)
ltscriptgtltbodygt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Saving SVG pictureS Murray Interactive Data Visualization for the Web p 235
In Google Chrome we draw a picture and open the Developer ToolsIn the Elements we identify the SVG subobject select it copy it intosome text editor and save with extension svg
To enhance the picture or to transform it to other picture formats we
process it using some vector graphics editor
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
To do
bull displayer templates can be based on GUI
bull for a description of multirelational networks we use the rel
attribute in the general version they can be treated asseparate sets of links
bull properties are considered as attributes in the general versionthey can be represented as special objects vector partitionpermutation and cluster
bull use temporal quantities for describing temporal networks
bull extend the list of info-attributes attributes type (simpletemporal) twoModeOrg nStrong nRelations planar
bull icons can be used for visualization of nodes Font AwesomeMaterial Icons tests
bull links can be visually represented in many different ways that canbe described in style
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
to do
bull style can be attached as an attribute also to an element(node link) thus changing the default settings
bull add the visualization of arcs with arrows Directed Graph EditorD3 Tips and Tricks
bull to be included in netD3js vzmetno risanje Force in urejanjeSpringy Matrix with permutations
bull can some attributes be renamed from tail nodeA rarrsource to head nodeB rarr target may be the simplestsolution is a replace in some text editor
bull implement saving of the obtained SVG picture to a file ExportSVG with Style d3jsSVG Export demo
bull include in netJSON elements useful in some applications suchas hooks or inout-ports background image etc
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Sources
Ideas for visualization styles can be found in GoJS - InteractiveDiagrams for JavaScript and HTML Visjs in VisualComplexity
GoJS mdashSankey Diagram Family Tree Logic Circuit DynamicPortsVega - a visualization grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References I
Vladimir Batagelj Complex Networks Visualization of RA Meyersed Encyclopedia of Complexity and Systems Science Springer 20091253-1268
Vladimir Batagelj Andrej Mrvar Pajek manual
Jernej Bodlaj Network Data File Formats in Reda Alhajj Jon Rokne(eds) Encyclopedia of Social Network Analysis and Mining SpringerNew York 2014 p 1076-1091
Richard Brath David Jonker Graph Analysis and VisualizationDiscovering Business Opportunity in Linked Data John Wiley amp SonsIndianapolis Indiana 2015
Emden Gansner Eleftherios Koutsofios Stephen North Drawinggraphs with dot January 26 2006
Scott Murray Interactive Data Visualization for the Web OrsquoReillySebastopol 2013
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References II
Wouter De Nooy Andrej Mrvar Vladimir Batagelj Exploratory SocialNetwork Analysis with Pajek Revised and Expanded Second EditionStructural Analysis in the Social Sciences Cambridge UniversityPress September 2011
Matthew Roughan Jonathan Tuke Unravelling Graph-Exchange FileFormats arXiv150302781 submitted on 10 Mar 2015
Wikipedia JSON
Leland Wilkinson The Grammar of Graphics Springer-Verlag NewYork 2005
V Batagelj JSON amp D3js
- Introduction
- Description of networks
- JSON
- JSON and D3js
- JSON and R
- Displayer
- To do
- References
-
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Circular layoutadapted from Brath and Jonker p 257-258
ltDOCTYPE htmlgtlthtmlgtltheadgtltmeta charset=utf-8gtltscript src=graphjsgtltscriptgtlt-- script src=classjsgtltscript --gtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltscriptgt set up the drawing areavar width = 500
height = 500var svg = d3select(body)append(svg)
attr(width width)
attr(height height)
attr(xmlns httpwwww3org2000svg) angle and radius for layout assistancevar ang = 2 MathPI graphnodeslengthvar rad = width 25
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Circular layout
create the linksvar link = svgselectAll(line)data(graphlinks)enter()append(line)style(strokeblue)attr(stroke-width2)attr(x1function(d)return(radMathcos(dsourceang)+5width))attr(y1function(d)return(radMathsin(dsourceang)+5width))attr(x2function(d)return(radMathcos(dtargetang)+5width))attr(y2function(d)return(radMathsin(dtargetang)+5width))
create the nodes and set out in a circular layoutvar node = svgselectAll(circle)data(graphnodes)enter()append(circle)attr(r10)attr(cxfunction(di)return(radMathcos(iang)+5width))attr(cyfunction(di)return(radMathsin(iang)+5width))attr(fillyellow)attr(strokered)
ltscriptgtltbodygt
graphCirclehtml classjson classjs classCirclehtml+ labels classCircleLhtml+ permutation classPjson classPjs classCirclePhtm
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
SVG
ltxml version=10 encoding=UTF-8 standalone=yesgtltsvg width=500 height=500 xmlns=httpwwww3org2000svggtltline stroke-width=2 x1=450 y1=250 x2=250 y2=450 style=stroke bluegtltlinegtltline stroke-width=2 x1=250 y1=450 x2=50 y2=250 style=stroke bluegtltlinegtltline stroke-width=2 x1=50 y1=250 x2=250 y2=50 style=stroke bluegtltlinegtltline stroke-width=2 x1=250 y1=450 x2=250 y2=50 style=stroke bluegtltlinegtltcircle r=10 cx=450 cy=250 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=250 cy=450 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=50 cy=250 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=250 cy=50 fill=yellow stroke=redgtltcirclegtltsvggt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Networks in JSON format basic netJSONclassjson
netJSON basicinfo network class org 1 nNodes 15
nArcs 30 nEdges 13 nWeak 1title borrowing study materialsmeta date October 2015 author V Batagelj
nodes [
id 1 short m02 x 01857 y 02781 size 1 id 2 short m03 x 05482 y 06169 size 1 id 3 short w07 x 02219 y 04526 size 2 id 4 short w09 x 08078 y 03223 size 2
id 14 short m89 x 04000 y 08469 size 1 id 15 short m96 x 03482 y 01778 size 1
]links [
type arc source 6 target 15 weight 1 type arc source 2 target 7 weight 1
type arc source15 target 3 weight 1 type edge source 6 target 12 weight 1
type edge source 4 target 12 weight 1 type edge source 6 target 13 weight 1
]
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON and RTransforming Pajek NET and CLU files in to JSON
nodes[nameMyrielgroup1nameNapoleongroup1 nameBrujongroup4nameMmeHucheloupgroup8]
links[source1target0value1source2target0value8 source76target48value1source76target58value1]
setwd(CUsersBatageljtestpython2012amazon)library(rjson)
net2json lt- function(netFcluFjsonF)net lt- file(netFr) clu lt- file(cluFr)b lt- unlist(strsplit(readLines(netn=1) ))n lt- asinteger(b[length(b)])N lt- readLines(netn=n) nam lt- character(n)for(i in 1n) nam[i] lt- unlist(strsplit(N[i]rsquorsquo))[2]skip lt- readLines(clun=1) C lt- asinteger(readLines(clun=n))skip lt- readLines(netn=1) L lt- readLines(netn=-1)M lt- matrix(asinteger(unlist(strsplit(sub(rsquo^s+rsquorsquorsquoL)rsquos+rsquo)))ncol=3byrow=TRUE)nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(name=nam[i]group=C[i])m lt- nrow(M) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(source=M[i1]-1target=M[i2]-1value=M[i3])data lt- list(nodes=nodslinks=lnks)jstr lt- toJSON(data)json lt- file(jsonFw) cat(jstrfile=json)close(json) close(net) close(clu)
net2json(islandsnetislandscluislandsjson)
islands island 1 island 4 force islands
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
CSV2JSONR
transforming CSV files to JSON file by Vladimir Batagelj June 2016setwd(CUsersbatageljworkPythongraphSVGEUSN)library(rjson)colC lt- c(rep(character4)rep(numeric5)) nas lt- c(NANaN)nodes lt- readcsv2(bibNodesXYcsvencoding=rsquoUTF-8rsquocolClasses=colCnastrings=nas)M lt- factor(nodes$mode) mod lt- levels(M) M lt- asnumeric(M)S lt- factor(nodes$sex) sx lt- levels(S) S lt- asnumeric(S) S[isna(S)] lt- 0links lt- readcsv2(bibLinkscsvencoding=rsquoUTF-8rsquocolClasses=character)F lt- asnumeric(factor(links$fromlevels=nodes$nameordered=TRUE))T lt- asnumeric(factor(links$tolevels=nodes$nameordered=TRUE))R lt- factor(links$relation) rel lt-levels(R) R lt- asnumeric(R)n lt- nrow(nodes) nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(id=iname=nodes$name[i]mode=M[i]
sex=S[i]x=asnumeric(nodes$x[i])1000y=asnumeric(nodes$y[i])1000)m lt- nrow(links) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(type=arcsource=F[i]target=T[i]
rel=R[i]weight=1)meta lt- list(date=June 112016author=Vladimir Batagelj)leg lt- list(mode=modsex=sxrel=rel)inf lt- list(network=biborg=1nNodes=nnArcs=mtitle=Example for EUSNrsquo16legend=legmeta=meta)
data lt- list(netJSON=basicinfo=infnodes=nodslinks=lnks)json lt- file(bibjsonw) cat(toJSON(data)file=json) close(json)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibjson
netJSONbasicinfonetworkbiborg1nNodes16nArcs19titleExample for EUSNrsquo16legendmode[bookjournalpaperpersonpublisherseries]sex[fm]rel[authorOfcitescontainedIneditorOfpublishedBy]
metadateJune 112016authorVladimir Batageljnodes[id1nameBatagelj Vladimirmode4sex2x08091y06537id2nameDoreian Patrickmode4sex2x03585y06791id3nameFerligoj Anuu0161kamode4sex1x06195y06807id4nameGranovetter Markmode4sex2x01456y06605id5nameMoustaki Irinimode4sex1x0783y0228id6nameMrvar Andrejmode4sex2x0478y06301id7nameClustering with relational constraintmode3sex0x06841y03801
id15nameCambridge University Pressmode5sex0x05343y02382id16nameSpringermode5sex0x08846y0174]links[typearcsource1target10rel1weight1typearcsource2target10rel1weight1typearcsource3target10rel1weight1typearcsource1target7rel1weight1typearcsource3target7rel1weight1typearcsource4target8rel1weight1typearcsource4target14rel4weight1
typearcsource10target7rel2weight1typearcsource14target15rel5weight1typearcsource11target16rel5weight1
]
bibjson picture bibV Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON files anddisplaying a network with given nodesrsquo coordinates
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltinput type=rsquofilersquo accept=rsquoapplicationjsonrsquo onchange=rsquoopenFile(event)rsquogtltscriptgtfunction process(graph) set up the drawing areavar width = 500height = 500 s = graphattributesorg
var svg = d3select(body)append(svg)attr(width width)attr(height height)attr(xmlns httpwwww3org2000svg)
draw the linksvar link = svgselectAll(line)data(graphlinks)enter()append(line)style(stroke function(di) return((dtype==arc magenta blue)))attr(stroke-width 2)attr(x1 function(d) return(graphnodes[dsource-s]xwidth))attr(y1 function(d) return(graphnodes[dsource-s]yheight))attr(x2 function(d) return(graphnodes[dtarget-s]xwidth))attr(y2 function(d) return(graphnodes[dtarget-s]yheight))
draw the nodesvar node = svgselectAll(circle)data(graphnodes)enter()append(circle)attr(r 15)attr(cx function(di) return(dxwidth))attr(cy function(di) return(dyheight))attr(fill yellow)attr(stroke red)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
readingadapted from Matt West Reading Files Using The HTML5 FileReader API
var openFile = function(event) var input = eventtargetvar reader = new FileReader()readeronload = function()process(JSONparse(readerresult))
readerreadAsText(inputfiles[0])
ltscriptgtltbodygt
graphReadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON file from serveradapted from Ying Kit Yuen jQuery amp Javascript -ndash Read JSON files on server
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtlttitlegtLoad JSON file from serverlttitlegtlt-- httpeurekaykyueninfo20130925jquery-javascript-read-json-files-on-server --gtltscript src=httpajaxgoogleapiscomajaxlibsjquery1102jqueryminjsgtltscriptgtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltselect id=datagtltoption value=graphjsongtgraphjsonltoptiongtltoption value=classjsongtclassjsonltoptiongt
ltselectgtltbutton id=btngtReadltbuttongtltscriptgtfunction process(graph) set up the drawing area the body of function process is the same as in the previous exampleattr(stroke red)
$(btn)click(function()$getJSON($(data)val() function(json) process(json))
)ltscriptgtltbodygt
graphLoadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Network displayer graphXY
drawNetjs
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
graphXYgen
ltDOCTYPE htmlgtltmeta charset=utf-8gtltbodygtlt-- script src=graphAjsgtltscript --gtltscript src=graphBjsgtltscriptgtlt-- script src=classSjsgtltscript --gtltscript src=drawNetjsgtltscriptgtltscript src=d3d3jsgtltscriptgtltscriptgtvars = graphinfoorgwidth = graphstylecanvaswidthheight = graphstylecanvasheightvar lw = 1if ( typeof graphstyle == rsquoundefinedrsquo ampamp graphstyle) if ( typeof graphstylelink == rsquoundefinedrsquo ampamp graphstylelink )
if ( typeof graphstylelinkwidth == rsquoundefinedrsquo ampamp graphstylelinkwidth ) var lw = graphstylelinkwidth
if(graphnetJSON==rsquogeneralrsquo) var OK = drawNet(graphpersonsdatagraphfrienddata)
else var OK = drawNet(graphnodesgraphlinks)
ltscriptgtltbodygt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Saving SVG pictureS Murray Interactive Data Visualization for the Web p 235
In Google Chrome we draw a picture and open the Developer ToolsIn the Elements we identify the SVG subobject select it copy it intosome text editor and save with extension svg
To enhance the picture or to transform it to other picture formats we
process it using some vector graphics editor
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
To do
bull displayer templates can be based on GUI
bull for a description of multirelational networks we use the rel
attribute in the general version they can be treated asseparate sets of links
bull properties are considered as attributes in the general versionthey can be represented as special objects vector partitionpermutation and cluster
bull use temporal quantities for describing temporal networks
bull extend the list of info-attributes attributes type (simpletemporal) twoModeOrg nStrong nRelations planar
bull icons can be used for visualization of nodes Font AwesomeMaterial Icons tests
bull links can be visually represented in many different ways that canbe described in style
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
to do
bull style can be attached as an attribute also to an element(node link) thus changing the default settings
bull add the visualization of arcs with arrows Directed Graph EditorD3 Tips and Tricks
bull to be included in netD3js vzmetno risanje Force in urejanjeSpringy Matrix with permutations
bull can some attributes be renamed from tail nodeA rarrsource to head nodeB rarr target may be the simplestsolution is a replace in some text editor
bull implement saving of the obtained SVG picture to a file ExportSVG with Style d3jsSVG Export demo
bull include in netJSON elements useful in some applications suchas hooks or inout-ports background image etc
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Sources
Ideas for visualization styles can be found in GoJS - InteractiveDiagrams for JavaScript and HTML Visjs in VisualComplexity
GoJS mdashSankey Diagram Family Tree Logic Circuit DynamicPortsVega - a visualization grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References I
Vladimir Batagelj Complex Networks Visualization of RA Meyersed Encyclopedia of Complexity and Systems Science Springer 20091253-1268
Vladimir Batagelj Andrej Mrvar Pajek manual
Jernej Bodlaj Network Data File Formats in Reda Alhajj Jon Rokne(eds) Encyclopedia of Social Network Analysis and Mining SpringerNew York 2014 p 1076-1091
Richard Brath David Jonker Graph Analysis and VisualizationDiscovering Business Opportunity in Linked Data John Wiley amp SonsIndianapolis Indiana 2015
Emden Gansner Eleftherios Koutsofios Stephen North Drawinggraphs with dot January 26 2006
Scott Murray Interactive Data Visualization for the Web OrsquoReillySebastopol 2013
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References II
Wouter De Nooy Andrej Mrvar Vladimir Batagelj Exploratory SocialNetwork Analysis with Pajek Revised and Expanded Second EditionStructural Analysis in the Social Sciences Cambridge UniversityPress September 2011
Matthew Roughan Jonathan Tuke Unravelling Graph-Exchange FileFormats arXiv150302781 submitted on 10 Mar 2015
Wikipedia JSON
Leland Wilkinson The Grammar of Graphics Springer-Verlag NewYork 2005
V Batagelj JSON amp D3js
- Introduction
- Description of networks
- JSON
- JSON and D3js
- JSON and R
- Displayer
- To do
- References
-
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Circular layout
create the linksvar link = svgselectAll(line)data(graphlinks)enter()append(line)style(strokeblue)attr(stroke-width2)attr(x1function(d)return(radMathcos(dsourceang)+5width))attr(y1function(d)return(radMathsin(dsourceang)+5width))attr(x2function(d)return(radMathcos(dtargetang)+5width))attr(y2function(d)return(radMathsin(dtargetang)+5width))
create the nodes and set out in a circular layoutvar node = svgselectAll(circle)data(graphnodes)enter()append(circle)attr(r10)attr(cxfunction(di)return(radMathcos(iang)+5width))attr(cyfunction(di)return(radMathsin(iang)+5width))attr(fillyellow)attr(strokered)
ltscriptgtltbodygt
graphCirclehtml classjson classjs classCirclehtml+ labels classCircleLhtml+ permutation classPjson classPjs classCirclePhtm
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
SVG
ltxml version=10 encoding=UTF-8 standalone=yesgtltsvg width=500 height=500 xmlns=httpwwww3org2000svggtltline stroke-width=2 x1=450 y1=250 x2=250 y2=450 style=stroke bluegtltlinegtltline stroke-width=2 x1=250 y1=450 x2=50 y2=250 style=stroke bluegtltlinegtltline stroke-width=2 x1=50 y1=250 x2=250 y2=50 style=stroke bluegtltlinegtltline stroke-width=2 x1=250 y1=450 x2=250 y2=50 style=stroke bluegtltlinegtltcircle r=10 cx=450 cy=250 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=250 cy=450 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=50 cy=250 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=250 cy=50 fill=yellow stroke=redgtltcirclegtltsvggt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Networks in JSON format basic netJSONclassjson
netJSON basicinfo network class org 1 nNodes 15
nArcs 30 nEdges 13 nWeak 1title borrowing study materialsmeta date October 2015 author V Batagelj
nodes [
id 1 short m02 x 01857 y 02781 size 1 id 2 short m03 x 05482 y 06169 size 1 id 3 short w07 x 02219 y 04526 size 2 id 4 short w09 x 08078 y 03223 size 2
id 14 short m89 x 04000 y 08469 size 1 id 15 short m96 x 03482 y 01778 size 1
]links [
type arc source 6 target 15 weight 1 type arc source 2 target 7 weight 1
type arc source15 target 3 weight 1 type edge source 6 target 12 weight 1
type edge source 4 target 12 weight 1 type edge source 6 target 13 weight 1
]
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON and RTransforming Pajek NET and CLU files in to JSON
nodes[nameMyrielgroup1nameNapoleongroup1 nameBrujongroup4nameMmeHucheloupgroup8]
links[source1target0value1source2target0value8 source76target48value1source76target58value1]
setwd(CUsersBatageljtestpython2012amazon)library(rjson)
net2json lt- function(netFcluFjsonF)net lt- file(netFr) clu lt- file(cluFr)b lt- unlist(strsplit(readLines(netn=1) ))n lt- asinteger(b[length(b)])N lt- readLines(netn=n) nam lt- character(n)for(i in 1n) nam[i] lt- unlist(strsplit(N[i]rsquorsquo))[2]skip lt- readLines(clun=1) C lt- asinteger(readLines(clun=n))skip lt- readLines(netn=1) L lt- readLines(netn=-1)M lt- matrix(asinteger(unlist(strsplit(sub(rsquo^s+rsquorsquorsquoL)rsquos+rsquo)))ncol=3byrow=TRUE)nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(name=nam[i]group=C[i])m lt- nrow(M) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(source=M[i1]-1target=M[i2]-1value=M[i3])data lt- list(nodes=nodslinks=lnks)jstr lt- toJSON(data)json lt- file(jsonFw) cat(jstrfile=json)close(json) close(net) close(clu)
net2json(islandsnetislandscluislandsjson)
islands island 1 island 4 force islands
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
CSV2JSONR
transforming CSV files to JSON file by Vladimir Batagelj June 2016setwd(CUsersbatageljworkPythongraphSVGEUSN)library(rjson)colC lt- c(rep(character4)rep(numeric5)) nas lt- c(NANaN)nodes lt- readcsv2(bibNodesXYcsvencoding=rsquoUTF-8rsquocolClasses=colCnastrings=nas)M lt- factor(nodes$mode) mod lt- levels(M) M lt- asnumeric(M)S lt- factor(nodes$sex) sx lt- levels(S) S lt- asnumeric(S) S[isna(S)] lt- 0links lt- readcsv2(bibLinkscsvencoding=rsquoUTF-8rsquocolClasses=character)F lt- asnumeric(factor(links$fromlevels=nodes$nameordered=TRUE))T lt- asnumeric(factor(links$tolevels=nodes$nameordered=TRUE))R lt- factor(links$relation) rel lt-levels(R) R lt- asnumeric(R)n lt- nrow(nodes) nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(id=iname=nodes$name[i]mode=M[i]
sex=S[i]x=asnumeric(nodes$x[i])1000y=asnumeric(nodes$y[i])1000)m lt- nrow(links) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(type=arcsource=F[i]target=T[i]
rel=R[i]weight=1)meta lt- list(date=June 112016author=Vladimir Batagelj)leg lt- list(mode=modsex=sxrel=rel)inf lt- list(network=biborg=1nNodes=nnArcs=mtitle=Example for EUSNrsquo16legend=legmeta=meta)
data lt- list(netJSON=basicinfo=infnodes=nodslinks=lnks)json lt- file(bibjsonw) cat(toJSON(data)file=json) close(json)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibjson
netJSONbasicinfonetworkbiborg1nNodes16nArcs19titleExample for EUSNrsquo16legendmode[bookjournalpaperpersonpublisherseries]sex[fm]rel[authorOfcitescontainedIneditorOfpublishedBy]
metadateJune 112016authorVladimir Batageljnodes[id1nameBatagelj Vladimirmode4sex2x08091y06537id2nameDoreian Patrickmode4sex2x03585y06791id3nameFerligoj Anuu0161kamode4sex1x06195y06807id4nameGranovetter Markmode4sex2x01456y06605id5nameMoustaki Irinimode4sex1x0783y0228id6nameMrvar Andrejmode4sex2x0478y06301id7nameClustering with relational constraintmode3sex0x06841y03801
id15nameCambridge University Pressmode5sex0x05343y02382id16nameSpringermode5sex0x08846y0174]links[typearcsource1target10rel1weight1typearcsource2target10rel1weight1typearcsource3target10rel1weight1typearcsource1target7rel1weight1typearcsource3target7rel1weight1typearcsource4target8rel1weight1typearcsource4target14rel4weight1
typearcsource10target7rel2weight1typearcsource14target15rel5weight1typearcsource11target16rel5weight1
]
bibjson picture bibV Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON files anddisplaying a network with given nodesrsquo coordinates
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltinput type=rsquofilersquo accept=rsquoapplicationjsonrsquo onchange=rsquoopenFile(event)rsquogtltscriptgtfunction process(graph) set up the drawing areavar width = 500height = 500 s = graphattributesorg
var svg = d3select(body)append(svg)attr(width width)attr(height height)attr(xmlns httpwwww3org2000svg)
draw the linksvar link = svgselectAll(line)data(graphlinks)enter()append(line)style(stroke function(di) return((dtype==arc magenta blue)))attr(stroke-width 2)attr(x1 function(d) return(graphnodes[dsource-s]xwidth))attr(y1 function(d) return(graphnodes[dsource-s]yheight))attr(x2 function(d) return(graphnodes[dtarget-s]xwidth))attr(y2 function(d) return(graphnodes[dtarget-s]yheight))
draw the nodesvar node = svgselectAll(circle)data(graphnodes)enter()append(circle)attr(r 15)attr(cx function(di) return(dxwidth))attr(cy function(di) return(dyheight))attr(fill yellow)attr(stroke red)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
readingadapted from Matt West Reading Files Using The HTML5 FileReader API
var openFile = function(event) var input = eventtargetvar reader = new FileReader()readeronload = function()process(JSONparse(readerresult))
readerreadAsText(inputfiles[0])
ltscriptgtltbodygt
graphReadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON file from serveradapted from Ying Kit Yuen jQuery amp Javascript -ndash Read JSON files on server
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtlttitlegtLoad JSON file from serverlttitlegtlt-- httpeurekaykyueninfo20130925jquery-javascript-read-json-files-on-server --gtltscript src=httpajaxgoogleapiscomajaxlibsjquery1102jqueryminjsgtltscriptgtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltselect id=datagtltoption value=graphjsongtgraphjsonltoptiongtltoption value=classjsongtclassjsonltoptiongt
ltselectgtltbutton id=btngtReadltbuttongtltscriptgtfunction process(graph) set up the drawing area the body of function process is the same as in the previous exampleattr(stroke red)
$(btn)click(function()$getJSON($(data)val() function(json) process(json))
)ltscriptgtltbodygt
graphLoadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Network displayer graphXY
drawNetjs
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
graphXYgen
ltDOCTYPE htmlgtltmeta charset=utf-8gtltbodygtlt-- script src=graphAjsgtltscript --gtltscript src=graphBjsgtltscriptgtlt-- script src=classSjsgtltscript --gtltscript src=drawNetjsgtltscriptgtltscript src=d3d3jsgtltscriptgtltscriptgtvars = graphinfoorgwidth = graphstylecanvaswidthheight = graphstylecanvasheightvar lw = 1if ( typeof graphstyle == rsquoundefinedrsquo ampamp graphstyle) if ( typeof graphstylelink == rsquoundefinedrsquo ampamp graphstylelink )
if ( typeof graphstylelinkwidth == rsquoundefinedrsquo ampamp graphstylelinkwidth ) var lw = graphstylelinkwidth
if(graphnetJSON==rsquogeneralrsquo) var OK = drawNet(graphpersonsdatagraphfrienddata)
else var OK = drawNet(graphnodesgraphlinks)
ltscriptgtltbodygt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Saving SVG pictureS Murray Interactive Data Visualization for the Web p 235
In Google Chrome we draw a picture and open the Developer ToolsIn the Elements we identify the SVG subobject select it copy it intosome text editor and save with extension svg
To enhance the picture or to transform it to other picture formats we
process it using some vector graphics editor
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
To do
bull displayer templates can be based on GUI
bull for a description of multirelational networks we use the rel
attribute in the general version they can be treated asseparate sets of links
bull properties are considered as attributes in the general versionthey can be represented as special objects vector partitionpermutation and cluster
bull use temporal quantities for describing temporal networks
bull extend the list of info-attributes attributes type (simpletemporal) twoModeOrg nStrong nRelations planar
bull icons can be used for visualization of nodes Font AwesomeMaterial Icons tests
bull links can be visually represented in many different ways that canbe described in style
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
to do
bull style can be attached as an attribute also to an element(node link) thus changing the default settings
bull add the visualization of arcs with arrows Directed Graph EditorD3 Tips and Tricks
bull to be included in netD3js vzmetno risanje Force in urejanjeSpringy Matrix with permutations
bull can some attributes be renamed from tail nodeA rarrsource to head nodeB rarr target may be the simplestsolution is a replace in some text editor
bull implement saving of the obtained SVG picture to a file ExportSVG with Style d3jsSVG Export demo
bull include in netJSON elements useful in some applications suchas hooks or inout-ports background image etc
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Sources
Ideas for visualization styles can be found in GoJS - InteractiveDiagrams for JavaScript and HTML Visjs in VisualComplexity
GoJS mdashSankey Diagram Family Tree Logic Circuit DynamicPortsVega - a visualization grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References I
Vladimir Batagelj Complex Networks Visualization of RA Meyersed Encyclopedia of Complexity and Systems Science Springer 20091253-1268
Vladimir Batagelj Andrej Mrvar Pajek manual
Jernej Bodlaj Network Data File Formats in Reda Alhajj Jon Rokne(eds) Encyclopedia of Social Network Analysis and Mining SpringerNew York 2014 p 1076-1091
Richard Brath David Jonker Graph Analysis and VisualizationDiscovering Business Opportunity in Linked Data John Wiley amp SonsIndianapolis Indiana 2015
Emden Gansner Eleftherios Koutsofios Stephen North Drawinggraphs with dot January 26 2006
Scott Murray Interactive Data Visualization for the Web OrsquoReillySebastopol 2013
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References II
Wouter De Nooy Andrej Mrvar Vladimir Batagelj Exploratory SocialNetwork Analysis with Pajek Revised and Expanded Second EditionStructural Analysis in the Social Sciences Cambridge UniversityPress September 2011
Matthew Roughan Jonathan Tuke Unravelling Graph-Exchange FileFormats arXiv150302781 submitted on 10 Mar 2015
Wikipedia JSON
Leland Wilkinson The Grammar of Graphics Springer-Verlag NewYork 2005
V Batagelj JSON amp D3js
- Introduction
- Description of networks
- JSON
- JSON and D3js
- JSON and R
- Displayer
- To do
- References
-
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
SVG
ltxml version=10 encoding=UTF-8 standalone=yesgtltsvg width=500 height=500 xmlns=httpwwww3org2000svggtltline stroke-width=2 x1=450 y1=250 x2=250 y2=450 style=stroke bluegtltlinegtltline stroke-width=2 x1=250 y1=450 x2=50 y2=250 style=stroke bluegtltlinegtltline stroke-width=2 x1=50 y1=250 x2=250 y2=50 style=stroke bluegtltlinegtltline stroke-width=2 x1=250 y1=450 x2=250 y2=50 style=stroke bluegtltlinegtltcircle r=10 cx=450 cy=250 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=250 cy=450 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=50 cy=250 fill=yellow stroke=redgtltcirclegtltcircle r=10 cx=250 cy=50 fill=yellow stroke=redgtltcirclegtltsvggt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Networks in JSON format basic netJSONclassjson
netJSON basicinfo network class org 1 nNodes 15
nArcs 30 nEdges 13 nWeak 1title borrowing study materialsmeta date October 2015 author V Batagelj
nodes [
id 1 short m02 x 01857 y 02781 size 1 id 2 short m03 x 05482 y 06169 size 1 id 3 short w07 x 02219 y 04526 size 2 id 4 short w09 x 08078 y 03223 size 2
id 14 short m89 x 04000 y 08469 size 1 id 15 short m96 x 03482 y 01778 size 1
]links [
type arc source 6 target 15 weight 1 type arc source 2 target 7 weight 1
type arc source15 target 3 weight 1 type edge source 6 target 12 weight 1
type edge source 4 target 12 weight 1 type edge source 6 target 13 weight 1
]
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON and RTransforming Pajek NET and CLU files in to JSON
nodes[nameMyrielgroup1nameNapoleongroup1 nameBrujongroup4nameMmeHucheloupgroup8]
links[source1target0value1source2target0value8 source76target48value1source76target58value1]
setwd(CUsersBatageljtestpython2012amazon)library(rjson)
net2json lt- function(netFcluFjsonF)net lt- file(netFr) clu lt- file(cluFr)b lt- unlist(strsplit(readLines(netn=1) ))n lt- asinteger(b[length(b)])N lt- readLines(netn=n) nam lt- character(n)for(i in 1n) nam[i] lt- unlist(strsplit(N[i]rsquorsquo))[2]skip lt- readLines(clun=1) C lt- asinteger(readLines(clun=n))skip lt- readLines(netn=1) L lt- readLines(netn=-1)M lt- matrix(asinteger(unlist(strsplit(sub(rsquo^s+rsquorsquorsquoL)rsquos+rsquo)))ncol=3byrow=TRUE)nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(name=nam[i]group=C[i])m lt- nrow(M) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(source=M[i1]-1target=M[i2]-1value=M[i3])data lt- list(nodes=nodslinks=lnks)jstr lt- toJSON(data)json lt- file(jsonFw) cat(jstrfile=json)close(json) close(net) close(clu)
net2json(islandsnetislandscluislandsjson)
islands island 1 island 4 force islands
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
CSV2JSONR
transforming CSV files to JSON file by Vladimir Batagelj June 2016setwd(CUsersbatageljworkPythongraphSVGEUSN)library(rjson)colC lt- c(rep(character4)rep(numeric5)) nas lt- c(NANaN)nodes lt- readcsv2(bibNodesXYcsvencoding=rsquoUTF-8rsquocolClasses=colCnastrings=nas)M lt- factor(nodes$mode) mod lt- levels(M) M lt- asnumeric(M)S lt- factor(nodes$sex) sx lt- levels(S) S lt- asnumeric(S) S[isna(S)] lt- 0links lt- readcsv2(bibLinkscsvencoding=rsquoUTF-8rsquocolClasses=character)F lt- asnumeric(factor(links$fromlevels=nodes$nameordered=TRUE))T lt- asnumeric(factor(links$tolevels=nodes$nameordered=TRUE))R lt- factor(links$relation) rel lt-levels(R) R lt- asnumeric(R)n lt- nrow(nodes) nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(id=iname=nodes$name[i]mode=M[i]
sex=S[i]x=asnumeric(nodes$x[i])1000y=asnumeric(nodes$y[i])1000)m lt- nrow(links) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(type=arcsource=F[i]target=T[i]
rel=R[i]weight=1)meta lt- list(date=June 112016author=Vladimir Batagelj)leg lt- list(mode=modsex=sxrel=rel)inf lt- list(network=biborg=1nNodes=nnArcs=mtitle=Example for EUSNrsquo16legend=legmeta=meta)
data lt- list(netJSON=basicinfo=infnodes=nodslinks=lnks)json lt- file(bibjsonw) cat(toJSON(data)file=json) close(json)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibjson
netJSONbasicinfonetworkbiborg1nNodes16nArcs19titleExample for EUSNrsquo16legendmode[bookjournalpaperpersonpublisherseries]sex[fm]rel[authorOfcitescontainedIneditorOfpublishedBy]
metadateJune 112016authorVladimir Batageljnodes[id1nameBatagelj Vladimirmode4sex2x08091y06537id2nameDoreian Patrickmode4sex2x03585y06791id3nameFerligoj Anuu0161kamode4sex1x06195y06807id4nameGranovetter Markmode4sex2x01456y06605id5nameMoustaki Irinimode4sex1x0783y0228id6nameMrvar Andrejmode4sex2x0478y06301id7nameClustering with relational constraintmode3sex0x06841y03801
id15nameCambridge University Pressmode5sex0x05343y02382id16nameSpringermode5sex0x08846y0174]links[typearcsource1target10rel1weight1typearcsource2target10rel1weight1typearcsource3target10rel1weight1typearcsource1target7rel1weight1typearcsource3target7rel1weight1typearcsource4target8rel1weight1typearcsource4target14rel4weight1
typearcsource10target7rel2weight1typearcsource14target15rel5weight1typearcsource11target16rel5weight1
]
bibjson picture bibV Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON files anddisplaying a network with given nodesrsquo coordinates
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltinput type=rsquofilersquo accept=rsquoapplicationjsonrsquo onchange=rsquoopenFile(event)rsquogtltscriptgtfunction process(graph) set up the drawing areavar width = 500height = 500 s = graphattributesorg
var svg = d3select(body)append(svg)attr(width width)attr(height height)attr(xmlns httpwwww3org2000svg)
draw the linksvar link = svgselectAll(line)data(graphlinks)enter()append(line)style(stroke function(di) return((dtype==arc magenta blue)))attr(stroke-width 2)attr(x1 function(d) return(graphnodes[dsource-s]xwidth))attr(y1 function(d) return(graphnodes[dsource-s]yheight))attr(x2 function(d) return(graphnodes[dtarget-s]xwidth))attr(y2 function(d) return(graphnodes[dtarget-s]yheight))
draw the nodesvar node = svgselectAll(circle)data(graphnodes)enter()append(circle)attr(r 15)attr(cx function(di) return(dxwidth))attr(cy function(di) return(dyheight))attr(fill yellow)attr(stroke red)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
readingadapted from Matt West Reading Files Using The HTML5 FileReader API
var openFile = function(event) var input = eventtargetvar reader = new FileReader()readeronload = function()process(JSONparse(readerresult))
readerreadAsText(inputfiles[0])
ltscriptgtltbodygt
graphReadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON file from serveradapted from Ying Kit Yuen jQuery amp Javascript -ndash Read JSON files on server
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtlttitlegtLoad JSON file from serverlttitlegtlt-- httpeurekaykyueninfo20130925jquery-javascript-read-json-files-on-server --gtltscript src=httpajaxgoogleapiscomajaxlibsjquery1102jqueryminjsgtltscriptgtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltselect id=datagtltoption value=graphjsongtgraphjsonltoptiongtltoption value=classjsongtclassjsonltoptiongt
ltselectgtltbutton id=btngtReadltbuttongtltscriptgtfunction process(graph) set up the drawing area the body of function process is the same as in the previous exampleattr(stroke red)
$(btn)click(function()$getJSON($(data)val() function(json) process(json))
)ltscriptgtltbodygt
graphLoadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Network displayer graphXY
drawNetjs
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
graphXYgen
ltDOCTYPE htmlgtltmeta charset=utf-8gtltbodygtlt-- script src=graphAjsgtltscript --gtltscript src=graphBjsgtltscriptgtlt-- script src=classSjsgtltscript --gtltscript src=drawNetjsgtltscriptgtltscript src=d3d3jsgtltscriptgtltscriptgtvars = graphinfoorgwidth = graphstylecanvaswidthheight = graphstylecanvasheightvar lw = 1if ( typeof graphstyle == rsquoundefinedrsquo ampamp graphstyle) if ( typeof graphstylelink == rsquoundefinedrsquo ampamp graphstylelink )
if ( typeof graphstylelinkwidth == rsquoundefinedrsquo ampamp graphstylelinkwidth ) var lw = graphstylelinkwidth
if(graphnetJSON==rsquogeneralrsquo) var OK = drawNet(graphpersonsdatagraphfrienddata)
else var OK = drawNet(graphnodesgraphlinks)
ltscriptgtltbodygt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Saving SVG pictureS Murray Interactive Data Visualization for the Web p 235
In Google Chrome we draw a picture and open the Developer ToolsIn the Elements we identify the SVG subobject select it copy it intosome text editor and save with extension svg
To enhance the picture or to transform it to other picture formats we
process it using some vector graphics editor
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
To do
bull displayer templates can be based on GUI
bull for a description of multirelational networks we use the rel
attribute in the general version they can be treated asseparate sets of links
bull properties are considered as attributes in the general versionthey can be represented as special objects vector partitionpermutation and cluster
bull use temporal quantities for describing temporal networks
bull extend the list of info-attributes attributes type (simpletemporal) twoModeOrg nStrong nRelations planar
bull icons can be used for visualization of nodes Font AwesomeMaterial Icons tests
bull links can be visually represented in many different ways that canbe described in style
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
to do
bull style can be attached as an attribute also to an element(node link) thus changing the default settings
bull add the visualization of arcs with arrows Directed Graph EditorD3 Tips and Tricks
bull to be included in netD3js vzmetno risanje Force in urejanjeSpringy Matrix with permutations
bull can some attributes be renamed from tail nodeA rarrsource to head nodeB rarr target may be the simplestsolution is a replace in some text editor
bull implement saving of the obtained SVG picture to a file ExportSVG with Style d3jsSVG Export demo
bull include in netJSON elements useful in some applications suchas hooks or inout-ports background image etc
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Sources
Ideas for visualization styles can be found in GoJS - InteractiveDiagrams for JavaScript and HTML Visjs in VisualComplexity
GoJS mdashSankey Diagram Family Tree Logic Circuit DynamicPortsVega - a visualization grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References I
Vladimir Batagelj Complex Networks Visualization of RA Meyersed Encyclopedia of Complexity and Systems Science Springer 20091253-1268
Vladimir Batagelj Andrej Mrvar Pajek manual
Jernej Bodlaj Network Data File Formats in Reda Alhajj Jon Rokne(eds) Encyclopedia of Social Network Analysis and Mining SpringerNew York 2014 p 1076-1091
Richard Brath David Jonker Graph Analysis and VisualizationDiscovering Business Opportunity in Linked Data John Wiley amp SonsIndianapolis Indiana 2015
Emden Gansner Eleftherios Koutsofios Stephen North Drawinggraphs with dot January 26 2006
Scott Murray Interactive Data Visualization for the Web OrsquoReillySebastopol 2013
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References II
Wouter De Nooy Andrej Mrvar Vladimir Batagelj Exploratory SocialNetwork Analysis with Pajek Revised and Expanded Second EditionStructural Analysis in the Social Sciences Cambridge UniversityPress September 2011
Matthew Roughan Jonathan Tuke Unravelling Graph-Exchange FileFormats arXiv150302781 submitted on 10 Mar 2015
Wikipedia JSON
Leland Wilkinson The Grammar of Graphics Springer-Verlag NewYork 2005
V Batagelj JSON amp D3js
- Introduction
- Description of networks
- JSON
- JSON and D3js
- JSON and R
- Displayer
- To do
- References
-
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Networks in JSON format basic netJSONclassjson
netJSON basicinfo network class org 1 nNodes 15
nArcs 30 nEdges 13 nWeak 1title borrowing study materialsmeta date October 2015 author V Batagelj
nodes [
id 1 short m02 x 01857 y 02781 size 1 id 2 short m03 x 05482 y 06169 size 1 id 3 short w07 x 02219 y 04526 size 2 id 4 short w09 x 08078 y 03223 size 2
id 14 short m89 x 04000 y 08469 size 1 id 15 short m96 x 03482 y 01778 size 1
]links [
type arc source 6 target 15 weight 1 type arc source 2 target 7 weight 1
type arc source15 target 3 weight 1 type edge source 6 target 12 weight 1
type edge source 4 target 12 weight 1 type edge source 6 target 13 weight 1
]
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON and RTransforming Pajek NET and CLU files in to JSON
nodes[nameMyrielgroup1nameNapoleongroup1 nameBrujongroup4nameMmeHucheloupgroup8]
links[source1target0value1source2target0value8 source76target48value1source76target58value1]
setwd(CUsersBatageljtestpython2012amazon)library(rjson)
net2json lt- function(netFcluFjsonF)net lt- file(netFr) clu lt- file(cluFr)b lt- unlist(strsplit(readLines(netn=1) ))n lt- asinteger(b[length(b)])N lt- readLines(netn=n) nam lt- character(n)for(i in 1n) nam[i] lt- unlist(strsplit(N[i]rsquorsquo))[2]skip lt- readLines(clun=1) C lt- asinteger(readLines(clun=n))skip lt- readLines(netn=1) L lt- readLines(netn=-1)M lt- matrix(asinteger(unlist(strsplit(sub(rsquo^s+rsquorsquorsquoL)rsquos+rsquo)))ncol=3byrow=TRUE)nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(name=nam[i]group=C[i])m lt- nrow(M) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(source=M[i1]-1target=M[i2]-1value=M[i3])data lt- list(nodes=nodslinks=lnks)jstr lt- toJSON(data)json lt- file(jsonFw) cat(jstrfile=json)close(json) close(net) close(clu)
net2json(islandsnetislandscluislandsjson)
islands island 1 island 4 force islands
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
CSV2JSONR
transforming CSV files to JSON file by Vladimir Batagelj June 2016setwd(CUsersbatageljworkPythongraphSVGEUSN)library(rjson)colC lt- c(rep(character4)rep(numeric5)) nas lt- c(NANaN)nodes lt- readcsv2(bibNodesXYcsvencoding=rsquoUTF-8rsquocolClasses=colCnastrings=nas)M lt- factor(nodes$mode) mod lt- levels(M) M lt- asnumeric(M)S lt- factor(nodes$sex) sx lt- levels(S) S lt- asnumeric(S) S[isna(S)] lt- 0links lt- readcsv2(bibLinkscsvencoding=rsquoUTF-8rsquocolClasses=character)F lt- asnumeric(factor(links$fromlevels=nodes$nameordered=TRUE))T lt- asnumeric(factor(links$tolevels=nodes$nameordered=TRUE))R lt- factor(links$relation) rel lt-levels(R) R lt- asnumeric(R)n lt- nrow(nodes) nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(id=iname=nodes$name[i]mode=M[i]
sex=S[i]x=asnumeric(nodes$x[i])1000y=asnumeric(nodes$y[i])1000)m lt- nrow(links) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(type=arcsource=F[i]target=T[i]
rel=R[i]weight=1)meta lt- list(date=June 112016author=Vladimir Batagelj)leg lt- list(mode=modsex=sxrel=rel)inf lt- list(network=biborg=1nNodes=nnArcs=mtitle=Example for EUSNrsquo16legend=legmeta=meta)
data lt- list(netJSON=basicinfo=infnodes=nodslinks=lnks)json lt- file(bibjsonw) cat(toJSON(data)file=json) close(json)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibjson
netJSONbasicinfonetworkbiborg1nNodes16nArcs19titleExample for EUSNrsquo16legendmode[bookjournalpaperpersonpublisherseries]sex[fm]rel[authorOfcitescontainedIneditorOfpublishedBy]
metadateJune 112016authorVladimir Batageljnodes[id1nameBatagelj Vladimirmode4sex2x08091y06537id2nameDoreian Patrickmode4sex2x03585y06791id3nameFerligoj Anuu0161kamode4sex1x06195y06807id4nameGranovetter Markmode4sex2x01456y06605id5nameMoustaki Irinimode4sex1x0783y0228id6nameMrvar Andrejmode4sex2x0478y06301id7nameClustering with relational constraintmode3sex0x06841y03801
id15nameCambridge University Pressmode5sex0x05343y02382id16nameSpringermode5sex0x08846y0174]links[typearcsource1target10rel1weight1typearcsource2target10rel1weight1typearcsource3target10rel1weight1typearcsource1target7rel1weight1typearcsource3target7rel1weight1typearcsource4target8rel1weight1typearcsource4target14rel4weight1
typearcsource10target7rel2weight1typearcsource14target15rel5weight1typearcsource11target16rel5weight1
]
bibjson picture bibV Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON files anddisplaying a network with given nodesrsquo coordinates
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltinput type=rsquofilersquo accept=rsquoapplicationjsonrsquo onchange=rsquoopenFile(event)rsquogtltscriptgtfunction process(graph) set up the drawing areavar width = 500height = 500 s = graphattributesorg
var svg = d3select(body)append(svg)attr(width width)attr(height height)attr(xmlns httpwwww3org2000svg)
draw the linksvar link = svgselectAll(line)data(graphlinks)enter()append(line)style(stroke function(di) return((dtype==arc magenta blue)))attr(stroke-width 2)attr(x1 function(d) return(graphnodes[dsource-s]xwidth))attr(y1 function(d) return(graphnodes[dsource-s]yheight))attr(x2 function(d) return(graphnodes[dtarget-s]xwidth))attr(y2 function(d) return(graphnodes[dtarget-s]yheight))
draw the nodesvar node = svgselectAll(circle)data(graphnodes)enter()append(circle)attr(r 15)attr(cx function(di) return(dxwidth))attr(cy function(di) return(dyheight))attr(fill yellow)attr(stroke red)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
readingadapted from Matt West Reading Files Using The HTML5 FileReader API
var openFile = function(event) var input = eventtargetvar reader = new FileReader()readeronload = function()process(JSONparse(readerresult))
readerreadAsText(inputfiles[0])
ltscriptgtltbodygt
graphReadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON file from serveradapted from Ying Kit Yuen jQuery amp Javascript -ndash Read JSON files on server
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtlttitlegtLoad JSON file from serverlttitlegtlt-- httpeurekaykyueninfo20130925jquery-javascript-read-json-files-on-server --gtltscript src=httpajaxgoogleapiscomajaxlibsjquery1102jqueryminjsgtltscriptgtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltselect id=datagtltoption value=graphjsongtgraphjsonltoptiongtltoption value=classjsongtclassjsonltoptiongt
ltselectgtltbutton id=btngtReadltbuttongtltscriptgtfunction process(graph) set up the drawing area the body of function process is the same as in the previous exampleattr(stroke red)
$(btn)click(function()$getJSON($(data)val() function(json) process(json))
)ltscriptgtltbodygt
graphLoadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Network displayer graphXY
drawNetjs
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
graphXYgen
ltDOCTYPE htmlgtltmeta charset=utf-8gtltbodygtlt-- script src=graphAjsgtltscript --gtltscript src=graphBjsgtltscriptgtlt-- script src=classSjsgtltscript --gtltscript src=drawNetjsgtltscriptgtltscript src=d3d3jsgtltscriptgtltscriptgtvars = graphinfoorgwidth = graphstylecanvaswidthheight = graphstylecanvasheightvar lw = 1if ( typeof graphstyle == rsquoundefinedrsquo ampamp graphstyle) if ( typeof graphstylelink == rsquoundefinedrsquo ampamp graphstylelink )
if ( typeof graphstylelinkwidth == rsquoundefinedrsquo ampamp graphstylelinkwidth ) var lw = graphstylelinkwidth
if(graphnetJSON==rsquogeneralrsquo) var OK = drawNet(graphpersonsdatagraphfrienddata)
else var OK = drawNet(graphnodesgraphlinks)
ltscriptgtltbodygt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Saving SVG pictureS Murray Interactive Data Visualization for the Web p 235
In Google Chrome we draw a picture and open the Developer ToolsIn the Elements we identify the SVG subobject select it copy it intosome text editor and save with extension svg
To enhance the picture or to transform it to other picture formats we
process it using some vector graphics editor
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
To do
bull displayer templates can be based on GUI
bull for a description of multirelational networks we use the rel
attribute in the general version they can be treated asseparate sets of links
bull properties are considered as attributes in the general versionthey can be represented as special objects vector partitionpermutation and cluster
bull use temporal quantities for describing temporal networks
bull extend the list of info-attributes attributes type (simpletemporal) twoModeOrg nStrong nRelations planar
bull icons can be used for visualization of nodes Font AwesomeMaterial Icons tests
bull links can be visually represented in many different ways that canbe described in style
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
to do
bull style can be attached as an attribute also to an element(node link) thus changing the default settings
bull add the visualization of arcs with arrows Directed Graph EditorD3 Tips and Tricks
bull to be included in netD3js vzmetno risanje Force in urejanjeSpringy Matrix with permutations
bull can some attributes be renamed from tail nodeA rarrsource to head nodeB rarr target may be the simplestsolution is a replace in some text editor
bull implement saving of the obtained SVG picture to a file ExportSVG with Style d3jsSVG Export demo
bull include in netJSON elements useful in some applications suchas hooks or inout-ports background image etc
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Sources
Ideas for visualization styles can be found in GoJS - InteractiveDiagrams for JavaScript and HTML Visjs in VisualComplexity
GoJS mdashSankey Diagram Family Tree Logic Circuit DynamicPortsVega - a visualization grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References I
Vladimir Batagelj Complex Networks Visualization of RA Meyersed Encyclopedia of Complexity and Systems Science Springer 20091253-1268
Vladimir Batagelj Andrej Mrvar Pajek manual
Jernej Bodlaj Network Data File Formats in Reda Alhajj Jon Rokne(eds) Encyclopedia of Social Network Analysis and Mining SpringerNew York 2014 p 1076-1091
Richard Brath David Jonker Graph Analysis and VisualizationDiscovering Business Opportunity in Linked Data John Wiley amp SonsIndianapolis Indiana 2015
Emden Gansner Eleftherios Koutsofios Stephen North Drawinggraphs with dot January 26 2006
Scott Murray Interactive Data Visualization for the Web OrsquoReillySebastopol 2013
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References II
Wouter De Nooy Andrej Mrvar Vladimir Batagelj Exploratory SocialNetwork Analysis with Pajek Revised and Expanded Second EditionStructural Analysis in the Social Sciences Cambridge UniversityPress September 2011
Matthew Roughan Jonathan Tuke Unravelling Graph-Exchange FileFormats arXiv150302781 submitted on 10 Mar 2015
Wikipedia JSON
Leland Wilkinson The Grammar of Graphics Springer-Verlag NewYork 2005
V Batagelj JSON amp D3js
- Introduction
- Description of networks
- JSON
- JSON and D3js
- JSON and R
- Displayer
- To do
- References
-
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
JSON and RTransforming Pajek NET and CLU files in to JSON
nodes[nameMyrielgroup1nameNapoleongroup1 nameBrujongroup4nameMmeHucheloupgroup8]
links[source1target0value1source2target0value8 source76target48value1source76target58value1]
setwd(CUsersBatageljtestpython2012amazon)library(rjson)
net2json lt- function(netFcluFjsonF)net lt- file(netFr) clu lt- file(cluFr)b lt- unlist(strsplit(readLines(netn=1) ))n lt- asinteger(b[length(b)])N lt- readLines(netn=n) nam lt- character(n)for(i in 1n) nam[i] lt- unlist(strsplit(N[i]rsquorsquo))[2]skip lt- readLines(clun=1) C lt- asinteger(readLines(clun=n))skip lt- readLines(netn=1) L lt- readLines(netn=-1)M lt- matrix(asinteger(unlist(strsplit(sub(rsquo^s+rsquorsquorsquoL)rsquos+rsquo)))ncol=3byrow=TRUE)nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(name=nam[i]group=C[i])m lt- nrow(M) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(source=M[i1]-1target=M[i2]-1value=M[i3])data lt- list(nodes=nodslinks=lnks)jstr lt- toJSON(data)json lt- file(jsonFw) cat(jstrfile=json)close(json) close(net) close(clu)
net2json(islandsnetislandscluislandsjson)
islands island 1 island 4 force islands
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
CSV2JSONR
transforming CSV files to JSON file by Vladimir Batagelj June 2016setwd(CUsersbatageljworkPythongraphSVGEUSN)library(rjson)colC lt- c(rep(character4)rep(numeric5)) nas lt- c(NANaN)nodes lt- readcsv2(bibNodesXYcsvencoding=rsquoUTF-8rsquocolClasses=colCnastrings=nas)M lt- factor(nodes$mode) mod lt- levels(M) M lt- asnumeric(M)S lt- factor(nodes$sex) sx lt- levels(S) S lt- asnumeric(S) S[isna(S)] lt- 0links lt- readcsv2(bibLinkscsvencoding=rsquoUTF-8rsquocolClasses=character)F lt- asnumeric(factor(links$fromlevels=nodes$nameordered=TRUE))T lt- asnumeric(factor(links$tolevels=nodes$nameordered=TRUE))R lt- factor(links$relation) rel lt-levels(R) R lt- asnumeric(R)n lt- nrow(nodes) nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(id=iname=nodes$name[i]mode=M[i]
sex=S[i]x=asnumeric(nodes$x[i])1000y=asnumeric(nodes$y[i])1000)m lt- nrow(links) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(type=arcsource=F[i]target=T[i]
rel=R[i]weight=1)meta lt- list(date=June 112016author=Vladimir Batagelj)leg lt- list(mode=modsex=sxrel=rel)inf lt- list(network=biborg=1nNodes=nnArcs=mtitle=Example for EUSNrsquo16legend=legmeta=meta)
data lt- list(netJSON=basicinfo=infnodes=nodslinks=lnks)json lt- file(bibjsonw) cat(toJSON(data)file=json) close(json)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibjson
netJSONbasicinfonetworkbiborg1nNodes16nArcs19titleExample for EUSNrsquo16legendmode[bookjournalpaperpersonpublisherseries]sex[fm]rel[authorOfcitescontainedIneditorOfpublishedBy]
metadateJune 112016authorVladimir Batageljnodes[id1nameBatagelj Vladimirmode4sex2x08091y06537id2nameDoreian Patrickmode4sex2x03585y06791id3nameFerligoj Anuu0161kamode4sex1x06195y06807id4nameGranovetter Markmode4sex2x01456y06605id5nameMoustaki Irinimode4sex1x0783y0228id6nameMrvar Andrejmode4sex2x0478y06301id7nameClustering with relational constraintmode3sex0x06841y03801
id15nameCambridge University Pressmode5sex0x05343y02382id16nameSpringermode5sex0x08846y0174]links[typearcsource1target10rel1weight1typearcsource2target10rel1weight1typearcsource3target10rel1weight1typearcsource1target7rel1weight1typearcsource3target7rel1weight1typearcsource4target8rel1weight1typearcsource4target14rel4weight1
typearcsource10target7rel2weight1typearcsource14target15rel5weight1typearcsource11target16rel5weight1
]
bibjson picture bibV Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON files anddisplaying a network with given nodesrsquo coordinates
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltinput type=rsquofilersquo accept=rsquoapplicationjsonrsquo onchange=rsquoopenFile(event)rsquogtltscriptgtfunction process(graph) set up the drawing areavar width = 500height = 500 s = graphattributesorg
var svg = d3select(body)append(svg)attr(width width)attr(height height)attr(xmlns httpwwww3org2000svg)
draw the linksvar link = svgselectAll(line)data(graphlinks)enter()append(line)style(stroke function(di) return((dtype==arc magenta blue)))attr(stroke-width 2)attr(x1 function(d) return(graphnodes[dsource-s]xwidth))attr(y1 function(d) return(graphnodes[dsource-s]yheight))attr(x2 function(d) return(graphnodes[dtarget-s]xwidth))attr(y2 function(d) return(graphnodes[dtarget-s]yheight))
draw the nodesvar node = svgselectAll(circle)data(graphnodes)enter()append(circle)attr(r 15)attr(cx function(di) return(dxwidth))attr(cy function(di) return(dyheight))attr(fill yellow)attr(stroke red)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
readingadapted from Matt West Reading Files Using The HTML5 FileReader API
var openFile = function(event) var input = eventtargetvar reader = new FileReader()readeronload = function()process(JSONparse(readerresult))
readerreadAsText(inputfiles[0])
ltscriptgtltbodygt
graphReadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON file from serveradapted from Ying Kit Yuen jQuery amp Javascript -ndash Read JSON files on server
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtlttitlegtLoad JSON file from serverlttitlegtlt-- httpeurekaykyueninfo20130925jquery-javascript-read-json-files-on-server --gtltscript src=httpajaxgoogleapiscomajaxlibsjquery1102jqueryminjsgtltscriptgtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltselect id=datagtltoption value=graphjsongtgraphjsonltoptiongtltoption value=classjsongtclassjsonltoptiongt
ltselectgtltbutton id=btngtReadltbuttongtltscriptgtfunction process(graph) set up the drawing area the body of function process is the same as in the previous exampleattr(stroke red)
$(btn)click(function()$getJSON($(data)val() function(json) process(json))
)ltscriptgtltbodygt
graphLoadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Network displayer graphXY
drawNetjs
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
graphXYgen
ltDOCTYPE htmlgtltmeta charset=utf-8gtltbodygtlt-- script src=graphAjsgtltscript --gtltscript src=graphBjsgtltscriptgtlt-- script src=classSjsgtltscript --gtltscript src=drawNetjsgtltscriptgtltscript src=d3d3jsgtltscriptgtltscriptgtvars = graphinfoorgwidth = graphstylecanvaswidthheight = graphstylecanvasheightvar lw = 1if ( typeof graphstyle == rsquoundefinedrsquo ampamp graphstyle) if ( typeof graphstylelink == rsquoundefinedrsquo ampamp graphstylelink )
if ( typeof graphstylelinkwidth == rsquoundefinedrsquo ampamp graphstylelinkwidth ) var lw = graphstylelinkwidth
if(graphnetJSON==rsquogeneralrsquo) var OK = drawNet(graphpersonsdatagraphfrienddata)
else var OK = drawNet(graphnodesgraphlinks)
ltscriptgtltbodygt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Saving SVG pictureS Murray Interactive Data Visualization for the Web p 235
In Google Chrome we draw a picture and open the Developer ToolsIn the Elements we identify the SVG subobject select it copy it intosome text editor and save with extension svg
To enhance the picture or to transform it to other picture formats we
process it using some vector graphics editor
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
To do
bull displayer templates can be based on GUI
bull for a description of multirelational networks we use the rel
attribute in the general version they can be treated asseparate sets of links
bull properties are considered as attributes in the general versionthey can be represented as special objects vector partitionpermutation and cluster
bull use temporal quantities for describing temporal networks
bull extend the list of info-attributes attributes type (simpletemporal) twoModeOrg nStrong nRelations planar
bull icons can be used for visualization of nodes Font AwesomeMaterial Icons tests
bull links can be visually represented in many different ways that canbe described in style
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
to do
bull style can be attached as an attribute also to an element(node link) thus changing the default settings
bull add the visualization of arcs with arrows Directed Graph EditorD3 Tips and Tricks
bull to be included in netD3js vzmetno risanje Force in urejanjeSpringy Matrix with permutations
bull can some attributes be renamed from tail nodeA rarrsource to head nodeB rarr target may be the simplestsolution is a replace in some text editor
bull implement saving of the obtained SVG picture to a file ExportSVG with Style d3jsSVG Export demo
bull include in netJSON elements useful in some applications suchas hooks or inout-ports background image etc
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Sources
Ideas for visualization styles can be found in GoJS - InteractiveDiagrams for JavaScript and HTML Visjs in VisualComplexity
GoJS mdashSankey Diagram Family Tree Logic Circuit DynamicPortsVega - a visualization grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References I
Vladimir Batagelj Complex Networks Visualization of RA Meyersed Encyclopedia of Complexity and Systems Science Springer 20091253-1268
Vladimir Batagelj Andrej Mrvar Pajek manual
Jernej Bodlaj Network Data File Formats in Reda Alhajj Jon Rokne(eds) Encyclopedia of Social Network Analysis and Mining SpringerNew York 2014 p 1076-1091
Richard Brath David Jonker Graph Analysis and VisualizationDiscovering Business Opportunity in Linked Data John Wiley amp SonsIndianapolis Indiana 2015
Emden Gansner Eleftherios Koutsofios Stephen North Drawinggraphs with dot January 26 2006
Scott Murray Interactive Data Visualization for the Web OrsquoReillySebastopol 2013
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References II
Wouter De Nooy Andrej Mrvar Vladimir Batagelj Exploratory SocialNetwork Analysis with Pajek Revised and Expanded Second EditionStructural Analysis in the Social Sciences Cambridge UniversityPress September 2011
Matthew Roughan Jonathan Tuke Unravelling Graph-Exchange FileFormats arXiv150302781 submitted on 10 Mar 2015
Wikipedia JSON
Leland Wilkinson The Grammar of Graphics Springer-Verlag NewYork 2005
V Batagelj JSON amp D3js
- Introduction
- Description of networks
- JSON
- JSON and D3js
- JSON and R
- Displayer
- To do
- References
-
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
CSV2JSONR
transforming CSV files to JSON file by Vladimir Batagelj June 2016setwd(CUsersbatageljworkPythongraphSVGEUSN)library(rjson)colC lt- c(rep(character4)rep(numeric5)) nas lt- c(NANaN)nodes lt- readcsv2(bibNodesXYcsvencoding=rsquoUTF-8rsquocolClasses=colCnastrings=nas)M lt- factor(nodes$mode) mod lt- levels(M) M lt- asnumeric(M)S lt- factor(nodes$sex) sx lt- levels(S) S lt- asnumeric(S) S[isna(S)] lt- 0links lt- readcsv2(bibLinkscsvencoding=rsquoUTF-8rsquocolClasses=character)F lt- asnumeric(factor(links$fromlevels=nodes$nameordered=TRUE))T lt- asnumeric(factor(links$tolevels=nodes$nameordered=TRUE))R lt- factor(links$relation) rel lt-levels(R) R lt- asnumeric(R)n lt- nrow(nodes) nods lt- vector(rsquolistrsquon)for(i in 1n) nods[[i]] lt- list(id=iname=nodes$name[i]mode=M[i]
sex=S[i]x=asnumeric(nodes$x[i])1000y=asnumeric(nodes$y[i])1000)m lt- nrow(links) lnks lt- vector(rsquolistrsquom)for(i in 1m) lnks[[i]] lt- list(type=arcsource=F[i]target=T[i]
rel=R[i]weight=1)meta lt- list(date=June 112016author=Vladimir Batagelj)leg lt- list(mode=modsex=sxrel=rel)inf lt- list(network=biborg=1nNodes=nnArcs=mtitle=Example for EUSNrsquo16legend=legmeta=meta)
data lt- list(netJSON=basicinfo=infnodes=nodslinks=lnks)json lt- file(bibjsonw) cat(toJSON(data)file=json) close(json)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibjson
netJSONbasicinfonetworkbiborg1nNodes16nArcs19titleExample for EUSNrsquo16legendmode[bookjournalpaperpersonpublisherseries]sex[fm]rel[authorOfcitescontainedIneditorOfpublishedBy]
metadateJune 112016authorVladimir Batageljnodes[id1nameBatagelj Vladimirmode4sex2x08091y06537id2nameDoreian Patrickmode4sex2x03585y06791id3nameFerligoj Anuu0161kamode4sex1x06195y06807id4nameGranovetter Markmode4sex2x01456y06605id5nameMoustaki Irinimode4sex1x0783y0228id6nameMrvar Andrejmode4sex2x0478y06301id7nameClustering with relational constraintmode3sex0x06841y03801
id15nameCambridge University Pressmode5sex0x05343y02382id16nameSpringermode5sex0x08846y0174]links[typearcsource1target10rel1weight1typearcsource2target10rel1weight1typearcsource3target10rel1weight1typearcsource1target7rel1weight1typearcsource3target7rel1weight1typearcsource4target8rel1weight1typearcsource4target14rel4weight1
typearcsource10target7rel2weight1typearcsource14target15rel5weight1typearcsource11target16rel5weight1
]
bibjson picture bibV Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON files anddisplaying a network with given nodesrsquo coordinates
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltinput type=rsquofilersquo accept=rsquoapplicationjsonrsquo onchange=rsquoopenFile(event)rsquogtltscriptgtfunction process(graph) set up the drawing areavar width = 500height = 500 s = graphattributesorg
var svg = d3select(body)append(svg)attr(width width)attr(height height)attr(xmlns httpwwww3org2000svg)
draw the linksvar link = svgselectAll(line)data(graphlinks)enter()append(line)style(stroke function(di) return((dtype==arc magenta blue)))attr(stroke-width 2)attr(x1 function(d) return(graphnodes[dsource-s]xwidth))attr(y1 function(d) return(graphnodes[dsource-s]yheight))attr(x2 function(d) return(graphnodes[dtarget-s]xwidth))attr(y2 function(d) return(graphnodes[dtarget-s]yheight))
draw the nodesvar node = svgselectAll(circle)data(graphnodes)enter()append(circle)attr(r 15)attr(cx function(di) return(dxwidth))attr(cy function(di) return(dyheight))attr(fill yellow)attr(stroke red)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
readingadapted from Matt West Reading Files Using The HTML5 FileReader API
var openFile = function(event) var input = eventtargetvar reader = new FileReader()readeronload = function()process(JSONparse(readerresult))
readerreadAsText(inputfiles[0])
ltscriptgtltbodygt
graphReadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON file from serveradapted from Ying Kit Yuen jQuery amp Javascript -ndash Read JSON files on server
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtlttitlegtLoad JSON file from serverlttitlegtlt-- httpeurekaykyueninfo20130925jquery-javascript-read-json-files-on-server --gtltscript src=httpajaxgoogleapiscomajaxlibsjquery1102jqueryminjsgtltscriptgtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltselect id=datagtltoption value=graphjsongtgraphjsonltoptiongtltoption value=classjsongtclassjsonltoptiongt
ltselectgtltbutton id=btngtReadltbuttongtltscriptgtfunction process(graph) set up the drawing area the body of function process is the same as in the previous exampleattr(stroke red)
$(btn)click(function()$getJSON($(data)val() function(json) process(json))
)ltscriptgtltbodygt
graphLoadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Network displayer graphXY
drawNetjs
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
graphXYgen
ltDOCTYPE htmlgtltmeta charset=utf-8gtltbodygtlt-- script src=graphAjsgtltscript --gtltscript src=graphBjsgtltscriptgtlt-- script src=classSjsgtltscript --gtltscript src=drawNetjsgtltscriptgtltscript src=d3d3jsgtltscriptgtltscriptgtvars = graphinfoorgwidth = graphstylecanvaswidthheight = graphstylecanvasheightvar lw = 1if ( typeof graphstyle == rsquoundefinedrsquo ampamp graphstyle) if ( typeof graphstylelink == rsquoundefinedrsquo ampamp graphstylelink )
if ( typeof graphstylelinkwidth == rsquoundefinedrsquo ampamp graphstylelinkwidth ) var lw = graphstylelinkwidth
if(graphnetJSON==rsquogeneralrsquo) var OK = drawNet(graphpersonsdatagraphfrienddata)
else var OK = drawNet(graphnodesgraphlinks)
ltscriptgtltbodygt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Saving SVG pictureS Murray Interactive Data Visualization for the Web p 235
In Google Chrome we draw a picture and open the Developer ToolsIn the Elements we identify the SVG subobject select it copy it intosome text editor and save with extension svg
To enhance the picture or to transform it to other picture formats we
process it using some vector graphics editor
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
To do
bull displayer templates can be based on GUI
bull for a description of multirelational networks we use the rel
attribute in the general version they can be treated asseparate sets of links
bull properties are considered as attributes in the general versionthey can be represented as special objects vector partitionpermutation and cluster
bull use temporal quantities for describing temporal networks
bull extend the list of info-attributes attributes type (simpletemporal) twoModeOrg nStrong nRelations planar
bull icons can be used for visualization of nodes Font AwesomeMaterial Icons tests
bull links can be visually represented in many different ways that canbe described in style
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
to do
bull style can be attached as an attribute also to an element(node link) thus changing the default settings
bull add the visualization of arcs with arrows Directed Graph EditorD3 Tips and Tricks
bull to be included in netD3js vzmetno risanje Force in urejanjeSpringy Matrix with permutations
bull can some attributes be renamed from tail nodeA rarrsource to head nodeB rarr target may be the simplestsolution is a replace in some text editor
bull implement saving of the obtained SVG picture to a file ExportSVG with Style d3jsSVG Export demo
bull include in netJSON elements useful in some applications suchas hooks or inout-ports background image etc
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Sources
Ideas for visualization styles can be found in GoJS - InteractiveDiagrams for JavaScript and HTML Visjs in VisualComplexity
GoJS mdashSankey Diagram Family Tree Logic Circuit DynamicPortsVega - a visualization grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References I
Vladimir Batagelj Complex Networks Visualization of RA Meyersed Encyclopedia of Complexity and Systems Science Springer 20091253-1268
Vladimir Batagelj Andrej Mrvar Pajek manual
Jernej Bodlaj Network Data File Formats in Reda Alhajj Jon Rokne(eds) Encyclopedia of Social Network Analysis and Mining SpringerNew York 2014 p 1076-1091
Richard Brath David Jonker Graph Analysis and VisualizationDiscovering Business Opportunity in Linked Data John Wiley amp SonsIndianapolis Indiana 2015
Emden Gansner Eleftherios Koutsofios Stephen North Drawinggraphs with dot January 26 2006
Scott Murray Interactive Data Visualization for the Web OrsquoReillySebastopol 2013
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References II
Wouter De Nooy Andrej Mrvar Vladimir Batagelj Exploratory SocialNetwork Analysis with Pajek Revised and Expanded Second EditionStructural Analysis in the Social Sciences Cambridge UniversityPress September 2011
Matthew Roughan Jonathan Tuke Unravelling Graph-Exchange FileFormats arXiv150302781 submitted on 10 Mar 2015
Wikipedia JSON
Leland Wilkinson The Grammar of Graphics Springer-Verlag NewYork 2005
V Batagelj JSON amp D3js
- Introduction
- Description of networks
- JSON
- JSON and D3js
- JSON and R
- Displayer
- To do
- References
-
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
bibjson
netJSONbasicinfonetworkbiborg1nNodes16nArcs19titleExample for EUSNrsquo16legendmode[bookjournalpaperpersonpublisherseries]sex[fm]rel[authorOfcitescontainedIneditorOfpublishedBy]
metadateJune 112016authorVladimir Batageljnodes[id1nameBatagelj Vladimirmode4sex2x08091y06537id2nameDoreian Patrickmode4sex2x03585y06791id3nameFerligoj Anuu0161kamode4sex1x06195y06807id4nameGranovetter Markmode4sex2x01456y06605id5nameMoustaki Irinimode4sex1x0783y0228id6nameMrvar Andrejmode4sex2x0478y06301id7nameClustering with relational constraintmode3sex0x06841y03801
id15nameCambridge University Pressmode5sex0x05343y02382id16nameSpringermode5sex0x08846y0174]links[typearcsource1target10rel1weight1typearcsource2target10rel1weight1typearcsource3target10rel1weight1typearcsource1target7rel1weight1typearcsource3target7rel1weight1typearcsource4target8rel1weight1typearcsource4target14rel4weight1
typearcsource10target7rel2weight1typearcsource14target15rel5weight1typearcsource11target16rel5weight1
]
bibjson picture bibV Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON files anddisplaying a network with given nodesrsquo coordinates
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltinput type=rsquofilersquo accept=rsquoapplicationjsonrsquo onchange=rsquoopenFile(event)rsquogtltscriptgtfunction process(graph) set up the drawing areavar width = 500height = 500 s = graphattributesorg
var svg = d3select(body)append(svg)attr(width width)attr(height height)attr(xmlns httpwwww3org2000svg)
draw the linksvar link = svgselectAll(line)data(graphlinks)enter()append(line)style(stroke function(di) return((dtype==arc magenta blue)))attr(stroke-width 2)attr(x1 function(d) return(graphnodes[dsource-s]xwidth))attr(y1 function(d) return(graphnodes[dsource-s]yheight))attr(x2 function(d) return(graphnodes[dtarget-s]xwidth))attr(y2 function(d) return(graphnodes[dtarget-s]yheight))
draw the nodesvar node = svgselectAll(circle)data(graphnodes)enter()append(circle)attr(r 15)attr(cx function(di) return(dxwidth))attr(cy function(di) return(dyheight))attr(fill yellow)attr(stroke red)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
readingadapted from Matt West Reading Files Using The HTML5 FileReader API
var openFile = function(event) var input = eventtargetvar reader = new FileReader()readeronload = function()process(JSONparse(readerresult))
readerreadAsText(inputfiles[0])
ltscriptgtltbodygt
graphReadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON file from serveradapted from Ying Kit Yuen jQuery amp Javascript -ndash Read JSON files on server
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtlttitlegtLoad JSON file from serverlttitlegtlt-- httpeurekaykyueninfo20130925jquery-javascript-read-json-files-on-server --gtltscript src=httpajaxgoogleapiscomajaxlibsjquery1102jqueryminjsgtltscriptgtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltselect id=datagtltoption value=graphjsongtgraphjsonltoptiongtltoption value=classjsongtclassjsonltoptiongt
ltselectgtltbutton id=btngtReadltbuttongtltscriptgtfunction process(graph) set up the drawing area the body of function process is the same as in the previous exampleattr(stroke red)
$(btn)click(function()$getJSON($(data)val() function(json) process(json))
)ltscriptgtltbodygt
graphLoadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Network displayer graphXY
drawNetjs
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
graphXYgen
ltDOCTYPE htmlgtltmeta charset=utf-8gtltbodygtlt-- script src=graphAjsgtltscript --gtltscript src=graphBjsgtltscriptgtlt-- script src=classSjsgtltscript --gtltscript src=drawNetjsgtltscriptgtltscript src=d3d3jsgtltscriptgtltscriptgtvars = graphinfoorgwidth = graphstylecanvaswidthheight = graphstylecanvasheightvar lw = 1if ( typeof graphstyle == rsquoundefinedrsquo ampamp graphstyle) if ( typeof graphstylelink == rsquoundefinedrsquo ampamp graphstylelink )
if ( typeof graphstylelinkwidth == rsquoundefinedrsquo ampamp graphstylelinkwidth ) var lw = graphstylelinkwidth
if(graphnetJSON==rsquogeneralrsquo) var OK = drawNet(graphpersonsdatagraphfrienddata)
else var OK = drawNet(graphnodesgraphlinks)
ltscriptgtltbodygt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Saving SVG pictureS Murray Interactive Data Visualization for the Web p 235
In Google Chrome we draw a picture and open the Developer ToolsIn the Elements we identify the SVG subobject select it copy it intosome text editor and save with extension svg
To enhance the picture or to transform it to other picture formats we
process it using some vector graphics editor
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
To do
bull displayer templates can be based on GUI
bull for a description of multirelational networks we use the rel
attribute in the general version they can be treated asseparate sets of links
bull properties are considered as attributes in the general versionthey can be represented as special objects vector partitionpermutation and cluster
bull use temporal quantities for describing temporal networks
bull extend the list of info-attributes attributes type (simpletemporal) twoModeOrg nStrong nRelations planar
bull icons can be used for visualization of nodes Font AwesomeMaterial Icons tests
bull links can be visually represented in many different ways that canbe described in style
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
to do
bull style can be attached as an attribute also to an element(node link) thus changing the default settings
bull add the visualization of arcs with arrows Directed Graph EditorD3 Tips and Tricks
bull to be included in netD3js vzmetno risanje Force in urejanjeSpringy Matrix with permutations
bull can some attributes be renamed from tail nodeA rarrsource to head nodeB rarr target may be the simplestsolution is a replace in some text editor
bull implement saving of the obtained SVG picture to a file ExportSVG with Style d3jsSVG Export demo
bull include in netJSON elements useful in some applications suchas hooks or inout-ports background image etc
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Sources
Ideas for visualization styles can be found in GoJS - InteractiveDiagrams for JavaScript and HTML Visjs in VisualComplexity
GoJS mdashSankey Diagram Family Tree Logic Circuit DynamicPortsVega - a visualization grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References I
Vladimir Batagelj Complex Networks Visualization of RA Meyersed Encyclopedia of Complexity and Systems Science Springer 20091253-1268
Vladimir Batagelj Andrej Mrvar Pajek manual
Jernej Bodlaj Network Data File Formats in Reda Alhajj Jon Rokne(eds) Encyclopedia of Social Network Analysis and Mining SpringerNew York 2014 p 1076-1091
Richard Brath David Jonker Graph Analysis and VisualizationDiscovering Business Opportunity in Linked Data John Wiley amp SonsIndianapolis Indiana 2015
Emden Gansner Eleftherios Koutsofios Stephen North Drawinggraphs with dot January 26 2006
Scott Murray Interactive Data Visualization for the Web OrsquoReillySebastopol 2013
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References II
Wouter De Nooy Andrej Mrvar Vladimir Batagelj Exploratory SocialNetwork Analysis with Pajek Revised and Expanded Second EditionStructural Analysis in the Social Sciences Cambridge UniversityPress September 2011
Matthew Roughan Jonathan Tuke Unravelling Graph-Exchange FileFormats arXiv150302781 submitted on 10 Mar 2015
Wikipedia JSON
Leland Wilkinson The Grammar of Graphics Springer-Verlag NewYork 2005
V Batagelj JSON amp D3js
- Introduction
- Description of networks
- JSON
- JSON and D3js
- JSON and R
- Displayer
- To do
- References
-
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON files anddisplaying a network with given nodesrsquo coordinates
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltinput type=rsquofilersquo accept=rsquoapplicationjsonrsquo onchange=rsquoopenFile(event)rsquogtltscriptgtfunction process(graph) set up the drawing areavar width = 500height = 500 s = graphattributesorg
var svg = d3select(body)append(svg)attr(width width)attr(height height)attr(xmlns httpwwww3org2000svg)
draw the linksvar link = svgselectAll(line)data(graphlinks)enter()append(line)style(stroke function(di) return((dtype==arc magenta blue)))attr(stroke-width 2)attr(x1 function(d) return(graphnodes[dsource-s]xwidth))attr(y1 function(d) return(graphnodes[dsource-s]yheight))attr(x2 function(d) return(graphnodes[dtarget-s]xwidth))attr(y2 function(d) return(graphnodes[dtarget-s]yheight))
draw the nodesvar node = svgselectAll(circle)data(graphnodes)enter()append(circle)attr(r 15)attr(cx function(di) return(dxwidth))attr(cy function(di) return(dyheight))attr(fill yellow)attr(stroke red)
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
readingadapted from Matt West Reading Files Using The HTML5 FileReader API
var openFile = function(event) var input = eventtargetvar reader = new FileReader()readeronload = function()process(JSONparse(readerresult))
readerreadAsText(inputfiles[0])
ltscriptgtltbodygt
graphReadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON file from serveradapted from Ying Kit Yuen jQuery amp Javascript -ndash Read JSON files on server
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtlttitlegtLoad JSON file from serverlttitlegtlt-- httpeurekaykyueninfo20130925jquery-javascript-read-json-files-on-server --gtltscript src=httpajaxgoogleapiscomajaxlibsjquery1102jqueryminjsgtltscriptgtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltselect id=datagtltoption value=graphjsongtgraphjsonltoptiongtltoption value=classjsongtclassjsonltoptiongt
ltselectgtltbutton id=btngtReadltbuttongtltscriptgtfunction process(graph) set up the drawing area the body of function process is the same as in the previous exampleattr(stroke red)
$(btn)click(function()$getJSON($(data)val() function(json) process(json))
)ltscriptgtltbodygt
graphLoadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Network displayer graphXY
drawNetjs
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
graphXYgen
ltDOCTYPE htmlgtltmeta charset=utf-8gtltbodygtlt-- script src=graphAjsgtltscript --gtltscript src=graphBjsgtltscriptgtlt-- script src=classSjsgtltscript --gtltscript src=drawNetjsgtltscriptgtltscript src=d3d3jsgtltscriptgtltscriptgtvars = graphinfoorgwidth = graphstylecanvaswidthheight = graphstylecanvasheightvar lw = 1if ( typeof graphstyle == rsquoundefinedrsquo ampamp graphstyle) if ( typeof graphstylelink == rsquoundefinedrsquo ampamp graphstylelink )
if ( typeof graphstylelinkwidth == rsquoundefinedrsquo ampamp graphstylelinkwidth ) var lw = graphstylelinkwidth
if(graphnetJSON==rsquogeneralrsquo) var OK = drawNet(graphpersonsdatagraphfrienddata)
else var OK = drawNet(graphnodesgraphlinks)
ltscriptgtltbodygt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Saving SVG pictureS Murray Interactive Data Visualization for the Web p 235
In Google Chrome we draw a picture and open the Developer ToolsIn the Elements we identify the SVG subobject select it copy it intosome text editor and save with extension svg
To enhance the picture or to transform it to other picture formats we
process it using some vector graphics editor
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
To do
bull displayer templates can be based on GUI
bull for a description of multirelational networks we use the rel
attribute in the general version they can be treated asseparate sets of links
bull properties are considered as attributes in the general versionthey can be represented as special objects vector partitionpermutation and cluster
bull use temporal quantities for describing temporal networks
bull extend the list of info-attributes attributes type (simpletemporal) twoModeOrg nStrong nRelations planar
bull icons can be used for visualization of nodes Font AwesomeMaterial Icons tests
bull links can be visually represented in many different ways that canbe described in style
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
to do
bull style can be attached as an attribute also to an element(node link) thus changing the default settings
bull add the visualization of arcs with arrows Directed Graph EditorD3 Tips and Tricks
bull to be included in netD3js vzmetno risanje Force in urejanjeSpringy Matrix with permutations
bull can some attributes be renamed from tail nodeA rarrsource to head nodeB rarr target may be the simplestsolution is a replace in some text editor
bull implement saving of the obtained SVG picture to a file ExportSVG with Style d3jsSVG Export demo
bull include in netJSON elements useful in some applications suchas hooks or inout-ports background image etc
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Sources
Ideas for visualization styles can be found in GoJS - InteractiveDiagrams for JavaScript and HTML Visjs in VisualComplexity
GoJS mdashSankey Diagram Family Tree Logic Circuit DynamicPortsVega - a visualization grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References I
Vladimir Batagelj Complex Networks Visualization of RA Meyersed Encyclopedia of Complexity and Systems Science Springer 20091253-1268
Vladimir Batagelj Andrej Mrvar Pajek manual
Jernej Bodlaj Network Data File Formats in Reda Alhajj Jon Rokne(eds) Encyclopedia of Social Network Analysis and Mining SpringerNew York 2014 p 1076-1091
Richard Brath David Jonker Graph Analysis and VisualizationDiscovering Business Opportunity in Linked Data John Wiley amp SonsIndianapolis Indiana 2015
Emden Gansner Eleftherios Koutsofios Stephen North Drawinggraphs with dot January 26 2006
Scott Murray Interactive Data Visualization for the Web OrsquoReillySebastopol 2013
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References II
Wouter De Nooy Andrej Mrvar Vladimir Batagelj Exploratory SocialNetwork Analysis with Pajek Revised and Expanded Second EditionStructural Analysis in the Social Sciences Cambridge UniversityPress September 2011
Matthew Roughan Jonathan Tuke Unravelling Graph-Exchange FileFormats arXiv150302781 submitted on 10 Mar 2015
Wikipedia JSON
Leland Wilkinson The Grammar of Graphics Springer-Verlag NewYork 2005
V Batagelj JSON amp D3js
- Introduction
- Description of networks
- JSON
- JSON and D3js
- JSON and R
- Displayer
- To do
- References
-
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
readingadapted from Matt West Reading Files Using The HTML5 FileReader API
var openFile = function(event) var input = eventtargetvar reader = new FileReader()readeronload = function()process(JSONparse(readerresult))
readerreadAsText(inputfiles[0])
ltscriptgtltbodygt
graphReadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON file from serveradapted from Ying Kit Yuen jQuery amp Javascript -ndash Read JSON files on server
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtlttitlegtLoad JSON file from serverlttitlegtlt-- httpeurekaykyueninfo20130925jquery-javascript-read-json-files-on-server --gtltscript src=httpajaxgoogleapiscomajaxlibsjquery1102jqueryminjsgtltscriptgtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltselect id=datagtltoption value=graphjsongtgraphjsonltoptiongtltoption value=classjsongtclassjsonltoptiongt
ltselectgtltbutton id=btngtReadltbuttongtltscriptgtfunction process(graph) set up the drawing area the body of function process is the same as in the previous exampleattr(stroke red)
$(btn)click(function()$getJSON($(data)val() function(json) process(json))
)ltscriptgtltbodygt
graphLoadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Network displayer graphXY
drawNetjs
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
graphXYgen
ltDOCTYPE htmlgtltmeta charset=utf-8gtltbodygtlt-- script src=graphAjsgtltscript --gtltscript src=graphBjsgtltscriptgtlt-- script src=classSjsgtltscript --gtltscript src=drawNetjsgtltscriptgtltscript src=d3d3jsgtltscriptgtltscriptgtvars = graphinfoorgwidth = graphstylecanvaswidthheight = graphstylecanvasheightvar lw = 1if ( typeof graphstyle == rsquoundefinedrsquo ampamp graphstyle) if ( typeof graphstylelink == rsquoundefinedrsquo ampamp graphstylelink )
if ( typeof graphstylelinkwidth == rsquoundefinedrsquo ampamp graphstylelinkwidth ) var lw = graphstylelinkwidth
if(graphnetJSON==rsquogeneralrsquo) var OK = drawNet(graphpersonsdatagraphfrienddata)
else var OK = drawNet(graphnodesgraphlinks)
ltscriptgtltbodygt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Saving SVG pictureS Murray Interactive Data Visualization for the Web p 235
In Google Chrome we draw a picture and open the Developer ToolsIn the Elements we identify the SVG subobject select it copy it intosome text editor and save with extension svg
To enhance the picture or to transform it to other picture formats we
process it using some vector graphics editor
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
To do
bull displayer templates can be based on GUI
bull for a description of multirelational networks we use the rel
attribute in the general version they can be treated asseparate sets of links
bull properties are considered as attributes in the general versionthey can be represented as special objects vector partitionpermutation and cluster
bull use temporal quantities for describing temporal networks
bull extend the list of info-attributes attributes type (simpletemporal) twoModeOrg nStrong nRelations planar
bull icons can be used for visualization of nodes Font AwesomeMaterial Icons tests
bull links can be visually represented in many different ways that canbe described in style
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
to do
bull style can be attached as an attribute also to an element(node link) thus changing the default settings
bull add the visualization of arcs with arrows Directed Graph EditorD3 Tips and Tricks
bull to be included in netD3js vzmetno risanje Force in urejanjeSpringy Matrix with permutations
bull can some attributes be renamed from tail nodeA rarrsource to head nodeB rarr target may be the simplestsolution is a replace in some text editor
bull implement saving of the obtained SVG picture to a file ExportSVG with Style d3jsSVG Export demo
bull include in netJSON elements useful in some applications suchas hooks or inout-ports background image etc
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Sources
Ideas for visualization styles can be found in GoJS - InteractiveDiagrams for JavaScript and HTML Visjs in VisualComplexity
GoJS mdashSankey Diagram Family Tree Logic Circuit DynamicPortsVega - a visualization grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References I
Vladimir Batagelj Complex Networks Visualization of RA Meyersed Encyclopedia of Complexity and Systems Science Springer 20091253-1268
Vladimir Batagelj Andrej Mrvar Pajek manual
Jernej Bodlaj Network Data File Formats in Reda Alhajj Jon Rokne(eds) Encyclopedia of Social Network Analysis and Mining SpringerNew York 2014 p 1076-1091
Richard Brath David Jonker Graph Analysis and VisualizationDiscovering Business Opportunity in Linked Data John Wiley amp SonsIndianapolis Indiana 2015
Emden Gansner Eleftherios Koutsofios Stephen North Drawinggraphs with dot January 26 2006
Scott Murray Interactive Data Visualization for the Web OrsquoReillySebastopol 2013
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References II
Wouter De Nooy Andrej Mrvar Vladimir Batagelj Exploratory SocialNetwork Analysis with Pajek Revised and Expanded Second EditionStructural Analysis in the Social Sciences Cambridge UniversityPress September 2011
Matthew Roughan Jonathan Tuke Unravelling Graph-Exchange FileFormats arXiv150302781 submitted on 10 Mar 2015
Wikipedia JSON
Leland Wilkinson The Grammar of Graphics Springer-Verlag NewYork 2005
V Batagelj JSON amp D3js
- Introduction
- Description of networks
- JSON
- JSON and D3js
- JSON and R
- Displayer
- To do
- References
-
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Reading JSON file from serveradapted from Ying Kit Yuen jQuery amp Javascript -ndash Read JSON files on server
ltDOCTYPE htmlgtltheadgtltmeta charset=utf-8gtlttitlegtLoad JSON file from serverlttitlegtlt-- httpeurekaykyueninfo20130925jquery-javascript-read-json-files-on-server --gtltscript src=httpajaxgoogleapiscomajaxlibsjquery1102jqueryminjsgtltscriptgtltscript src=httpd3jsorgd3v3minjsgtltscriptgtltheadgtltbodygtltselect id=datagtltoption value=graphjsongtgraphjsonltoptiongtltoption value=classjsongtclassjsonltoptiongt
ltselectgtltbutton id=btngtReadltbuttongtltscriptgtfunction process(graph) set up the drawing area the body of function process is the same as in the previous exampleattr(stroke red)
$(btn)click(function()$getJSON($(data)val() function(json) process(json))
)ltscriptgtltbodygt
graphLoadhtml
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Network displayer graphXY
drawNetjs
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
graphXYgen
ltDOCTYPE htmlgtltmeta charset=utf-8gtltbodygtlt-- script src=graphAjsgtltscript --gtltscript src=graphBjsgtltscriptgtlt-- script src=classSjsgtltscript --gtltscript src=drawNetjsgtltscriptgtltscript src=d3d3jsgtltscriptgtltscriptgtvars = graphinfoorgwidth = graphstylecanvaswidthheight = graphstylecanvasheightvar lw = 1if ( typeof graphstyle == rsquoundefinedrsquo ampamp graphstyle) if ( typeof graphstylelink == rsquoundefinedrsquo ampamp graphstylelink )
if ( typeof graphstylelinkwidth == rsquoundefinedrsquo ampamp graphstylelinkwidth ) var lw = graphstylelinkwidth
if(graphnetJSON==rsquogeneralrsquo) var OK = drawNet(graphpersonsdatagraphfrienddata)
else var OK = drawNet(graphnodesgraphlinks)
ltscriptgtltbodygt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Saving SVG pictureS Murray Interactive Data Visualization for the Web p 235
In Google Chrome we draw a picture and open the Developer ToolsIn the Elements we identify the SVG subobject select it copy it intosome text editor and save with extension svg
To enhance the picture or to transform it to other picture formats we
process it using some vector graphics editor
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
To do
bull displayer templates can be based on GUI
bull for a description of multirelational networks we use the rel
attribute in the general version they can be treated asseparate sets of links
bull properties are considered as attributes in the general versionthey can be represented as special objects vector partitionpermutation and cluster
bull use temporal quantities for describing temporal networks
bull extend the list of info-attributes attributes type (simpletemporal) twoModeOrg nStrong nRelations planar
bull icons can be used for visualization of nodes Font AwesomeMaterial Icons tests
bull links can be visually represented in many different ways that canbe described in style
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
to do
bull style can be attached as an attribute also to an element(node link) thus changing the default settings
bull add the visualization of arcs with arrows Directed Graph EditorD3 Tips and Tricks
bull to be included in netD3js vzmetno risanje Force in urejanjeSpringy Matrix with permutations
bull can some attributes be renamed from tail nodeA rarrsource to head nodeB rarr target may be the simplestsolution is a replace in some text editor
bull implement saving of the obtained SVG picture to a file ExportSVG with Style d3jsSVG Export demo
bull include in netJSON elements useful in some applications suchas hooks or inout-ports background image etc
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Sources
Ideas for visualization styles can be found in GoJS - InteractiveDiagrams for JavaScript and HTML Visjs in VisualComplexity
GoJS mdashSankey Diagram Family Tree Logic Circuit DynamicPortsVega - a visualization grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References I
Vladimir Batagelj Complex Networks Visualization of RA Meyersed Encyclopedia of Complexity and Systems Science Springer 20091253-1268
Vladimir Batagelj Andrej Mrvar Pajek manual
Jernej Bodlaj Network Data File Formats in Reda Alhajj Jon Rokne(eds) Encyclopedia of Social Network Analysis and Mining SpringerNew York 2014 p 1076-1091
Richard Brath David Jonker Graph Analysis and VisualizationDiscovering Business Opportunity in Linked Data John Wiley amp SonsIndianapolis Indiana 2015
Emden Gansner Eleftherios Koutsofios Stephen North Drawinggraphs with dot January 26 2006
Scott Murray Interactive Data Visualization for the Web OrsquoReillySebastopol 2013
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References II
Wouter De Nooy Andrej Mrvar Vladimir Batagelj Exploratory SocialNetwork Analysis with Pajek Revised and Expanded Second EditionStructural Analysis in the Social Sciences Cambridge UniversityPress September 2011
Matthew Roughan Jonathan Tuke Unravelling Graph-Exchange FileFormats arXiv150302781 submitted on 10 Mar 2015
Wikipedia JSON
Leland Wilkinson The Grammar of Graphics Springer-Verlag NewYork 2005
V Batagelj JSON amp D3js
- Introduction
- Description of networks
- JSON
- JSON and D3js
- JSON and R
- Displayer
- To do
- References
-
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Network displayer graphXY
drawNetjs
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
graphXYgen
ltDOCTYPE htmlgtltmeta charset=utf-8gtltbodygtlt-- script src=graphAjsgtltscript --gtltscript src=graphBjsgtltscriptgtlt-- script src=classSjsgtltscript --gtltscript src=drawNetjsgtltscriptgtltscript src=d3d3jsgtltscriptgtltscriptgtvars = graphinfoorgwidth = graphstylecanvaswidthheight = graphstylecanvasheightvar lw = 1if ( typeof graphstyle == rsquoundefinedrsquo ampamp graphstyle) if ( typeof graphstylelink == rsquoundefinedrsquo ampamp graphstylelink )
if ( typeof graphstylelinkwidth == rsquoundefinedrsquo ampamp graphstylelinkwidth ) var lw = graphstylelinkwidth
if(graphnetJSON==rsquogeneralrsquo) var OK = drawNet(graphpersonsdatagraphfrienddata)
else var OK = drawNet(graphnodesgraphlinks)
ltscriptgtltbodygt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Saving SVG pictureS Murray Interactive Data Visualization for the Web p 235
In Google Chrome we draw a picture and open the Developer ToolsIn the Elements we identify the SVG subobject select it copy it intosome text editor and save with extension svg
To enhance the picture or to transform it to other picture formats we
process it using some vector graphics editor
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
To do
bull displayer templates can be based on GUI
bull for a description of multirelational networks we use the rel
attribute in the general version they can be treated asseparate sets of links
bull properties are considered as attributes in the general versionthey can be represented as special objects vector partitionpermutation and cluster
bull use temporal quantities for describing temporal networks
bull extend the list of info-attributes attributes type (simpletemporal) twoModeOrg nStrong nRelations planar
bull icons can be used for visualization of nodes Font AwesomeMaterial Icons tests
bull links can be visually represented in many different ways that canbe described in style
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
to do
bull style can be attached as an attribute also to an element(node link) thus changing the default settings
bull add the visualization of arcs with arrows Directed Graph EditorD3 Tips and Tricks
bull to be included in netD3js vzmetno risanje Force in urejanjeSpringy Matrix with permutations
bull can some attributes be renamed from tail nodeA rarrsource to head nodeB rarr target may be the simplestsolution is a replace in some text editor
bull implement saving of the obtained SVG picture to a file ExportSVG with Style d3jsSVG Export demo
bull include in netJSON elements useful in some applications suchas hooks or inout-ports background image etc
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Sources
Ideas for visualization styles can be found in GoJS - InteractiveDiagrams for JavaScript and HTML Visjs in VisualComplexity
GoJS mdashSankey Diagram Family Tree Logic Circuit DynamicPortsVega - a visualization grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References I
Vladimir Batagelj Complex Networks Visualization of RA Meyersed Encyclopedia of Complexity and Systems Science Springer 20091253-1268
Vladimir Batagelj Andrej Mrvar Pajek manual
Jernej Bodlaj Network Data File Formats in Reda Alhajj Jon Rokne(eds) Encyclopedia of Social Network Analysis and Mining SpringerNew York 2014 p 1076-1091
Richard Brath David Jonker Graph Analysis and VisualizationDiscovering Business Opportunity in Linked Data John Wiley amp SonsIndianapolis Indiana 2015
Emden Gansner Eleftherios Koutsofios Stephen North Drawinggraphs with dot January 26 2006
Scott Murray Interactive Data Visualization for the Web OrsquoReillySebastopol 2013
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References II
Wouter De Nooy Andrej Mrvar Vladimir Batagelj Exploratory SocialNetwork Analysis with Pajek Revised and Expanded Second EditionStructural Analysis in the Social Sciences Cambridge UniversityPress September 2011
Matthew Roughan Jonathan Tuke Unravelling Graph-Exchange FileFormats arXiv150302781 submitted on 10 Mar 2015
Wikipedia JSON
Leland Wilkinson The Grammar of Graphics Springer-Verlag NewYork 2005
V Batagelj JSON amp D3js
- Introduction
- Description of networks
- JSON
- JSON and D3js
- JSON and R
- Displayer
- To do
- References
-
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
graphXYgen
ltDOCTYPE htmlgtltmeta charset=utf-8gtltbodygtlt-- script src=graphAjsgtltscript --gtltscript src=graphBjsgtltscriptgtlt-- script src=classSjsgtltscript --gtltscript src=drawNetjsgtltscriptgtltscript src=d3d3jsgtltscriptgtltscriptgtvars = graphinfoorgwidth = graphstylecanvaswidthheight = graphstylecanvasheightvar lw = 1if ( typeof graphstyle == rsquoundefinedrsquo ampamp graphstyle) if ( typeof graphstylelink == rsquoundefinedrsquo ampamp graphstylelink )
if ( typeof graphstylelinkwidth == rsquoundefinedrsquo ampamp graphstylelinkwidth ) var lw = graphstylelinkwidth
if(graphnetJSON==rsquogeneralrsquo) var OK = drawNet(graphpersonsdatagraphfrienddata)
else var OK = drawNet(graphnodesgraphlinks)
ltscriptgtltbodygt
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Saving SVG pictureS Murray Interactive Data Visualization for the Web p 235
In Google Chrome we draw a picture and open the Developer ToolsIn the Elements we identify the SVG subobject select it copy it intosome text editor and save with extension svg
To enhance the picture or to transform it to other picture formats we
process it using some vector graphics editor
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
To do
bull displayer templates can be based on GUI
bull for a description of multirelational networks we use the rel
attribute in the general version they can be treated asseparate sets of links
bull properties are considered as attributes in the general versionthey can be represented as special objects vector partitionpermutation and cluster
bull use temporal quantities for describing temporal networks
bull extend the list of info-attributes attributes type (simpletemporal) twoModeOrg nStrong nRelations planar
bull icons can be used for visualization of nodes Font AwesomeMaterial Icons tests
bull links can be visually represented in many different ways that canbe described in style
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
to do
bull style can be attached as an attribute also to an element(node link) thus changing the default settings
bull add the visualization of arcs with arrows Directed Graph EditorD3 Tips and Tricks
bull to be included in netD3js vzmetno risanje Force in urejanjeSpringy Matrix with permutations
bull can some attributes be renamed from tail nodeA rarrsource to head nodeB rarr target may be the simplestsolution is a replace in some text editor
bull implement saving of the obtained SVG picture to a file ExportSVG with Style d3jsSVG Export demo
bull include in netJSON elements useful in some applications suchas hooks or inout-ports background image etc
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Sources
Ideas for visualization styles can be found in GoJS - InteractiveDiagrams for JavaScript and HTML Visjs in VisualComplexity
GoJS mdashSankey Diagram Family Tree Logic Circuit DynamicPortsVega - a visualization grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References I
Vladimir Batagelj Complex Networks Visualization of RA Meyersed Encyclopedia of Complexity and Systems Science Springer 20091253-1268
Vladimir Batagelj Andrej Mrvar Pajek manual
Jernej Bodlaj Network Data File Formats in Reda Alhajj Jon Rokne(eds) Encyclopedia of Social Network Analysis and Mining SpringerNew York 2014 p 1076-1091
Richard Brath David Jonker Graph Analysis and VisualizationDiscovering Business Opportunity in Linked Data John Wiley amp SonsIndianapolis Indiana 2015
Emden Gansner Eleftherios Koutsofios Stephen North Drawinggraphs with dot January 26 2006
Scott Murray Interactive Data Visualization for the Web OrsquoReillySebastopol 2013
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References II
Wouter De Nooy Andrej Mrvar Vladimir Batagelj Exploratory SocialNetwork Analysis with Pajek Revised and Expanded Second EditionStructural Analysis in the Social Sciences Cambridge UniversityPress September 2011
Matthew Roughan Jonathan Tuke Unravelling Graph-Exchange FileFormats arXiv150302781 submitted on 10 Mar 2015
Wikipedia JSON
Leland Wilkinson The Grammar of Graphics Springer-Verlag NewYork 2005
V Batagelj JSON amp D3js
- Introduction
- Description of networks
- JSON
- JSON and D3js
- JSON and R
- Displayer
- To do
- References
-
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Saving SVG pictureS Murray Interactive Data Visualization for the Web p 235
In Google Chrome we draw a picture and open the Developer ToolsIn the Elements we identify the SVG subobject select it copy it intosome text editor and save with extension svg
To enhance the picture or to transform it to other picture formats we
process it using some vector graphics editor
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
To do
bull displayer templates can be based on GUI
bull for a description of multirelational networks we use the rel
attribute in the general version they can be treated asseparate sets of links
bull properties are considered as attributes in the general versionthey can be represented as special objects vector partitionpermutation and cluster
bull use temporal quantities for describing temporal networks
bull extend the list of info-attributes attributes type (simpletemporal) twoModeOrg nStrong nRelations planar
bull icons can be used for visualization of nodes Font AwesomeMaterial Icons tests
bull links can be visually represented in many different ways that canbe described in style
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
to do
bull style can be attached as an attribute also to an element(node link) thus changing the default settings
bull add the visualization of arcs with arrows Directed Graph EditorD3 Tips and Tricks
bull to be included in netD3js vzmetno risanje Force in urejanjeSpringy Matrix with permutations
bull can some attributes be renamed from tail nodeA rarrsource to head nodeB rarr target may be the simplestsolution is a replace in some text editor
bull implement saving of the obtained SVG picture to a file ExportSVG with Style d3jsSVG Export demo
bull include in netJSON elements useful in some applications suchas hooks or inout-ports background image etc
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Sources
Ideas for visualization styles can be found in GoJS - InteractiveDiagrams for JavaScript and HTML Visjs in VisualComplexity
GoJS mdashSankey Diagram Family Tree Logic Circuit DynamicPortsVega - a visualization grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References I
Vladimir Batagelj Complex Networks Visualization of RA Meyersed Encyclopedia of Complexity and Systems Science Springer 20091253-1268
Vladimir Batagelj Andrej Mrvar Pajek manual
Jernej Bodlaj Network Data File Formats in Reda Alhajj Jon Rokne(eds) Encyclopedia of Social Network Analysis and Mining SpringerNew York 2014 p 1076-1091
Richard Brath David Jonker Graph Analysis and VisualizationDiscovering Business Opportunity in Linked Data John Wiley amp SonsIndianapolis Indiana 2015
Emden Gansner Eleftherios Koutsofios Stephen North Drawinggraphs with dot January 26 2006
Scott Murray Interactive Data Visualization for the Web OrsquoReillySebastopol 2013
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References II
Wouter De Nooy Andrej Mrvar Vladimir Batagelj Exploratory SocialNetwork Analysis with Pajek Revised and Expanded Second EditionStructural Analysis in the Social Sciences Cambridge UniversityPress September 2011
Matthew Roughan Jonathan Tuke Unravelling Graph-Exchange FileFormats arXiv150302781 submitted on 10 Mar 2015
Wikipedia JSON
Leland Wilkinson The Grammar of Graphics Springer-Verlag NewYork 2005
V Batagelj JSON amp D3js
- Introduction
- Description of networks
- JSON
- JSON and D3js
- JSON and R
- Displayer
- To do
- References
-
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
To do
bull displayer templates can be based on GUI
bull for a description of multirelational networks we use the rel
attribute in the general version they can be treated asseparate sets of links
bull properties are considered as attributes in the general versionthey can be represented as special objects vector partitionpermutation and cluster
bull use temporal quantities for describing temporal networks
bull extend the list of info-attributes attributes type (simpletemporal) twoModeOrg nStrong nRelations planar
bull icons can be used for visualization of nodes Font AwesomeMaterial Icons tests
bull links can be visually represented in many different ways that canbe described in style
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
to do
bull style can be attached as an attribute also to an element(node link) thus changing the default settings
bull add the visualization of arcs with arrows Directed Graph EditorD3 Tips and Tricks
bull to be included in netD3js vzmetno risanje Force in urejanjeSpringy Matrix with permutations
bull can some attributes be renamed from tail nodeA rarrsource to head nodeB rarr target may be the simplestsolution is a replace in some text editor
bull implement saving of the obtained SVG picture to a file ExportSVG with Style d3jsSVG Export demo
bull include in netJSON elements useful in some applications suchas hooks or inout-ports background image etc
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Sources
Ideas for visualization styles can be found in GoJS - InteractiveDiagrams for JavaScript and HTML Visjs in VisualComplexity
GoJS mdashSankey Diagram Family Tree Logic Circuit DynamicPortsVega - a visualization grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References I
Vladimir Batagelj Complex Networks Visualization of RA Meyersed Encyclopedia of Complexity and Systems Science Springer 20091253-1268
Vladimir Batagelj Andrej Mrvar Pajek manual
Jernej Bodlaj Network Data File Formats in Reda Alhajj Jon Rokne(eds) Encyclopedia of Social Network Analysis and Mining SpringerNew York 2014 p 1076-1091
Richard Brath David Jonker Graph Analysis and VisualizationDiscovering Business Opportunity in Linked Data John Wiley amp SonsIndianapolis Indiana 2015
Emden Gansner Eleftherios Koutsofios Stephen North Drawinggraphs with dot January 26 2006
Scott Murray Interactive Data Visualization for the Web OrsquoReillySebastopol 2013
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References II
Wouter De Nooy Andrej Mrvar Vladimir Batagelj Exploratory SocialNetwork Analysis with Pajek Revised and Expanded Second EditionStructural Analysis in the Social Sciences Cambridge UniversityPress September 2011
Matthew Roughan Jonathan Tuke Unravelling Graph-Exchange FileFormats arXiv150302781 submitted on 10 Mar 2015
Wikipedia JSON
Leland Wilkinson The Grammar of Graphics Springer-Verlag NewYork 2005
V Batagelj JSON amp D3js
- Introduction
- Description of networks
- JSON
- JSON and D3js
- JSON and R
- Displayer
- To do
- References
-
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
to do
bull style can be attached as an attribute also to an element(node link) thus changing the default settings
bull add the visualization of arcs with arrows Directed Graph EditorD3 Tips and Tricks
bull to be included in netD3js vzmetno risanje Force in urejanjeSpringy Matrix with permutations
bull can some attributes be renamed from tail nodeA rarrsource to head nodeB rarr target may be the simplestsolution is a replace in some text editor
bull implement saving of the obtained SVG picture to a file ExportSVG with Style d3jsSVG Export demo
bull include in netJSON elements useful in some applications suchas hooks or inout-ports background image etc
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Sources
Ideas for visualization styles can be found in GoJS - InteractiveDiagrams for JavaScript and HTML Visjs in VisualComplexity
GoJS mdashSankey Diagram Family Tree Logic Circuit DynamicPortsVega - a visualization grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References I
Vladimir Batagelj Complex Networks Visualization of RA Meyersed Encyclopedia of Complexity and Systems Science Springer 20091253-1268
Vladimir Batagelj Andrej Mrvar Pajek manual
Jernej Bodlaj Network Data File Formats in Reda Alhajj Jon Rokne(eds) Encyclopedia of Social Network Analysis and Mining SpringerNew York 2014 p 1076-1091
Richard Brath David Jonker Graph Analysis and VisualizationDiscovering Business Opportunity in Linked Data John Wiley amp SonsIndianapolis Indiana 2015
Emden Gansner Eleftherios Koutsofios Stephen North Drawinggraphs with dot January 26 2006
Scott Murray Interactive Data Visualization for the Web OrsquoReillySebastopol 2013
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References II
Wouter De Nooy Andrej Mrvar Vladimir Batagelj Exploratory SocialNetwork Analysis with Pajek Revised and Expanded Second EditionStructural Analysis in the Social Sciences Cambridge UniversityPress September 2011
Matthew Roughan Jonathan Tuke Unravelling Graph-Exchange FileFormats arXiv150302781 submitted on 10 Mar 2015
Wikipedia JSON
Leland Wilkinson The Grammar of Graphics Springer-Verlag NewYork 2005
V Batagelj JSON amp D3js
- Introduction
- Description of networks
- JSON
- JSON and D3js
- JSON and R
- Displayer
- To do
- References
-
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
Sources
Ideas for visualization styles can be found in GoJS - InteractiveDiagrams for JavaScript and HTML Visjs in VisualComplexity
GoJS mdashSankey Diagram Family Tree Logic Circuit DynamicPortsVega - a visualization grammar
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References I
Vladimir Batagelj Complex Networks Visualization of RA Meyersed Encyclopedia of Complexity and Systems Science Springer 20091253-1268
Vladimir Batagelj Andrej Mrvar Pajek manual
Jernej Bodlaj Network Data File Formats in Reda Alhajj Jon Rokne(eds) Encyclopedia of Social Network Analysis and Mining SpringerNew York 2014 p 1076-1091
Richard Brath David Jonker Graph Analysis and VisualizationDiscovering Business Opportunity in Linked Data John Wiley amp SonsIndianapolis Indiana 2015
Emden Gansner Eleftherios Koutsofios Stephen North Drawinggraphs with dot January 26 2006
Scott Murray Interactive Data Visualization for the Web OrsquoReillySebastopol 2013
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References II
Wouter De Nooy Andrej Mrvar Vladimir Batagelj Exploratory SocialNetwork Analysis with Pajek Revised and Expanded Second EditionStructural Analysis in the Social Sciences Cambridge UniversityPress September 2011
Matthew Roughan Jonathan Tuke Unravelling Graph-Exchange FileFormats arXiv150302781 submitted on 10 Mar 2015
Wikipedia JSON
Leland Wilkinson The Grammar of Graphics Springer-Verlag NewYork 2005
V Batagelj JSON amp D3js
- Introduction
- Description of networks
- JSON
- JSON and D3js
- JSON and R
- Displayer
- To do
- References
-
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References I
Vladimir Batagelj Complex Networks Visualization of RA Meyersed Encyclopedia of Complexity and Systems Science Springer 20091253-1268
Vladimir Batagelj Andrej Mrvar Pajek manual
Jernej Bodlaj Network Data File Formats in Reda Alhajj Jon Rokne(eds) Encyclopedia of Social Network Analysis and Mining SpringerNew York 2014 p 1076-1091
Richard Brath David Jonker Graph Analysis and VisualizationDiscovering Business Opportunity in Linked Data John Wiley amp SonsIndianapolis Indiana 2015
Emden Gansner Eleftherios Koutsofios Stephen North Drawinggraphs with dot January 26 2006
Scott Murray Interactive Data Visualization for the Web OrsquoReillySebastopol 2013
V Batagelj JSON amp D3js
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References II
Wouter De Nooy Andrej Mrvar Vladimir Batagelj Exploratory SocialNetwork Analysis with Pajek Revised and Expanded Second EditionStructural Analysis in the Social Sciences Cambridge UniversityPress September 2011
Matthew Roughan Jonathan Tuke Unravelling Graph-Exchange FileFormats arXiv150302781 submitted on 10 Mar 2015
Wikipedia JSON
Leland Wilkinson The Grammar of Graphics Springer-Verlag NewYork 2005
V Batagelj JSON amp D3js
- Introduction
- Description of networks
- JSON
- JSON and D3js
- JSON and R
- Displayer
- To do
- References
-
JSON amp D3js
V Batagelj
Introduction
Description ofnetworks
JSON
JSON andD3js
JSON and R
Displayer
To do
References
References II
Wouter De Nooy Andrej Mrvar Vladimir Batagelj Exploratory SocialNetwork Analysis with Pajek Revised and Expanded Second EditionStructural Analysis in the Social Sciences Cambridge UniversityPress September 2011
Matthew Roughan Jonathan Tuke Unravelling Graph-Exchange FileFormats arXiv150302781 submitted on 10 Mar 2015
Wikipedia JSON
Leland Wilkinson The Grammar of Graphics Springer-Verlag NewYork 2005
V Batagelj JSON amp D3js
- Introduction
- Description of networks
- JSON
- JSON and D3js
- JSON and R
- Displayer
- To do
- References
-