temp = Array({name : "Fund", url: "https://www.imdb.com/", n: 3000, c:1 },
{name : "Innovation", url: "https://www.nytimes.com/", n: 2000,c:2},
{name : "Hong Kong", url: "https://www.opensubtitles.org/it/it" , n: 600,c:3},
{name: "Technology", url: "https://www.rottentomatoes.com/", n: 300,c:4},
{name: "Wellbeing", url: "https://www.wikidata.org/wiki/Wikidata:Main_Page" , n: 300,c:5},
{name: "Entrepreneurship", url: "https://www.the-numbers.com/" , n: 200,c:6},
{name: "SIEF", url: "https://trends.google.it/trends/", n: 400,c:8},
{name: "Project", url: "https://www.boxofficemojo.com/" , n: 300,c:0}
)
bolle = wordCloud(temp,'name','url','n',150,'c')
// qui dovete aggiungere "c", in fondo alla funzione per assegnare il colore in base al valore di "c" (vedi i parametri descritti qui di seguito)
wordCloud = (data,word,url,frequency,maxSize,type) => {
const height = 500;
// create the SVG container
let svg = d3.select(html`<svg></svg>`)
.attr('width', width)
.attr('height', height);
const colors = d3.schemePaired
.slice(0,new Set(data.map(d=> d[type])).size-1)
// qui definisco una funzione che serve a prendere da una palette colori (ad esempio schemeSet1) un elenco di colori pari alla lunghezza della lista degli elementi unici presenti nella variabile "c"
// define scale for radius
const r = d3.scaleSqrt()
.domain([0, d3.max(data, d => d[frequency])])
.range([0, maxSize]);
// define the simualtion engine
const simulation = d3.forceSimulation(data)
.force("x", d3.forceX().strength(0.008)) // increasing this value place bubbles forcing a vertcial placement
.force("y", d3.forceY().strength(0.05))
.force("collide", d3.forceCollide().radius(d=> r(d[frequency]) + 0.5).iterations(2))
.force('center', d3.forceCenter(width/2, height/2))
// 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 => r(d[frequency]))
.attr('fill', d => colors[+d[type]])
.attr('fill-opacity', 0.2)
.attr('stroke', d => colors[+d[type]])
.attr('stroke-width', 1)
.attr('cursor','pointer') // quando passo sopra la bubble cambio il cursore in pointer
.on("click", d => window.open(d.url) ); // Quando cliccato apre il link indicato nel campo 'url' dei dati.
let text= bubble
.append('text');
const textLabels = text
.text( d => (d[word]))
.style('text-anchor','middle')
.attr("dominant-baseline", "central")
.attr("font-family", "Roboto, sans-serif")
.attr('fill', d => colors[+d[type]])
.attr('stroke',d => colors[+d[type]])
.attr('stroke-width', 1)
//.attr("fill", "white")
//.attr('font-family', 'sans-serif')
.attr('font-size', d => r(d[frequency]))
//.attr('r', d => r(d[frequency]))
.attr('font-weight','normal')
.attr('cursor','pointer') // ripeto il codice scritto a bubble per assegnare lo stesso comportamento anche al testo
.on("click", d => window.open(d.url) ); // Quando cliccato apre il link indicato nel campo 'url' dei dati.
gBubble = gBubble
.merge(bubble);
gBubble.call(drag(simulation));
simulation.on('tick', () => {
gBubble
.attr('transform', d => 'translate('+ (d.x) +','+ (d.y)+')');
})
return svg.node();
}
d3.schemeAccent
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.
