Skip to main content
100%

dendrogram hacking

✓ Published0🌍 Public
Aandyreagan
Last edited Apr 16, 2015
Created on Apr 16, 2015

A dendrogram and clustered heatmap visualize the hierarchical grouping of game data based on pairwise distances. The main panel uses `pcolormesh` with a reversed jet colormap to show the clustered distance matrix, while the top and right dendrograms from `scipy.cluster.hierarchy` display the tree structure with branch colors set by a cutoff threshold. Overlaid black rectangles mark cluster boundaries derived from a 19-cluster solution, and axis labels indicate game indices.

AI-generated description

Similar vizzes

Loading thumbnail…

Hierarchical Clustering

This visualization demonstrates hierarchical clustering by generating 40 random RGB color points and displaying them as colored rectangles alongside three dendrogram layouts. Each layout applies a different sorting strategy to the cluster tree: original order, canonical sorting, and sorting by perceptual lightness using the HCL color space. The code relies on the `clusterfck` library for agglomerative clustering with Euclidean distance and single linkage, while D3.js handles the SVG rendering, including the cluster layout, links, and node shapes.

TThanaporn-sk
69% match
Loading thumbnail…

HeatMap

This interactive heatmap displays randomly generated values across categorical x- and y-axis names, with hierarchical clustering shown as dendrograms on both axes. The visualization includes a linked bar chart that updates based on selections made via a custom lasso tool, which uses SVG selection methods and absolute positioning calculations. Built with D3 v4, the example employs d3-scale-chromatic for color interpolation and d3-polygon for lasso hull computation. The heatmap renders as SVG rectangles, while the footer legend and tooltip are positioned according to configurable percentage-based layout parameters.

SSumNeuron
68% match
Loading thumbnail…

Dendrogram

This dendrogram visualizes a hierarchical clustering of the Flare data set, showing the nested structure of its analytics, animation, and visualization classes. Internal nodes are rendered as small circles, with connecting links drawn as smoothed curves, while leaf nodes display labels. The example uses D3 v4 and SVG rendering, employing the `d3.cluster` and `d3.stratify` layouts to position nodes based on their hierarchical depth and computed height. Data is loaded from a CSV file, and the chart’s orientation places the root at the left, expanding rightward.

Mmbostock
67% match
Loading thumbnail…

Cluster Dendrogram II

This cluster dendrogram visualizes a hierarchical dataset from a flare.json file, displaying nodes as circles connected by curved links. The layout uses d3.layout.cluster to position nodes, with SVG paths generated using cubic Bézier curves to create distinctive non-intersecting links. Node styling includes white circles with steelblue strokes and text labels, while the entire chart renders at a fixed 960 by 2200 pixel size within an SVG container.

Mmbostock
66% match
Loading thumbnail…

Cluster Dendrogram

A cluster dendrogram displays the hierarchical structure of the Flare class hierarchy data, with leaf nodes aligned along the right edge and internal package nodes positioned to the left. The visualization uses d3.cluster() to compute node positions and d3.stratify() to construct the tree from parent-id pairs. SVG rendering draws cubic Bézier curves for links and circles with text labels for each node, using the Flare dataset curated by Jeff Heer.

FFrissAnalytics
66% match
Loading thumbnail…

Dendrogram + Grouped Horizontal Bar Chart

This visualization combines a dendrogram with grouped horizontal bar charts to display hierarchical skill data, based on Mike Bostock's dendrogram concept. The layout positions a cluster dendrogram on the left, with each leaf node connected to a horizontal bar extending to the right, colored according to per-skill values from the accompanying CSV data. Node labels are placed inside or beside the bars, while internal nodes show category names. The chart includes a custom separation function for the tree layout, an x-axis with descriptive skill-level labels (e.g., “Basic 1.0” to “Guru 5.0”), dashed gridlines, and drop shadows. Bars animate their width on load using D3 transitions. The visualization is rendered using D3 v4 with SVG, and combines hierarchical relationships with quantitative comparison in a single view. Source code is available in the gist and was adapted from earlier blocks by willzjc, bumbeishvili, and Mike Bostock.

663anp3ca
65% match
Loading thumbnail…

Dendrogram + Grouped Horizontal Bar Chart

This visualization combines a dendrogram with grouped horizontal bar charts, mapping skill categories and subcategories to hierarchical tree branches while bar lengths indicate proficiency levels. The chart is rendered in SVG with a custom clustering layout and stratify function, using animated transitions to grow the bars when the page loads. Leaf nodes display colored rectangles with labels, while internal nodes show category names. The x-axis uses tick formatting to convert numeric values into experience labels like "Basic" through "Guru." The data comes from a CSV file containing skill names, numerical values, and color assignments, with the visualization based on Mike Bostock’s original dendrogram example.

663anp3ca
65% match
Loading thumbnail…

Cluster Dendrogram

This cluster dendrogram shows the hierarchical structure of the Flare class hierarchy, with leaf nodes aligned along the right edge and internal package nodes branching to the left. The layout uses `d3.cluster()` to position nodes by tree depth, while `d3.stratify()` converts the flat CSV data (flare.csv) into a hierarchical structure. Node-link paths are drawn as cubic Bézier curves, and each node is rendered as a circle with a text label. The visualization is built with D3 v4, renders to SVG, and uses the `d3.csv` loader to ingest the dataset.

Mmbostock
64% match