Web Datavis researcher by day, Indie Game designer by night
Public
Edited
Sep 20, 2024
1 star
random = d3.randomLogNormal(0,1)
matrix = d3.range(30).map(i => d3.range(40).map(j => j % 2 ? random() : i % 2 ? random()/5.0 : random()/20.0 ))
row_ordering = !row_clustering.enabled ? d3.range(matrix.length) : (new hclust.agnes(matrix, {distanceFunction: distance[row_clustering.distance_metric], method: row_clustering.method})).indices()
row_sorted_matrix = row_ordering.map(i => matrix[i])
row_sorted_columns = d3.range(row_sorted_matrix[0].length).map(j => row_sorted_matrix.map(row => row[j]))
col_ordering = !col_clustering.enabled ? d3.range(matrix[0].length) : (new hclust.agnes(row_sorted_columns, {distanceFunction: distance[col_clustering.distance_metric], method: col_clustering.method})).indices()
sorted_matrix = row_sorted_matrix.map(row => col_ordering.map(j => row[j]) )
flat_matrix = sorted_matrix.map((row, i) => row.map((value, j) => ({row: i, col: j, value: value}) )).flat()
// By Fabian Inwand - https://observablehq.com/d/fe65c694a06cc12b
// A `template` callback for Inputs.form() that displays all inputs inline.
function filterBar(inputs) {
const scope = DOM.uid().id;
return htl.html`<div class=${scope}>${Object.values(inputs)}
<style>
.${scope} { display: flex; gap: 2ch }
.${scope} form, .${scope} form > * { width: fit-content !important }
`;
}
hclust = (await import("https://cdn.skypack.dev/ml-hclust@3.1.0?min"))
distance = (await import("https://cdn.skypack.dev/ml-distance@3.0.0?min")).distance
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.
