chart = {
const width = 1920 // uncomment for responsive width
const height = 1200;
const cr = 10;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("width", width)
.attr("height", height)
.attr("style", "max-width: 100%; height: auto;");
const addRow = (n) => {
const x = width/2 - (n-1) * cr;
const y = 3*cr+ (n-1)*Math.sqrt(3)*cr
const newCoords = [];
const index = parseInt(Math.random() * n);
//const index = 2*(n - 2**parseInt(Math.log2(n)));
for(let i=0; i<n; i++){
newCoords.push([x + 2*cr*i, y, (i == index) ? "red" : "white"])
}
svg
.selectAll(".circle-row-"+n)
.data(newCoords)
.join("circle")
.classed(".circle-row-"+n,true)
.attr("cx", d => d[0])
.attr("cy", d => d[1])
.attr("r", cr)
.attr("fill", d=> (d[2] == "red") ? "red" : "white")
.attr("stroke","black")
.attr("cursor","pointer")
.on("click",changeColor);
}
//[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16].map(addRow)
[...Array(101).keys()].map(addRow)
setTimeout(
()=>{const circles = document.querySelectorAll('.circle-row-3');
svg.selectAll('.circle-row-3')
.style("fill",d=>{console.log('gtocha')})
}
,1000)
function changeColor(event) {
const circle = event.target;
const currentColor = circle.getAttribute("fill");
if(currentColor === "white"){
circle.setAttribute("fill", "red");
}
else{
circle.setAttribute("fill", "white");
}
}
return svg.node();
}
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.
