Notebooks 2.0 is here.
data = await d3.csv("https://raw.githubusercontent.com/Danyyy89/Hello-world/master/25globalmostcommonwords.csv")
//viewof f = html`<input type=file accept="text/*">`
//data = d3.csvParse(await Files.text(f))
wordCloud = {
let height = 800;
// let width = 1519;
// create the SVG container
let svg = d3.select(html`<svg></svg>`)
.attr('width', width)
.attr('height', height);
var restart = function() {
simulation
.restart()
}
var colors = d3.schemeSet1
.slice(0, new Set(data.map(d=> d.caso)).size)
// define scale for radius
const r = d3.scaleSqrt()
.domain([0, d3.max(data, d => d.frequenza)])
.range([5, 20]);
// define the simualtion engine
const simulation = d3.forceSimulation(data)
.force("x", d3.forceX().strength(0.001)) // increasing this value place bubbles forcing a vertcial placement
.force("y", d3.forceY().strength(0.1))
.force("collide", d3.forceCollide().radius(d=> r(d.frequenza) + 0.5).iterations(2))
.force('center', d3.forceCenter(width/2, 3*height/4))
// create a layer or group
let gBubble = svg
.selectAll('g.station')
.data(data);
gBubble.exit().remove();
let bubble = gBubble.enter()
.append('g')
.classed('gBubble', true)
.attr('id',d => d.parola);
bubble
.append('circle')
.attr('r', d => r(d.frequenza))
.attr('fill', d => colors[+d.caso])
.attr('fill-opacity', 0.4)
.attr('stroke', d => colors[+d.caso])
.attr('stroke-width', 1)
let text= bubble
.append('text');
const textLabels = text
.text( d => (d.parola))
.style('text-anchor','middle')
.attr('font-family', 'sans-serif')
.attr('font-size', d => r(d.frequenza)/2+'px')
.attr('font-weight','normal')
.attr('fill', 'dimgray')
.on('mouseover', function(d,i) {
let size = d3.select(this).attr('font-size');
d3.select(this)
.attr('font-size', 40)
.attr('fill','black')
.style("cursor", "pointer")
})
.on('mouseout', function(d,i) {
d3.select(this)
.attr('font-size', d => r(d.frequenza)/2+'px')
.attr('fill','dimgray')
.style("cursor", "default")
});
gBubble = gBubble
.merge(bubble);
gBubble.call(drag(simulation));
simulation.on('tick', () => {
gBubble
.attr('transform', d => 'translate('+ (d.x) +','+ (d.y)+')');
})
return svg.node();
}
colors = d3.schemeSet1
.slice(0, new Set(data.map(d=> d.caso)).size)
lista = data.map(d=> d.caso)
insieme = new Set(lista)
insieme.size
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.
