Published
Edited
Jun 27, 2019
2 stars
md`## Layout variables`
height = 1400
md`## Patents clustered data`
rawData = d3.csv('https://raw.githubusercontent.com/PaganelliL/progettoneP/master/clusterD2V_KMxLP.csv').then(
function(data) {
data.forEach(function(d) {
d['Anno']= +d['anno'],
d['Parola']= d['words'],
d['Cluster']= +d['cluster']
})
return data
})
sortedData = rawData.sort(function(a, b) {
return d3.ascending(a.Anno, b.Anno) || d3.ascending(a['Cluster id'], b['Cluster id']);
});
ext = ({
years: d3.extent(sortedData,d=>+d.Anno),
clusters: d3.extent(sortedData, d => +d.Cluster)
})
md`## Scales`
xScale = d3.scaleLinear()
.domain(ext.years)
.range([0+ margin.l, width - margin.r]);
xScale(2016)
yScale = d3.scaleLinear()
.domain(ext.clusters)
.range([0+ margin.t, height - margin.t - margin.b]);
yScale(4)
clustersGRAPH = wordCloud(sortedData,'Parola',20,'Cluster','Anno')
// declare type column only if you have a label you want to use to color bubbles
wordCloud = (data,word,frequency,type,year) => {
if (type===undefined) {
data.map(d => d.type = 0)
}
const radius = 20
const padding = 2;
// create the SVG container
let svg = d3.select(html`<svg></svg>`)
.attr('width', width)
.attr('height', height);
const colors = d3.schemeSet1
.slice(0,new Set(data.map(d=> d[type])).size)
// color text black or white according to the luminance value of the node
const luminance = 50;
const textColor = d3.scaleQuantile().range(["#fff", "#000"]).domain([0, luminance, 100]);
const simulation = d3.forceSimulation(data)
.force("x", d3.forceX(d => xScale(d[year])).strength(1))
.force("y", d3.forceY(d => yScale(d[type])).strength(1))
.force("collide", d3.forceCollide().radius(d=> radius + padding).iterations(50))
.alpha(0.5)
.restart()
// create a layer or group
let gBubble = svg
.selectAll('gBubble')
.data(data);
gBubble.exit().remove();
let bubble = gBubble.enter()
.append('g')
.classed('gBubble', true)
.attr('id',d => d[word]);
bubble
.append('circle')
.attr('r', d => radius)
.attr('fill', d => colors[+d[type]])
.attr('fill-opacity', 0.4)
.attr('stroke', d => colors[+d[type]])
.attr('stroke-width', 1)
let text= bubble
.append('text');
const textLabels = text
.text( d => (d[word]))
.style('text-anchor','middle')
.attr("dominant-baseline", "central")
.attr('pointer-events','none')
.attr('font-family', 'sans-serif')
.attr('font-size', '12px')
.attr('font-weight','normal')
.attr('fill', d => textColor(d3.hcl(colors[+d[type]]).l))
gBubble = gBubble
.merge(bubble);
gBubble.call(drag(simulation));
simulation.nodes(data)
.on('tick', () => {
gBubble
.attr('transform', d => 'translate('+ (d.x) +','+ (d.y)+')');
})
//axis
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
;
return Object.assign(svg.node());
}
x = d3.scaleLinear()
.domain(ext.years)
.range([margin.l, width - margin.r])
xAxis = g => g
.attr("transform", `translate(0,${height - margin.b})`)
.call(d3.axisBottom(x).ticks(ext.years[1]-ext.years[0]))
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]))
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.
