Information design enthousiast based in Amsterdam. Don't hesitate to get in touch
chart = {
const svg = d3
.create("svg")
.style("background", baseColor)
.style("border", "5px solid #630000")
.attr("viewBox", [0, 0, dimensions.width, dimensions.height]);
// Map
const world = svg.append("g").call(baseMap).attr("opacity", 1);
const borders = svg.append("g").call(borderLines).attr("opacity", 1);
// const paintings = svg
// .selectAll("rect")
// .data(data)
// .join("rect")
// .attr("name", (d) => d.createdIn)
// .attr("x", (d) => d.coordinates[0] - 7 / 2)
// .attr("y", (d) => d.coordinates[1] - 7 / 2)
// .attr("width", 7)
// .attr("height", 7)
// .attr("fill", fillColor)
// .attr("stroke", lineColor)
// .attr("stroke-width", 1);
const X = d3.map(DataYear, (d) => d.xx);
const Y = d3.map(DataYear, (d) => d.yy);
const T = d3.map(DataYear, (d) => d.year);
const I = d3.range(X.length);
const line = d3
.line()
.x((i) => X[i])
.y((i) => Y[i]);
const timeLine = svg
.append("path")
.attr("stroke", lineColor)
.attr("stroke-width", 2)
.attr("opacity", 0)
.attr("stroke-linecap", "round")
.attr("d", line(I));
const dot = svg
.selectAll("circle")
.data(DataYear)
.join("circle")
.attr("r", 4)
.attr("fill", lineColor)
.attr("transform", (d) => `translate(${d.xx}, ${d.yy})`)
.attr("opacity", 0);
const Yearlabel = svg
.selectAll("text")
.data(DataYear)
.join("text")
// .attr("transform", (d) => `translate(${d.xx}, ${d.yy - 25})`)
.attr("opacity", 0)
.attr("text-anchor", "middle")
.attr("text-indent", 10)
.attr("alignment-baseline", "middle")
.attr("stroke", baseColor)
.attr("fill", lineColor)
.attr("paint-order", "stroke")
.attr("stroke-width", 2)
.text((d) => d.year);
d3.forceSimulation(data)
.force(
"x",
d3.forceX((d) => yearScale(d.year))
)
.force("y", d3.forceY(dimensions.height / 2).strength(0.001))
.force(
"collide",
d3
.forceCollide()
.radius((d) => (d3.max([d.width, d.height]) / 2) * 1.8)
.strength(0.6)
)
.stop()
.tick(500);
d3.select("#start").on("click", function () {
world.transition().duration(2000).attr("opacity", 0);
borders.transition().duration(2000).attr("opacity", 0);
timeLine.transition().duration(2000).attr("opacity", 1);
dot
.transition()
.delay(1000)
.transition()
.delay((d, i) => i * 200)
.duration(1000)
.attr("opacity", 1);
Yearlabel.transition()
.delay(1000)
.transition()
.delay((d, i) => i * 200)
.duration(1000)
.attr("opacity", 1);
// paintings
// // .style("fill", (d) => colorScale(d.createdIn))
// .transition()
// .delay(3500)
// .transition()
// .duration(5000)
// // .delay((d, i) => i * 5)
// .ease(d3.easeSinInOut)
// .style("opacity", 1)
// .attr("width", (d) => d.width)
// .attr("height", (d) => d.height)
// .attr("y", (d) => d.y - d.height / 2)
// .attr("x", (d) => d.x - d.width / 2);
// });
d3.select("#spread").on("click", function () {
paintings
.transition()
.duration(2000)
.delay((d, i) => i * 5)
.ease(d3.easeSinOut)
.attr("y", (d) => d.y - d.height / 2)
.attr("x", (d) => d.x - d.width / 2);
});
d3.select("#finish").on("click", function () {
paintings
.transition()
.duration(2000)
.delay((d, i) => i * 5)
.ease(d3.easeBackIn.overshoot(3))
.attr("y", (d) => dimensions.height / 2 - d.width / 2)
.attr("x", (d) => d.x - d.width / 2);
timeLine.transition().duration(2000).attr("opacity", 0);
dot.transition().duration(2000).attr("opacity", 0);
Yearlabel.transition().duration(2000).attr("opacity", 0);
});
return svg.node();
}
import {
dimensions,
data,
cities,
merged,
colorScale,
length,
places,
baseMap,
borderLines,
baseColor,
fillColor,
lineColor
} from "98d9e9c1ccd2ab57"
Scale(1881)
yearScale(1890)
d3.extent(years)
ScaleL = d3
.scaleLinear()
.domain(d3.extent(years))
.range([dimensions.margin.left, dimensions.width - dimensions.margin.right])
Scale = d3
.scaleOrdinal()
.domain(years)
.range([dimensions.margin.left, dimensions.width - dimensions.margin.right])
[dimensions.margin.left, dimensions.width - dimensions.margin.right]
ScaleP = d3
.scalePoint()
.domain(years)
.range([dimensions.margin.left, dimensions.width - dimensions.margin.right])
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.
