Public
Edited
Sep 27, 2023
2 forks
2 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
chart = {
const svg = d3.select(DOM.svg(width, height));

size.domain(d3.extent(data, (d) => +d.count));
color.domain(d3.extent(data, (d) => +d.posts));

const simulation = d3
.forceSimulation(data)
/*.force(
"center",
d3
.forceCenter()
.x(width / 2)
.y(height / 2)
)*/
.force("charge", d3.forceManyBody().strength(3))
//.force("pet", d3.forceManyBody().strength(-1))
.force(
"collision",
d3
.forceCollide()
.radius((d) => size(d.count) + 4)
.iterations(5)
)
.alpha(1);

const node = svg
.append("g")
.selectAll("circle")
.data(data)
.join("circle")
.attr("cx", width / 2)
.attr("cy", height / 2)
.attr("r", (d) => size(d.count))
.attr("fill", (d) => color(d.posts))
.attr("stroke", (d) => {
if (d.posts > s) {
return "#999";
} else {
return "#EEE";
}
});

const label = svg
.append("g")
.selectAll("text")
.data(data)
.join("text")
.filter((d) => +d.posts > s)
.text((d) => d.soundbyte)
.attr("font-size", 11)
.attr("text-anchor", "middle");

simulation.on("tick", () => {
label.attr("x", (d) => d.x).attr("y", (d) => d.y);
node.attr("cx", (d) => d.x).attr("cy", (d) => d.y);
});

invalidation.then(() => simulation.stop());

return svg.node();
}
Insert cell
fill = "#eef473"
Insert cell
height = 1000
Insert cell
data = d3.csv(
"https://gist.githubusercontent.com/andreabenedetti/413ce0dde9a69abd12a3f725ace7b1f4/raw/1650f302ec4daad287bfe88363bc1a2827cc3485/maga-2020.csv"
)
Insert cell
size = d3.scaleSqrt()
.range([b, t])
Insert cell
color = d3.scaleLinear().range(["#FFFFFF", fill])
Insert cell
d3 = require("d3@5", "d3-array@2")
Insert cell
import {slider} from '@jashkenas/inputs'
Insert cell

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.
Learn more