Published
Edited
Mar 27, 2021
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));

console.log(color.domain());

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) + 6)
.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.count > s) {
return "#999";
} else {
return "#EEE";
}
});

const label = svg
.append("g")
.selectAll("text")
.data(data)
.join("text")
.filter(d => +d.count > s)
.text(d => d.sound)
.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.tsv(
"https://gist.githubusercontent.com/andreabenedetti/dc660146db4c67e0eea0d6c0823a865c/raw/c2a3e4a8e0a0c6c722d1485ad182bed1f24d3471/biden-2021.tsv"
)
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