dendrogram(hclustTree, {width: dendo_width, height:dendo_height, linkColor: "red" })
viewof dendo_width = Inputs.range([0, 700], {label: "Dendo Width", step: 1, value: 200})
viewof dendo_height = Inputs.range([0, 700], {label: "Dendo Height", step: 1, value: 250})
matrix = [[3,1,6,9],[3,95,75,14],[10,27,26,24],[79,27,86,80],[50,70,70,90],[100,3,2,5],[88,70,88,90],[8,54,98,120],[58,90,88,99],[22,77,4,8]]
distanceMatrix = dist(matrix, distance.euclidean)
hclustTree = new hclust.agnes(distanceMatrix, {
method: "complete",
isDistanceMatrix: true
})
Functions
function dendrogram (data,options = {}) {
const {
width: width = width,
height: height = height,
innerHeight = height,
linkColor: linkColor = linkColor,
} = options;
const svg = d3
.create("svg")
.attr("width", width )
.attr("height", height )
const root = d3.hierarchy(data)
const maxHeight = root.data.height;
const clusterLayout = d3.cluster().nodeSize([1, width / root.height])
clusterLayout(root)
const allNodes = root.descendants().reverse()
const leafs = allNodes.filter(d => !d.children)
leafs.sort((a,b) => a.x - b.x)
const leafHeight = height / leafs.length
leafs.forEach((d,i) => d.x = i*leafHeight + leafHeight/2)
allNodes.forEach(node => {
if (node.children) {
node.x = d3.mean(node.children, d => d.x)
}})
function transformX(data) {
const height = width ;
return height - (data.data.height / maxHeight) * height;
}
// Links
root.links().forEach((link,i) => {
svg
.append("path")
.attr("class", "link")
.attr("stroke", link.source.color || linkColor)
.attr("fill", "none")
.attr("d", elbow(link))
})
function elbow(d) {
return ("M" + transformX(d.source) + "," + d.source.x + "V" + d.target.x + "H" +transformX(d.target))
}
return svg.node()
}
Imports
dist = require("https://bundle.run/ml-distance-matrix@2.0.1")
distance = (await import("https://cdn.skypack.dev/ml-distance@3.0.0?min")).distance
hclust = (await import("https://cdn.skypack.dev/ml-hclust@3.1.0?min"))
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.
