// separator to parse data
psv = d3.dsvFormat(";")
data = d3.text('https://raw.githubusercontent.com/rinziv/DVVA-2019/master/data_observable/dati_grafo.dsv').then(
(txt) => psv.parse(txt))
nodesToFilter={
const sourceNode = d3.nest()
.key(d => d.organization_citing)
.rollup(v => v.length)
.entries(data)
.map(function(group) {
return {
name: group.key,
count: group.value,
type: 'source'
}
})
const targetNode = d3.nest()
.key(d => d.university_cited)
.rollup(v => v.length)
.entries(data)
.map(function(group) {
return {
name: group.key,
count: group.value,
type: 'target'
}
})
const allNodes= sourceNode.concat(targetNode).filter(d => d.count >= filterNumber).map(d=>d.name)
return allNodes
}
filteredData = data.filter(d=> nodesToFilter.indexOf(d.organization_citing) >= 0 && nodesToFilter.indexOf(d.university_cited) >= 0 )
nodes = (data,source,target) => {
const sourceNodes = Array.from(new Set(data.map(d=>d[source])));
const targetNodes = Array.from(new Set(data.map(d=>d[target])));
const nodes = sourceNodes.concat(targetNodes)
return nodes
}
gData =(data,source,target) => {
const gData = d3.nest()
.key(d => d[source])
.key(d => d[target])
.rollup(v => v.length)
.entries(data)
return gData
}
edgeList = (gby_data,nodeList) => {
let edgeList=[];
gby_data.forEach(function(el){
el.values.forEach(function (v,i){
const edge = {};
// create the edge object
edge.source=nodeList.indexOf(el.key)
edge.target=nodeList.indexOf(v.key)
edge.value=v.value
// following attributes are optional
edge.sourceName=el.key
edge.targetName=v.key
// append to the edge list
edgeList.push(edge)
})
})
return edgeList;
}
filteredLinks = (data) => {
return data.filter(d => d.value >= minEdges)
}
sankeyData = (data,source,target) => {
const nodeList = nodes(data,source,target);
const gby = gData(data,source,target);
const edges = edgeList(gby,nodeList);
const filteredEdges = filteredLinks(edges) //control this value with slider below
return {
nodes:nodeList,
edges:filteredEdges
}
}
sankey = (sankeyData, title, nodeColor,orientation,height ) => {
const trace = {
type: "sankey",
orientation: orientation,
valueformat: ".0f",
node: {
pad: 5,
thickness: 15,
line: {
color: nodeColor,
width: 0.5
},
color: nodeColor,
label: sankeyData['nodes'],
},
link: {
source: sankeyData['edges'].map(d => d.source),
target: sankeyData['edges'].map(d => d.target),
value: sankeyData['edges'].map(d => d.value)
}
};
const data=[trace];
const div = DOM.element('div');
const layout = {
title: title,
font: {
size: 10
},
height:h,
width:width
};
Plotly.react(div, data, layout);
return div;
}
sd = sankeyData(filteredData,'organization_citing','university_cited')
viewof filterNumber = slider({
min: 1,
max: 100,
step: 1,
value: 20,
title: "Minimum node size to visualize"
})
sankeyChart=sankey(sd,"Organizations linked to universities","red","h",700)
md`# APPENDIX`
d3 = require("d3@5")
Plotly = require('https://cdn.plot.ly/plotly-latest.min.js')
import {select} from "@jashkenas/inputs"
import {slider} from "@jashkenas/inputs"
import {autoSelect} from "@jashkenas/inputs"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
