Public
Edited
Apr 4, 2023
chart = {
let size = 500;
let svg = d3.select('#chart')
.attr('width', size)
.attr('height', size);
let thresholds = d3.range(-4, 4, 1);
let contours = d3.contours()
.size([100, 100])
.thresholds(thresholds);
let rosenbrock = data.map(d => d.f);
let contour_groups = contours(rosenbrock);
const projection = d3.geoIdentity()
.fitSize([size, size], contour_groups[1]);
let path = d3.geoPath()
.projection(projection);
let color_scale = d3.scaleLinear()
.domain([-4, 0, 4])
.range(['#FF0000', '#EEEEEE', '#0000FF']);
svg.selectAll("path")
.data(contour_groups)
.enter()
.append('path')
.attr("d", path)
.attr("fill", cg => color_scale(cg.value))
.attr('opacity', 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.
