map = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
const g = svg.append("g");
// Add Subway Lines
const circuitLine = g.append("g")
.attr("class", "circuit")
.selectAll("path")
.data(centerline.features)
.enter().append("path")
.attr("d", path)
.style("fill", "none")
.style("stroke", "#000")
.style("stroke-width", "2px")
// Display Points
let displayCircuitLinePoints = false;
if (displayCircuitLinePoints) {
svg.selectAll(".point")
.data(centerline.features[0].geometry.coordinates)
.join("circle")
.attr("r", 2)
.attr("transform", function(d) { return 'translate(' + projection(d)[0] + ',' + projection(d)[1] + ')'; });
}
const circle = svg.append("circle")
.attr("r", 10)
.attr("transform", "translate(" + centerline.features[0].geometry.coordinates[0] + ")")
.style("fill", "#E10600")
.style("stroke", "#fff")
.style("stroke-width", "3px")
transition();
function transition() {
circle.transition()
.duration(10000)
.attrTween("transform", translateAlong(circuitLine.node()))
.end()
.then(transition);
}
// Returns an attrTween for translating along the specified path element.
function translateAlong(circuitLine) {
var l = circuitLine.getTotalLength();
return function(d, i, a) {
return function(t) {
var p = circuitLine.getPointAtLength(t * l);
return "translate(" + p.x + "," + p.y + ")";
};
};
}
return svg.node();
}
path = d3.geoPath().projection(projection)
projection = d3.geoMercator()
.fitExtent([[margin.right,margin.top],[width-(margin.right + margin.left),height-(margin.top + margin.top)]],centerline);
margin = ({top: 20, right: 20, bottom: 20, left: 20})
height = 600
centerline = FileAttachment("Nürburgring-Line-2.geojson").json()
d3 = require("d3@6")
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.
