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);
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.