Public
Edited
Apr 4, 2023
points_and_contours = {
let thresholds = d3.range(0, 1, 1/40);
let contours = d3.contours()
.size([100, 100])
.thresholds(thresholds);
let contour_groups = contours(predictions);
const projection = d3.geoIdentity()
.fitSize([size, size], contour_groups[1]);
let path = d3.geoPath()
.projection(projection);
main.selectAll("path").remove();
main.selectAll("path")
.data(contour_groups)
.enter()
.append('path')
.attr("d", path)
.attr("fill", cg => color_scale(cg.value))
.attr('opacity', .2);
main.selectAll('circle').remove()
let p = main.selectAll('circle')
.data(data)
.enter()
.append('circle')
.attr('cx', d => x1_scale(d.x1))
.attr('cy', d => x2_scale(d.x2))
.attr('r', 3)
.attr('fill', d => d.y == 0 ? 'pink' : 'lightblue')
.attr('stroke', d => d.y == 0 ? 'red' : 'blue')
.attr('stroke-width', 2);
}
color_scale = d3.scaleLinear()
.domain([0, .5, 1])
//.range(['#0000FF', '#EEEEEE', '#FF0000'])
.range(['#FF0000', '#EEEEEE', '#0000FF'])
predictions = density.map(d => d.pred);
n = 100
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.
