Public
Edited
Nov 4, 2024
3 forks
4 stars
ridgeLine = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
for (var i = 0; i < elevationMatrix.length; i += 10) {
var g = svg.append('g').attr('transform', `translate(0,${y(i)})`);
g.selectAll('path')
.data([elevationMatrix[i]])
.enter()
.append('path')
.attr('stroke', 'black')
.attr('fill', 'none')
.attr('stroke-width', 1.2)
.attr('d', line);
}
return svg.node();
}
ridgeHeight = 25
elevationMatrix = {
const imageWidth = dimensions[0];
const imageHeight = dimensions[1];
let retval = Array(imageHeight)
.fill()
.map(() => Array(imageWidth).fill(0));
for (var i = 0; i < imageHeight; i++) {
for (var j = 0; j < imageWidth; j++) {
var startIndex = (imageWidth * i + j) * 4;
retval[i][j] = chroma.distance(
"#000",
rgbToHex(
imageData.data[startIndex],
imageData.data[startIndex + 1],
imageData.data[startIndex + 2]
)
);
}
}
return retval;
}
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;
}
height = 700
scale = d3
.scaleLinear()
.domain([1, chroma.distance("#fff", "#000")])
.range([ridgeHeight, 1])
chroma = require("chroma-js@1.3.7")
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.
