pointmap = {
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("background", "white");
for (var i = 0; i < elevationMatrix.length; i += 20) {
var g = svg.append("g").attr("transform", `translate(0,${y(i)})`);
const subset = elevationMatrix[i].filter((d, i) => i % step == 0);
g.selectAll("circle")
.data(subset)
.enter()
.append("circle")
.attr("stroke", "none")
// .attr("fill", (d) => colorScale(d))
.attr("fill", "black")
.attr("cx", (d, i) => x(i * step))
.attr("opacity", (d) => opacityScale(d))
.attr("cy", 5)
.attr("r", (d, i) => {
if (d < 1) return 0;
else return scale(d);
});
}
return svg.node();
}
step = 20
ridgeHeight = 7
colorScale = d3
.scaleSequential()
.domain([2, 5])
.interpolator(d3.interpolateGreys)
scale = d3
.scaleLinear()
// .scaleLog()
// .scaleLog()
//.domain([0, chroma.deltaE('#fff', '#000')])
.domain([1, chroma.distance("#fff", "#000")])
// .range([ridgeHeight, 1])
.range([2, ridgeHeight])
opacityScale = d3
.scaleLinear()
.domain([1, chroma.distance("#fff", "#000")])
.range([0.5, 1.5])
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.
