Published
Edited
Oct 16, 2018
2 forks
4 stars
htmlSpace = html
`<div id="htmlSpace"></div>`
tooltip = d3.select('#htmlSpace').append('div').attr("class","tooltip").style("opacity",0)
svg_location = "#htmlSpace"
md ` # Definición de escala para utilizar los colores del esquema`
fill = d3.scaleOrdinal(schemeCategory10)
howManyWords = function(){
let total = word_entries.length;
let percent = Math.floor(total * resalted);
return percent;
}
draw = (words) => {
let count = percent;
d3.select(svg_location).append("svg")
.attr("width", (width+10)+"px")
.attr("height", (height+10)+"px")
.attr("preserveAspectRatio", "xMinYMin meet")
.attr("viewBox", `0 0 ${width+10} ${height+10}`)
.append("g")
.attr("transform", "translate(" + [width >> 1, height >> 1] + ")")
.attr("transform", "translate(" + (width / 2 + 20) + "," + (height / 2 + 20) + ")")
.selectAll("text")
.data(words)
.enter().append("text")
.style("font-size", function(d) { return xScale(d.value) + "px"; })
.style("font-family", "Open sans")
.attr("class", "words")
.style("fill", function(d, i) { return fill(i); })
.attr("text-anchor", "middle")
.attr("class", function(d) {
if (count >= 1) {
count -=1;
return "word main"
}
else {
return "word"
}
})
.attr("transform", function(d) {
return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
})
.text(function(d,i) { return d.key; })
.on("mouseover", (d) => {
tooltip.transition()
.duration(50)
.style("class", "word-description")
.style("opacity", 1)
tooltip .html('<p>'+ d.key + '</p><p class="value">ocurrencia:'+ d.value + '</p>')
.style("left", d3.event.pageX - 50 + "px")
.style("top", (d3.event.pageY - (height + 150)) + "px")
.style("display", "inline-block")
})
.on("mouseout", handleMouseOut);
}
layout = cloud().size([width, height])
.timeInterval(20)
.words(word_entries)
.rotate(function(){return 0;})
.fontSize(function(d) { return xScale(+d.value); })
.text(function(d) {
return d.key;})
.font("Open sans")
.on("end", draw)
.start()
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.
