Published
Edited
Jul 5, 2022
3 stars
Insert cell
Insert cell
kde = require('fast-kde')
Insert cell
d3hsv = require('d3-hsv')
Insert cell
Insert cell
Insert cell
density1d = kde.density1d(values1d, { bandwidth: 3, pad, bins })
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
density2d = kde.density2d(values2d, { bandwidth: 1 })
Insert cell
heatmaps = FileAttachment("heatmaps-grp@1.csv").csv({typed: true})
Insert cell
saturation = kde.density2d(heatmaps.filter((_) => Boolean(_.saturation)), {x: 'saturation', y: 'y',weight: 'x', pad: 1, bins: [1024, 512]});
Insert cell
Insert cell
Insert cell
i0 = d3hsv.interpolateHsvLong(d3hsv.hsv(d3.color('#212165')), d3hsv.hsv(d3.color('#21FF01')));
Insert cell
i1 = d3hsv.interpolateHsvLong(d3hsv.hsv(d3.color('#21FF01')), d3hsv.hsv(d3.color('#FF1001')));
Insert cell
i2 = d3hsv.interpolateHsvLong(d3hsv.hsv(d3.color('#21216500')), d3hsv.hsv(d3.color('#212165')));
Insert cell
interpolateTerrain = (t) => {
if(t < 0.05) {
return i2(t * 20)
}
return t < 0.5 ? i0(t * 2) : i1((t - 0.5) * 2)
};

Insert cell
saturation.bandwidth([1, 0.5]).heatmap({ color: interpolateTerrain }) // returns an HTML canvas
Insert cell
Insert cell
Insert cell
Insert cell
response = FileAttachment("response.json").json()
Insert cell
grpDensity = kde.density2d(response[response.length - 1], { x: 'x', y: 'y', weight: 'value', pad: 0, bins: [1000, 1000], bandwidth: [0.5, 0.5] });
Insert cell
grpDensity.heatmap({ color: interpolateTerrain })
Insert cell
contours = d3.contourDensity()
.x(d => x(d.x))
.y(d => y(d.y))
.weight(d => d.value)
.size([1000, 1000])
.thresholds(50)
(response[response.length - 1])
Insert cell
tricontours = tr.tricontour().x((d) => x(d.x)).y((d) => y(d.y)).value((d) => d.value).thresholds(50)
Insert cell
tricontoursGen = tricontours(response[response.length - 1])
Insert cell
x = d3.scaleLinear().domain([0, 94.5]).range([0, 1000])
Insert cell
d3.extent(response[response.length - 1], (d) => d.x)
Insert cell
y = d3.scaleLinear().domain([950, 1000]).range([0, 1000])
Insert cell
tr = require('d3-tricontour')
Insert cell
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, 1000, 1000]);


const color = d3.scaleSequential().interpolator(interpolateTerrain).domain(d3.extent(contours, (d) => d.value));
svg.append("g")
.selectAll("path")
.data(contours)
.join("path")
.attr("fill", (d, i) => color(d.value))
.attr("d", d3.geoPath());

return svg.node()
}
Insert cell
chart1 = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, 1000, 1000]);


const color = d3.scaleSequential().interpolator(interpolateTerrain).domain(d3.extent(tricontoursGen, (d) => d.value));
svg.append("g")
.selectAll("path")
.data(tricontoursGen)
.join("path")
.attr("fill", (d, i) => color(d.value))
.attr("d", d3.geoPath());

return svg.node()
}
Insert cell

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.
Learn more