linearInterpolator = d3.interpolateBasis([0, 0.5, 1])
d3.quantize(linearInterpolator, 11).map(d => +d.toFixed(3))
convexInterpolator = d3.interpolateBasis([0, 0.1, 0.4, 1])
d3.quantize(convexInterpolator, 11).map(d => +d.toFixed(3))
bumpyInterpolator = d3.interpolateBasis([0, 0.5, 1, 0.5, 0, 0.5, 1])
d3.quantize(bumpyInterpolator, 11).map(d => +d.toFixed(3))
chart([["random", d3.interpolateBasis(Array.from({length: 40}, Math.random))]])
gps = ({
type: "LineString",
coordinates:[
[-4.34440,55.84040], [-4.33269,55.83727], [-4.33019,55.83633],
[-4.32485,55.83599], [-4.31886,55.83803], [-4.31525,55.83937],
[-4.30817,55.84074], [-4.30378,55.84262], [-4.30016,55.84460]
]
})
map(gps, { type: "MultiPoint", coordinates: gps.coordinates }) // map() is defined in the Annex
spline = {
const n = 40,
lon = d3.interpolateBasis(gps.coordinates.map(d => d[0])),
lat = d3.interpolateBasis(gps.coordinates.map(d => d[1]));
return {
type: "LineString",
coordinates: d3.zip(d3.quantize(lon, n), d3.quantize(lat, n))
};
}
map(spline, { type: "MultiPoint", coordinates: gps.coordinates })
loop = ({
type: "MultiPoint",
coordinates: [
[-4.32025, 55.84401], [-4.33209, 55.84511], [-4.34441, 55.84045],
[-4.33269, 55.83727], [-4.33019, 55.83633], [-4.32485, 55.83599],
[-4.31886, 55.83803], [-4.31525, 55.83937], [-4.30817, 55.84074],
[-4.30378, 55.84262], [-4.30016, 55.84461], [-4.31256, 55.84501]
]
})
splineClosed = {
const n = 150 /* more upsampling is needed as the line makes sharp turns */,
lon = d3.interpolateBasisClosed(loop.coordinates.map(d => d[0])),
lat = d3.interpolateBasisClosed(loop.coordinates.map(d => d[1]));
return {
type: "LineString",
coordinates: d3.zip(d3.quantize(lon, n), d3.quantize(lat, n))
};
}
map(splineClosed, loop)
height = 380
projection = d3.geoMercator().fitExtent([[20, 0], [width - 20, height]], gps)
function map(line, points) {
const context = DOM.context2d(width, height),
path = d3.geoPath(projection).context(context);
context.beginPath();
path(line);
context.lineWidth = 3;
context.stroke();
context.beginPath();
path(points);
context.lineWidth = 3;
context.fillStyle = "white";
context.fill();
context.stroke();
return context.canvas;
}
function chart(interpolators) {
const samples = 300,
w = Math.min(width, 600),
h = 250,
chart = d3
.create("svg")
.attr("width", w)
.attr("height", h),
x = d3.scaleLinear().range([w * 0.05, w * 0.875]),
y = d3.scaleLinear().range([h * 0.9, h * 0.05]),
line = d3
.line()
.x((_, i) => x(i / samples))
.y(y);
let l = 0;
for (const [name, interpolator] of interpolators) draw(interpolator, name);
chart
.append("g")
.attr("transform", `translate(0,${y(0)})`)
.call(d3.axisBottom(x))
.append("text")
.attr("transform", `translate(${x(1)}, -5)`)
.attr("fill", "black")
.attr("font-style", "italic")
.text("t");
chart
.append("g")
.attr("transform", `translate(${x(0)},0)`)
.call(d3.axisLeft(y))
.append("text")
.attr("transform", `translate(5, ${y(1) + 5})`)
.attr("text-anchor", "start")
.attr("fill", "black")
.attr("font-style", "italic")
.text("value");
return chart.node();
function draw(interpolator, name) {
chart
.append("path")
.attr("fill", "none")
.attr("stroke", color(name))
.attr("d", line(d3.quantize(interpolator, 1 + samples)));
chart
.append("text")
.style("font-family", "sans-serif")
.style("font-size", "12px")
.attr("text-anchor", "end")
.text(name)
.attr("fill", color(name))
.attr("dx", w - 1)
.attr("dy", 16 * (0.6 + l++));
}
}
color = d3.scaleOrdinal(d3.schemeSet1)
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.
