Published
Edited
Jul 19, 2019
1 star
md`# Grafico aziende/università`
d3 = require("d3@5")
university
import {slider,select} from "@jashkenas/inputs"
Plotly = require('https://cdn.plot.ly/plotly-latest.min.js')
data={
let tsv_data = await d3.tsv("https://raw.githubusercontent.com/masterbigdata2019/grafoniversita/master/dati_grafo.tsv");
return tsv_data
}
nodesToFilter={
const sourceNodes = d3.nest()
.key(function(d) { return d.organization_citing; })
.rollup(v => v.length)
.entries(data)
.map(function(group){
return {
name: group.key,
count: group.value,
type: 'source'
}
}
)
const destinationNodes = d3.nest()
.key(function(d) { return d.university_cited; })
.rollup(v => v.length)
.entries(data)
.map(function(group){
return {
name: group.key,
count: group.value,
type: 'target'
}
}
)
const filteredSource=sourceNodes.filter(d=>!organization.includes("-- All organizations --")?organization.includes(d.name):"-- All organizations --")
const filteredDestination=destinationNodes.filter(d=>!university.includes("-- All Universities --")?university.includes(d.name):"-- All Universities --")
const allNodes= filteredSource.concat(filteredDestination).filter(d => d.count >= filterNodeCount).map(d=>d.name)
return allNodes
}
getDistinctNodes = (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
}
getGroupedData =(data,source,target) => {
const groupedData = d3.nest()
.key(d => d[source])
.key(d => d[target])
.rollup(v => v.length)
.entries(data)
return groupedData
}
getEdgeList = (groupedData,nodeList) => {
let edgeList=[];
groupedData.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;
}
getFilteredEdges = (data) => {
return data.filter(d => d.value >= filterEdgeCount)
}
getSankeyData = (data,source,target) => {
const nodeList = getDistinctNodes(data,source,target);
const gby = getGroupedData(data,source,target);
const edges = getEdgeList(gby,nodeList);
const filteredEdges = getFilteredEdges(edges) //control this value with slider below
return {
nodes:nodeList,
edges:filteredEdges
}
}
sankey = (sankeyData, title, orientation ) => {
const trace = {
type: "sankey",
orientation: orientation,
valueformat: ".0f",
node: {
pad: 15,
thickness: 15,
line: {
width: 0.5
},
label: sankeyData['nodes'],
font: {
size: 10,
},
//color:'rgb(21,122, 75)'
color:'rgb(30, 108, 23)'
},
link: {
source: sankeyData['edges'].map(d => d.source),
target: sankeyData['edges'].map(d => d.target),
value: sankeyData['edges'].map(d => d.value),
color:'rgb(150, 217, 185)'
}
};
const data=[trace];
const div = DOM.element('div');
const layout = {
title: title,
font: {
size: 12,
color : 'black'
},
height:height_selected,
width:width_selected,
paper_bgcolor:'rgba(0,0,0,0)',
plot_bgcolor:'rgba(0,0,0,0)',
margin: {
l:10,
r:70,
b:10,
t:30,
pad:4
}
};
Plotly.react(div, data, layout);
return div;
}
filteredData = data.filter(d=> nodesToFilter.indexOf(d.organization_citing) >= 0 && nodesToFilter.indexOf(d.university_cited) >= 0 )
sd = getSankeyData(filteredData,'organization_citing','university_cited')
sankeyChart=sankey(sd,"Organizations linked to universities","h")
viewof height_selected = slider({
min: 300,
max: 3000,
step: 1,
value: 500,
title: "Altezza grafica"
})
viewof width_selected = slider({
min: 300,
max: 1800,
step: 1,
value: 800,
title: "Larghezza grafico"
})
viewof filterNodeCount= slider({
min: 1,
max: 100,
step: 1,
value: 1,
title: "N. brevetti min."
})
viewof filterEdgeCount = slider({
min: 1,
max: 200,
step: 1,
value: 1,
title: "N. citazioni min."
})
universities= ["-- All Universities --"].concat(
d3.nest()
.key(d => d.university_cited)
.entries(data)
.map(d => d.key)
.sort(d3.ascending)
)
viewof university = select({
title: "Universities",
options: universities,
multiple: true,
value:["-- All Universities --"],
size:7
})
organizations= ["-- All organizations --"].concat(
d3.nest()
.key(d => d.organization_citing)
.entries(data)
.map(d => d.key)
.sort(d3.ascending)
)
//viewof organization = DOM.select(organizations)
viewof organization = select({
title: "Organizations",
value:["International Business Machines of Corporation","Google","Samsung Electronics Co., Lgd."],
options: organizations,
multiple: true,
size:7
})
md`# Grafico aziende/professori`
data1={
let tsv_data1 = await d3.tsv("https://raw.githubusercontent.com/masterbigdata2019/grafoniversita/master/grafo_patents_prof.tsv");
return tsv_data1
}
nodesToFilter1={
const sourceNodes = d3.nest()
.key(function(d) { return d.organization_citing; })
.rollup(v => v.length)
.entries(data1)
.map(function(group){
return {
name: group.key,
count: group.value,
type: 'source'
}
}
)
const destinationNodes = d3.nest()
.key(function(d) { return d.author; })
.rollup(v => v.length)
.entries(data1)
.map(function(group){
return {
name: group.key,
count: group.value,
type: 'target'
}
}
)
const filteredSource=sourceNodes.filter(d=>!organization1.includes("-- All organizations --")?organization1.includes(d.name):"-- All organizations --")
const filteredDestination=destinationNodes.filter(d=>!author.includes("-- All Authors --")?author.includes(d.name):"-- All Authors --")
const allNodes= filteredSource.concat(filteredDestination).filter(d => d.count >= filterNodeCount).map(d=>d.name)
return allNodes
}
filteredData1 = data1.filter(d=> nodesToFilter1.indexOf(d.organization_citing) >= 0 && nodesToFilter1.indexOf(d.author) >= 0 )
sd1 = getSankeyData(filteredData1,'organization_citing','author')
organizations1= ["-- All organizations --"].concat(
d3.nest()
.key(d => d.organization_citing)
.entries(data1)
.map(d => d.key)
.sort(d3.ascending)
)
viewof organization1 = select({
title: "Organizations",
value:["Google","LEVYX, INC.","Huawei Technologies,Co., Ltd."],
options: organizations1,
multiple: true,
size:7
})
authors= ["-- All Authors --"].concat(
d3.nest()
.key(d => d.author)
.entries(data1)
.map(d => d.key)
.sort(d3.ascending)
)
viewof author = select({
title: "Authors",
options: authors,
multiple: true,
value:"-- All Authors --",
size:7
})
md`# Stacked barchart`
data5={
let tsv_data5 = await d3.tsv("https://raw.githubusercontent.com/masterbigdata2019/grafoniversita/master/AIandNo.tsv");
return tsv_data5
}
trace1 = {
return{
y:data5.map(x=>x.Organization),
x:data5.map(x=>x.AI),
orientation : 'h',
type: 'bar',
name:'AI patents',
marker:{
color:'rgba(0,0,80,1.0)',
line :{
color : 'rgba(0,0,80, 1.0)',
width : 3}
}
}
};
trace2 = {
return{
y:data5.map(x=>x.Organization),
x:data5.map(x=>x["No AI"]),
orientation : 'h',
type: 'bar',
name:'Other patents',
marker:{
color:'rgba(158,202,225,0.6)',
line :{
color : 'rgba(158,202,225, 1.0)',
width : 3}
}
}
}
dataPlot = [trace1, trace2];
layout = {
return{
barmode:'stack',
width:800,
height:700,
paper_bgcolor:'rgba(0,0,0,0)',
plot_bgcolor:'rgba(0,0,0,0)',
/*xaxis:{
type:'log',
autorange:true
},
yaxis=dict(
type='log',
autorange=True
)*/
margin: {
l:300,
r:50,
b:50,
t:50,
pad:4
}
}};
barchart= {
let div = DOM.element('div')
return Plotly.plot(div,dataPlot,layout);
}
md`# Patent italiani`
italian_patents={
let tsv_data = await d3.tsv("https://raw.githubusercontent.com/masterbigdata2019/grafoniversita/master/PatentItalianiPerRegione.tsv");
return tsv_data
}
d_grouped_patent= d3.nest()
.key(d => d.zone)
.key(d => d.region)
.key(d => d.province)
.key(d => d.city)
.rollup(v => v.length)
.entries(italian_patents)
hdata = d3.hierarchy({key:'ALL PATENTS', values:d_grouped_patent.slice(0,9)}, d => d.values)
pack(hdata)
pack = data => d3.pack()
.size([width1, height1])
.padding(10)
(hdata
.sum(d => d.value)
.sort((a, b) => b.value - a.value))
height1 = width1
width1=500
chartBubble = {
const root = pack(hdata);
let focus = root;
let view;
const svg = d3.select(DOM.svg(width1, height1))
// The viewBox attribute defines the position and dimension, in user space, of an SVG viewport.
.attr("viewBox", `-${width1 / 2} -${height1 / 2} ${width1} ${height1}`)
.style("display", "block")
.style("margin", "0 -14px")
.style("width", "calc(100% + 28px)")
.style("height", "auto")
.style("background", null)
.style("cursor", "pointer")
.on("click", () => zoom(root));
const node = svg.append("g")
.selectAll("circle")
.data(root.descendants().slice(0)) //slice(1) rimuove la root
.join("circle")
.attr("fill", d => d.children ? color(d.depth) : "rgb(30,78,156)")
.attr("pointer-events", d => !d.children ? "none" : null)
.on("mouseover", function() { d3.select(this).attr("stroke", "#000"); })
.on("mouseout", function() { d3.select(this).attr("stroke", null); })
.on("click", d => focus !== d && (zoom(d), d3.event.stopPropagation()));
const label = svg.append("g")
.style("font", "14px sans-serif")
.style("fill", "white")
.attr("pointer-events", "none")
.attr("text-anchor", "middle")
.selectAll("text")
.data(root.descendants())
.join("g")
.classed("labels",true)
.style("fill-opacity", d => d.parent === root ? 1 : 0)
.style("display", d => d.parent === root ? "inline" : "none");
label.append("text")
.text(d => d.data.key)
.attr("dy",-6);
label.append("text")
.text(d => d3.format(",")(d.value))
.attr("dy",+6);
zoomTo([root.x, root.y, root.r * 2]);
function zoomTo(v) {
const k = width1 / v[2];
view = v;
label.attr("transform", d => `translate(${(d.x - v[0]) * k},${(d.y - v[1]) * k})`);
node.attr("transform", d => `translate(${(d.x - v[0]) * k},${(d.y - v[1]) * k})`);
node.attr("r", d => d.r * k);
}
function zoom(d) {
const focus0 = focus;
focus = d;
const transition = svg.transition()
.duration(d3.event.altKey ? 7500 : 750)
.tween("zoom", d => {
const i = d3.interpolateZoom(view, [focus.x, focus.y, focus.r * 2]);
return t => zoomTo(i(t));
});
label
.filter(function(d) { return d.parent === focus || this.style.display === "inline"; })
.transition(transition)
.style("fill-opacity", d => d.parent === focus ? 1 : 0)
.on("start", function(d) { if (d.parent === focus) this.style.display = "inline"; })
.on("end", function(d) { if (d.parent !== focus) this.style.display = "none"; });
}
return svg.node();
}
color = d3.scaleLinear()
.domain([0, 3])
.range(['rgb(197, 234, 252)','rgb(42, 130, 245)' ]);
md`# Aziende che utilizzano inventori italiani `
data7={
let tsv_data7 = await d3.tsv("https://raw.githubusercontent.com/masterbigdata2019/grafoniversita/master/ItalianOrganizations.tsv");
return tsv_data7
}
trace3 = {
return{
y:data7.map(x=>x.Organization),
x:data7.map(x=>x.Cnt),
orientation : 'h',
type: 'bar',
name:'Patents',
marker:{
color:'rgba(158,202,225,0.6)',
line :{
color : 'rgba(158,202,225, 1.0)',
width : 3}
}
}
};
layout3 = {
return{
barmode:'stack',
width:700,
height:500,
paper_bgcolor:'rgba(0,0,0,0)',
plot_bgcolor:'rgba(0,0,0,0)',
margin: {
l:350,
r:50,
b:50,
t:50,
pad:4
}
}};
dataPlot3 = [trace3];
barchart3= {
let div = DOM.element('div')
return Plotly.plot(div,dataPlot3,layout3);
}
md`# Approved vs Not Approved `
data8={
let tsv_data8 = await d3.tsv("https://raw.githubusercontent.com/masterbigdata2019/grafoniversita/master/ApprovedVsNotApproved.tsv");
return tsv_data8
}
trace10 = {
return{
x:data8.map(x=>x.Year),
y:data8.map(x=>x.Approved),
//orientation : 'h',
type: 'bar',
name:'Appproved patents',
marker:{
color:'rgba(0,0,80,1.0)',
line :{
color : 'rgba(0,0,80, 1.0)',
width : 3}
}
}
};
trace20 = {
return{
x:data8.map(x=>x.Year),
y:data8.map(x=>x["Not Approved"]),
//orientation : 'h',
type: 'bar',
name:'Not approved patents',
marker:{
color:'rgba(158,202,225,0.6)',
line :{
color : 'rgba(158,202,225, 1.0)',
width : 3}
}
}
}
dataPlot10 = [trace10, trace20];
layout10 = {
return{
barmode:'stack',
width:900,
height:500,
paper_bgcolor:'rgba(0,0,0,0)',
plot_bgcolor:'rgba(0,0,0,0)',
margin: {
l:50,
r:50,
b:50,
t:50,
pad:4
}
}};
barchart10= {
let div = DOM.element('div')
return Plotly.plot(div,dataPlot10,layout10);
}
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.
