Public
Edited
Sep 27, 2023
Insert cell
Insert cell
Insert cell
Insert cell

{
console.time("plot");
// Create and configure a plotter with our density estimator and a color scale
let plot = densityPlot(density)
.size([500, 500])
.background("#fff")
// Customize the color scale to linearly map bin counts to an blue color scale.
.color((buf) =>
d3.scaleQuantize(
d3.extent(buf),
blues)
//blues)
//d3.scaleSequential(
//d3.extent(buf),
// cacheInterpolator speeds up colorization by returning cached {r, g, b, opacity} objects
// cacheInterpolator(d3.interpolateBlues, 2)
//)
);
let ret = plot(xs);
console.timeEnd("plot");
return ret;
}
Insert cell

// Create and configure a density estimator for our data
density = pointDensity(nBins, nBins)
.x(d => d)
.y((d, i) => ys[i])
// Specify the x and y domains that we'd like to plot
.xDomain([0, 1])
.yDomain([0, 1])
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
halton = function halton (index, base) {
let fraction = 1;
let result = 0;
while (index > 0) {
fraction /= base;
result += fraction * (index % base);
index = ~~(index / base); // floor division
}
return result;
}
Insert cell
Insert cell
npts = 4000
Insert cell
xs = data.flatMap(d => d[0])
Insert cell
ys = data.flatMap(d => d[1])
Insert cell
data = orig_data.map(d => [d[0], Math.pow(d[1], 0.35)])
Insert cell
orig_data = [...Array(numPoints).keys()].map(
d => [halton(d, base1), halton(d, base2)])
Insert cell
plot = () => {
const svgwidth = Math.min(width, 600);
const margin = 20;
const svg = d3.select(DOM.svg(svgwidth, svgwidth));

const x = d3.scaleLinear()
.domain([0, 1])
.range([margin, svgwidth-margin]);
const y = d3.scaleLinear()
.domain([0, 1])
.range([svgwidth-margin, margin]);
const dots = svg.append("g").selectAll("circle")
.data(data.slice().reverse())
.enter().append("circle")
.attr("cx", d=>x(d[0]))
.attr("cy", d=>y(d[1]))
.attr("fill", "4682A9")
//.attr("fill", coloring)
.attr("r", svgwidth / 150);
return svg.node();
}
Insert cell
blues = ["#91C8E4", "#4682A9"]
Insert cell
Insert cell
Insert cell
comma = d3.format(',')
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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