md`# Stacked Dots`
md`Piling up dots to represent a particular magnitude or quantity`
{
const width = 800
const height = 400
const svg = d3.create('svg')
.attr("width",width)
.attr("height",height);
const group = svg.append("g")
.attr("transform", "translate(" + (100) + "," + (0) + ")")
const numpitch = 40
for (let i = 0; i < datos.length; i++) {
//--------------------------- Distribution of each term in a 4x4 matrix
const dots = group.append("g")
.attr("transform", function () {
return "translate(" + (numpitch + 120 * i) + "," + (0) + ")rotate(0)";
});
//--------------------------- Calculate the distribution of dots: number, rows, columns, etc...
const balls = datos[i].avgCount * 100
const brack = 10
const filas = balls / brack
const enteros = Math.ceil(balls / brack) - 1
const resto = (filas - enteros) * 10
//--------------------------- Fully filled rows
if (resto >= 0) {
for (let lev = 0; lev < enteros; lev++) {
for (let k = 1; k <= brack; k++) {
dots.append("circle")
.attr("cx", k * 10)
.attr("cy", 300 - lev * 10)
.attr("r", 4)
.attr("opacity", 1)
.attr("fill",d3.rgb(10,255-i*30,255-i*20))
}
}
//--------------------------- Partially filled rows
for (let r = 1; r <= resto; r++) {
dots.append("circle")
.attr("cx", r * 10)
.attr("cy", 300 - (enteros) * 10)
.attr("r", 4)
.attr("opacity", 1)
.attr("fill", d3.rgb(10,255-i*30,255-i*20))
}
}
//--------------------------- Labels associated with each term.
dots
.append("text")
.attr("x", 5)
.attr("y", 335)
.text(function (d) { return datos[i].normalizedQuery.toUpperCase(); })
.attr("font-family", "Gill Sans, Century Gothic, sans-serif")
.attr("font-size", 12)
.attr("opacity", 1)
.style("fill", "black")
dots.append("text")
.attr("x", 5)
.attr("y", 320)
.text(function (d) { return datos[i].avgCount*100; })
.attr("font-family", "Gill Sans, sans-serif")
.attr("font-size", 12)
.attr("text-anchor", "start")
.style("fill", "black")
}
return svg.node();
}
d3 = require("d3@6")
datos = [
{
"normalizedQuery": "lion",
"avgCount": 0.59
},
{
"normalizedQuery": "tiger",
"avgCount": 0.61
},
{
"normalizedQuery": "bear",
"avgCount": 1.0
},
{
"normalizedQuery": "puma",
"avgCount": 0.65
},
{
"normalizedQuery": "lynx",
"avgCount": 0.74
}
]
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.
