temp = Array(
{name : "Innovation", url: "https://www.nytimes.com/", n: 4333,c:2},
{name : "Community Building", url: "https://www.opensubtitles.org/it/it" , n: 1000,c:5},
{name: "Technology", url: "https://www.rottentomatoes.com/", n: 500,c:4},
{name : "Poverty Alleviation", url: "https://www.imdb.com/", n: 1100, c:1 },
{name: "Entrepreneurship", url: "https://www.the-numbers.com/" , n: 900,c:2},
{name: "Collaboration", url: "https://trends.google.it/trends/", n: 900,c:3},
{name: "Social Integration", url: "https://www.boxofficemojo.com/" , n: 300,c:0},
{name: "Fund", url: "https://www.boxofficemojo.com/" , n: 300,c:0},
{name: "Well-being", url: "https://www.boxofficemojo.com/" , n: 300,c:4},
{name: "Social enterprises", url: "https://www.boxofficemojo.com/" , n: 400,c:1},
{name: "Hong Kong", url: "https://www.boxofficemojo.com/" , n: 400,c:5},
{name: "Investment", url: "https://www.boxofficemojo.com/" , n: 400,c:5},
{name: "Empowerment", url: "https://www.boxofficemojo.com/" , n: 500,c:3},
{name: "Impact data", url: "https://www.boxofficemojo.com/" , n: 200,c:5},
{name: "Impact", url: "https://www.boxofficemojo.com/" , n: 400,c:4},
{name: "Research", url: "https://www.boxofficemojo.com/" , n: 1000,c:4},
{name: "Incubation", url: "https://www.boxofficemojo.com/" , n: 300,c:3},
{name: "Development", url: "https://www.boxofficemojo.com/" , n: 300,c:2},
{name: "Capacity Building", url: "https://www.boxofficemojo.com/" , n: 1400,c:2},
)
bolle = wordCloud(temp,'name','url','n',120,'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])/2.6)
//.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
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.