Published
Edited
Jul 9, 2019
2 stars
md`## Layout variables`
margin = ({
t:70,
l: 100,
r: 100,
b: 70,
})
md`## Patents clustered data`
rawData = d3.csv('https://raw.githubusercontent.com/PaganelliL/progettoneP/master/finalLabelRidNewCSVFINAL.csv').then(
function(data) {
data.forEach(function(d) {
d['Anno']= +d['anno'],
d['Parola']= d['words'],
d['Cluster']= +d['cluster'],
d['Npat']= +d['Npat']
})
return data
})
sortedData = rawData.sort(function(a, b) {
return d3.ascending(a.Anno, b.Anno) || d3.ascending(a['Cluster'], b['Cluster']);
});
rawD1 = sortedData.filter(function (d) {return d['Anno']<2012;});
rawD2 = sortedData.filter(function (d) {return d['Anno']>=2012 && d['Anno']<2016;});
rawD3 = sortedData.filter(function (d) {return d['Anno']>=2016;});
md`## Scales`
ext3 = ({
years: d3.extent(rawD3,d=>+d.Anno),
clusters: d3.extent(rawD3, d => +d.Cluster),
Npat: d3.extent(rawD3, d => +d.Npat)
})
xScale3 = d3.scaleLinear()
.domain(ext3.years)
.range([0+ margin.l, width - margin.r]);
// rScale = d3.scaleLinear()
// .domain(ext1.Npat)
// //.range([20.0, 60.0]);
// .range([15.0, 45.0]);
rScale = d3.scaleSqrt()
.domain(ext1.Npat)
//.range([20.0, 60.0]);
.range([15.0, 30.0]);
//.range([7.0, 15.0]);
//colors = d3.schemeSet1.slice(0, new Set(rawData.map(d=> d['Cluster'])).size)
colors = d3.scaleOrdinal().domain(d3.extent(rawData, d => +d.Cluster)).range(d3.schemeSet3);
//colors=d3.schemePaired
//colors = d3.interpolatePRGn(d3.extent(rawData,d=>+d.Anno))
colors
plotGRAPH1 = wordCloud(rawD1, xScale1, xAxis1, 'Parola','Cluster','Anno')
// declare type column only if you have a label you want to use to color bubbles
plotGRAPH2 = wordCloud(rawD2, xScale2, xAxis2, 'Parola','Cluster','Anno')
plotGRAPH3 = wordCloud(rawD3, xScale3, xAxis3, 'Parola','Cluster','Anno')
width=730
x1 = d3.scaleLinear()
.domain(ext1.years)
.range([margin.l, width - margin.r])
x2 = d3.scaleLinear()
.domain(ext2.years)
.range([margin.l, width - margin.r])
x3 = d3.scaleLinear()
.domain(ext3.years)
.range([margin.l, width - margin.r])
xAxis1 = g => g
.attr("transform", `translate(0,${height - margin.b})`)
.call(d3.axisBottom(x1).ticks(ext1.years[1]-ext1.years[0]).tickFormat(d3.format("d")))
xAxis2 = g => g
.attr("transform", `translate(0,${height - margin.b})`)
.call(d3.axisBottom(x2).ticks(ext2.years[1]-ext2.years[0]).tickFormat(d3.format("d")))
xAxis3 = g => g
.attr("transform", `translate(0,${height - margin.b})`)
.call(d3.axisBottom(x3).ticks(ext3.years[1]-ext3.years[0]).tickFormat(d3.format("d")))
y = d3.scaleBand()
.domain(sortedData.map(d => d.Cluster))
.range([height - margin.b, 0])
// yAxis = g => g
// .attr("transform", `translate(${margin.l},0)`)
// .call(d3.axisLeft(y).ticks(ext.clusters[1]-ext.clusters[0]))
// //.call(d3.axisLeft(y).ticksize(0))
gData=d3.nest()
.key(d => d.Parola)
.key(d => d.Anno)
.rollup(v => d3.sum(v, e => +e.Cluster))
.entries(sortedData)
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.
