ridgeLine = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
let nbColor = 10;
let linearGradient = svg
.append("linearGradient")
.attr("id", "Gradient2")
.attr('gradientUnits', "userSpaceOnUse")
.attr("x1", "0")
.attr("x2", "0")
.attr("y1", 25)
.attr("y2", 0);
linearGradient
.selectAll("stop")
.data(d3.range(nbColor).reverse())
.join("stop")
.attr("offset", (d, i) => `${i / (nbColor - 1)}`)
.attr("stop-color", (d, i) =>
interpolator(invertColor ? 1 - i / (nbColor - 1) : i / (nbColor - 1))
);
for (var i = 0; i < elevationMatrix.length; i += 7) {
var g = svg.append('g').attr('transform', `translate(0,${y(i)})`);
g.selectAll('.lines')
.data([elevationMatrix[i]])
.enter()
.append('path')
.attr('class', 'lines')
.attr('stroke', 'black')
.attr('fill', 'none')
.attr('stroke-width', 1.2)
.attr('d', line);
g.selectAll('.areas')
.data([elevationMatrix[i]])
.enter()
.append('path')
.attr('class', 'areas')
.attr("fill", "url(#Gradient2)")
.attr("opacity", opacity)
.attr("d", (d, i) => area(d));
}
return svg.node();
}
opacity = 1
overlap = 6
import { viewof colorInterpolatorPicker } from '@zechasault/color-schemes-and-interpolators-picker'
function blobToFile(theBlob, fileName) {
//A Blob() is almost a File() - it's just missing the two properties below which we will add
theBlob.lastModifiedDate = new Date();
theBlob.name = fileName;
return theBlob;
}
area = d3
.area()
.curve(d3.curveBasis)
.x((d, i) => x(i))
.y0(scale(0))
.y1(d => scale(d))
.defined(d => d > 1)
line = d3
.line()
.x((d, i) => x(i))
.y(d => scale(d))
.defined(d => d > 1)
.curve(d3.curveBasis)
height = 700
scale = d3
.scaleLinear()
// .scaleLog()
// .scaleLog()
//.domain([0, chroma.deltaE('#fff', '#000')])
.domain([1, chroma.distance('#fff', '#000')])
.range([ridgeHeight, 1])
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.
