//viewof z = Inputs.Range([0, 5], { step: 0.001, label: "z" })
makeSimplexContours({grayscale: true})
contours = d3
.contourDensity()
.x(d => d.x)
.y(d => d.y)
.size([width, width + 100])
.thresholds(thresholds)
.weight(d => d.value * valueWeight)(data.filter(d => d.value > valueFilter))
function makeSimplexCircles() {
let svg = d3
.create("svg")
.attr("width", width)
.attr("height", width / 2);
let leaf = svg.selectAll("g").data(data);
leaf
.join("circle")
.attr('fill', (d, i) => {
if (d.value > valueFilter) {
return 'black';
} else {
return 'red';
}
})
.attr('r', (d, i) => d.value * 10)
.attr("transform", (d, i) => `translate(${d.x},${d.y})`);
// leaf
// .join("text")
// .text(d => d.value)
// .style('fill', 'white');
return svg.node();
}
function makeSimplexContours(config) {
if (!config) config = {};
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", width / 2)
.style("background-color", () => {
if (config.grayscale) return 'black';
});
const color = d3
.scaleSequential(d3.interpolateOrRd)
.domain([1, contours.length]);
svg
.append("g")
// .attr("fill", "none")
// .attr("stroke-opacity", "0")
// .attr("stroke-linejoin", "round")
.selectAll("path")
.data(scaleContour(contours, pixelScale))
.enter()
.append("path")
.style("transition", "all 100ms ease-in")
.attr("d", d3.geoPath())
.style("fill", (d, i) => {
if (config.grayscale) {
return 'black';
} else {
return color(i);
}
})
.style("stroke", 'white');
// .style("fill", 'red');
return svg.node();
}
d3 = require("d3@6", "https://files-5ouswn75j.vercel.app/d3-contour.js")
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.
