Public
Edited
Aug 7, 2023
1 fork
Importers
{
const x = d3.scaleBand().domain(d3.range(0, arr)).range([0, 600]);
const height = 300;
const y = d3
.scaleLinear()
.domain([0, Math.max(...groupped.map((g) => g.length / data.length)) * 1.1])
.range([0, height]);
const svg = d3.create("svg");
svg.attr("height", height + 100).attr("width", 700);
const graph = svg.append("g").attr("transform", "translate(50,50)");
const r = graph.selectAll("rect").data(groupped);
r.enter()
.append("rect")
.call((e) => e.append("title").text((d) => d.length))
.merge(r)
.attr("x", (d, i) => x(i))
.attr("y", (d) => height - y(d.length / data.length))
.attr("width", x.bandwidth())
.attr("height", (d) => y(d.length / data.length));
graph.append("g").call(d3.axisLeft(y));
graph
.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
return svg.node();
}
distributor = (fn, nbVal = 20) => {
let weights = d3.range(nbVal).map((d) => fn(d / nbVal));
var totalWeight = 0;
totalWeight += weights.reduce((acc, v) => acc + v);
var random = Math.random() * totalWeight;
for (var i = 0; i < nbVal; i++) {
random -= weights[i];
if (random < 0) {
return i / nbVal;
}
}
}
groupped = data.reduce(
(a, b) => {
let idx = Math.floor(b * arr);
a[idx] = [...a[idx], b];
return a;
},
d3.range(0, arr).map((w) => [])
)
data = d3.range(0, samples).map((x) => distributor(distribution, possibleVal))
import { chartEditor, Keyframe } from "@nhogs/easing-graphs-editor"
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.
