Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
Rriccardost
Last edited Dec 10, 2019
Created on Dec 9, 2019
Forked from Hello VizHub

An interactive dendrogram displays a hierarchical breakdown of service quality indicators, with colored horizontal bars representing leaf node values. The visualization uses D3.js v4, specifically `d3.cluster()` for tree layout, `d3.stratify()` for hierarchical data structuring, and `d3.axisTop()` with custom tick formatting. Bars animate in width via SVG `transition()`, while node circles and labels are styled with CSS. Data comes from an embedded CSV file containing indicator IDs and corresponding values.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This example displays a hierarchical dataset as an interactive dendrogram or tree, allowing toggling between the two layouts via radio buttons. The visualization is built with D3 v4’s `d3.tree()` and `d3.cluster()` layout algorithms, animated with `d3.transition()` for smooth morphing of node positions and link paths. Data comes from `treedata.csv` containing a hierarchical structure with leaf values. The SVG rendering uses colored circles for internal and leaf nodes, with text labels and cubic Bézier diagonal links, all within a React framework.

Rrca0214
82% match
Loading thumbnail…

Untitled

A hierarchical cluster dendrogram renders an SVG tree from JSON data using D3 v3's `d3.layout.cluster` and `d3.svg.diagonal` for curved link paths. Nodes appear as circles with labels, positioned via the cluster layout’s size settings and a translate transform. The code loads D3 from UNPKG, fetches `dendrogram01.json` asynchronously via `d3.json`, and appends the visualization to the page. A separate ES6 module shows an unrelated "Hello VizHub!" message, demonstrating local module imports alongside the D3 API.

MMartin Masevski
79% match
Loading thumbnail…

Untitled

A nested bar chart displays the distribution of three values across two groups and three categories. The visualization uses D3 v3’s ordinal scales (`d3.scale.ordinal`) and linear scale (`d3.scale.linear`) to position bars, with SVG rendering. Data is loaded from CSV (`data.csv`) and structured via `d3.nest` into hierarchical group and category levels. Axes are drawn with `d3.svg.axis`, and nested `<g>` elements group bars by group and category.

Mmab3105
79% match
Loading thumbnail…

Untitled

A bar chart displays categorical data with drop-shadowed rectangles, using D3 v2 to map values to an ordinal x-scale and linear y-scale. The visualization animates via SVG transitions, with tick labels formatted from a caption mapping. It relies on jQuery for container sizing and D3’s `d3.svg.axis` for axes, rendering inside an HTML div with a filter-defined shadow effect.

NNHRK555
79% match
Loading thumbnail…

Untitled

This interactive treemap visualizes a hierarchical dataset with nested rectangles sized by a primary numeric measure and colored by a secondary metric. Users can hover over nodes to see tooltips with additional data, while clicking parent and grandparent rectangles zooms into deeper levels of the hierarchy. Built with D3 v4, the implementation uses `d3.hierarchy`, `d3.treemap`, and `d3.nest` to aggregate data, with SVG rendering and smooth transitions between zoom states. The hover effects and tooltip functionality are implemented with CSS and JavaScript event handlers.

GGuillamon
78% match
Loading thumbnail…

Untitled

This interactive treemap visualization displays hierarchical data using nested rectangles sized by a primary measure, with color encoding based on an optional secondary metric. The chart supports drill-down navigation through clickable parent nodes and shows tooltips on hover. Built with D3 v4, the implementation uses `d3.hierarchy`, `d3.treemap`, and `d3.nest` to transform flat data into a navigable structure, rendering SVG elements with smooth animated transitions between zoom levels.

Ttareefroustom
78% match
Loading thumbnail…

Untitled

This example presents a dual-view visualization combining an interactive tree diagram and a bar chart. The tree diagram shows a hierarchical dataset with branches for school type, gender, and higher education status, rendered using D3.js SVG primitives. The bar chart displays categorical values from a separate dataset, with animated transitions that redraw the bars and Y-axis when the data updates. Both views rely on D3 v6 APIs such as `d3.select`, `d3.scaleBand`, `d3.scaleLinear`, and the `.join` method for efficient element updates.

ZZach
78% match
Loading thumbnail…

Untitled

This interactive graph visualizes a hierarchical dataset, starting with a root "flare" node and expanding through categories like "analytics," with the force-directed layout used to position nodes. Built with D3 v3, it uses `d3.layout.force()` to simulate physical forces, with node size proportional to the `size` property from the `graph.json` file. The visualization demonstrates how clicking on a parent node toggles the display of its children, allowing users to explore the tree structure. Nodes are rendered as SVG circles with labels, and links are drawn as lines, with color coding distinguishing collapsed, expanded, and leaf nodes.

JJediquu
78% match