Information design enthousiast based in Amsterdam. Don't hesitate to get in touch
Public
Edited
Jun 29, 2023
chart = {
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, dimensions.width, dimensions.height]);
const paintings = svg
.selectAll("rect")
.data(data)
.join("rect")
.attr("width", (d) => PaintingScaler(d.width))
.attr("height", (d) => PaintingScaler(d.height))
.attr("x", (d) => xScale(d.x) - PaintingScaler(d.width) / 2)
.attr("y", (d) => yScale(d.y) - PaintingScaler(d.height) / 2)
.attr("opacity", 1);
return svg.node();
}
d3
.forceSimulation(data)
.force("x", d3.forceX().strength(0.002))
.force("y", d3.forceY().strength(0.002))
.force("collide", forceCollide)
.force("radial", forceRadial)
.force("center", forceCenter)
// .force("n-body", forceManybody)
.stop()
.tick(1000)
xScale(20)
forceRadial = d3.forceRadial(86, dimensions.width / 2, dimensions.height / 2)
1152 / 2
dimensions.height / 2
xScale = d3
.scaleLinear()
.domain(d3.extent(data.map((d) => d.x)))
.range([dimensions.margin.left, dimensions.width - dimensions.margin.right])
yScale = d3
.scaleLinear()
.domain(d3.extent(data.map((d) => d.y)))
.range([dimensions.height - dimensions.margin.bottom, dimensions.margin.top])
data = (await FileAttachment("vincentPos2.csv").csv({ typed: true }))
.filter((d) => d.width > 0)
.filter((d) => d.created_in == "Auvers-sur-Oise")
data
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.
