New to D3. Messing around and trying things out.
Public
Edited
Nov 19, 2023
1 fork
chart = makeSquares(updateAll(scaleDataDem, 9))
function makeSquares(initialData) {
const updateBtn = document.getElementById("update-btn");
var squareSize = 20;
const nudgeDown = 20;
const nudgeRight = 20;
const titleGap = 5;
const gapBetween = 5;
var halfSquare = squareSize / 2;
var maxCol = 10;
var cur = 0;
var height = 500;
var rows = 28;
const svg = d3.select(DOM.svg(width, height));
const t = svg.transition().duration(750);
var squareGap = squareSize + gapBetween;
// Democrat squares
const drawGraph = (data) => {
const squareUpdate = svg
.selectAll("circle")
.data(data, (d) => d.id)
// .attr("height", squareSize)
// .attr("width", squareSize)
.call((update) =>
update
.transition()
.duration(750)
.style("fill", (d) => colorScaleDemToRep(d.color))
.attr("cx", (d) => d.row * squareGap + nudgeDown)
.attr("cy", (d) => d.col * squareGap + nudgeDown)
);
const squareEnter = squareUpdate
.enter()
.append("circle")
.attr("class", "grid-object")
.attr("r", squareSize / 2)
// .attr("height", squareSize)
// .attr("width", squareSize)
.style("fill", (d) => colorScaleDemToRep(d.color))
.style("stroke", "black")
.style("stroke-width", 0)
.attr("cx", (d) => randomIntFromInterval(nudgeRight, width / 2 - 20))
.attr("cy", (d) => randomIntFromInterval(nudgeDown, height / 2 - 20))
//.attr("class", "scale-dem")
.call((enter) =>
enter
.transition(t)
.attr("cx", (d) => d.row * squareGap + nudgeDown)
.attr("cy", (d) => d.col * squareGap + nudgeDown)
);
const squareExit = squareUpdate
.exit()
.call((exit) => exit.transition(t).attr("y", -30).remove());
//await Promises.tick(2000);
};
drawGraph(initialData);
// Simulate an enter pattern
updateBtn.addEventListener("click", () => {
// Remove the elements before we draw again so we can see the enter pattern
// console.log("redraw", randomIntFromInterval(4, 10));
cur = notCurrentRand(8, rows, cur);
drawGraph(updateRowCol(initialData, cur));
});
return svg.node();
}
function notCurrentRand(min, max, cur) {
while (true) {
var num = randomIntFromInterval(min, max);
if (num != cur) {
console.log("new", num, "cur", cur);
return num;
}
}
}
function randomIntFromInterval(min, max) {
// min and max included
return Math.floor(Math.random() * (max - min + 1) + min);
}
function randVotePerc() {
// min and max included
return Math.random();
}
function rowAndCol(num, width) {
var row = Math.floor(num / width);
var temp = row * width;
var column = num - temp;
// returns the coordinates for where it should be starting at [1,1]
return [column, row];
}
function updateAll(data, num) {
var data2 = [];
for (const d in data) {
var temp = {
id: "data" + `${d}`,
row: rowAndCol(d, num)[0],
col: rowAndCol(d, num)[1],
color: 0
};
data2[d] = temp;
}
return data2;
}
function updateRowCol(data, num) {
for (const d in data) {
data[d].row = rowAndCol(d, num)[0];
data[d].col = rowAndCol(d, num)[1];
data[d].color = randVotePerc();
}
var data = data.slice().sort((a, b) => d3.descending(a.color, b.color));
for (const d in data) {
data[d].row = rowAndCol(d, num)[0];
data[d].col = rowAndCol(d, num)[1];
}
return data;
}
colorScaleDemToRep = d3
.scaleLinear()
.domain([0, 1])
.range(["#0571b0", "#cc3c28"])
//"#82a6c7", "#0571b0"
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.
