D3 + Vue.js

100%

✓ Published0🌍 Public

Last edited Sep 23, 2018

Created on Sep 23, 2018

This example demonstrates an interactive cluster dendrogram visualization built with D3.js v4 and Vue.js 2.2, rendered as SVG. It displays a hierarchical tree structure of the Flare dataset loaded from a CSV file, with nodes representing categories and connections drawn as paths. The chart includes user controls for adjusting width, stroke color, and searching nodes, while also supporting node selection and dynamic addition. Vue’s template syntax binds SVG attributes to computed properties, replacing traditional D3 enter/exit/update methods with reactive data-driven rendering.

AI-generated description

This is a re-write of Cluster Dendrogram with D3 + VueJS.

In order to connect the user interface with the chart, the chart rendering is done by using Vue’s template syntax to bind attributes to the SVG elements.

This can be seen as a replacement for d3.select and the usual enter, exit, update. With Vue, we can use computed properties to make sure that whenever data changes, the representation also updates.

The whole purpose of adding Vue is to benefit from it’s capabilities of building user interface components on top of data models.

Of course, this can also be can be done through native JS or D3 events, but VueJS allows us to build reactive, re-usable components which might come in handy in more complex projects.

forked from <a href='http://bl.ocks.org/getflourish/'>getflourish</a>'s block: <a href='http://bl.ocks.org/getflourish/8b3eeb3076bc3e20099de7f2ef9186b8'>D3 + Vue.js</a>

forked from <a href='http://bl.ocks.org/christianbriggs/'>christianbriggs</a>'s block: <a href='http://bl.ocks.org/christianbriggs/c545524380166c756259c177c2b026d8'>D3 + Vue.js</a>

mit Licensed

Similar vizzes

Loading thumbnail…

D3 + Vue.js

This cluster dendrogram visualizes the Flare dataset, showing hierarchical relationships between software classes and modules as a tree of nodes and links. Built with Vue.js, the SVG rendering is driven by Vue’s template syntax, replacing D3’s `enter`/`exit`/`update` with reactive computed properties that bind data changes directly to the chart. This approach highlights Vue’s strength in building re-usable, reactive components for data-driven visualizations, while D3 handles the layout and scales. The example demonstrates how Vue can manage the DOM bindings and updates, making the chart more maintainable in complex applications.

FFrissAnalytics

94% match

Loading thumbnail…

D3 + Vue.js

This interactive cluster dendrogram visualizes hierarchical data from a CSV file using D3 v4 (via `d3.stratify`) and Vue.js 2.2.4, rendering nodes and links as SVG elements. Vue’s template syntax replaces D3’s `enter`/`exit`/`update` pattern, with computed properties managing the tree layout and transitions. The interface includes controls for chart width, stroke color, and text search, plus a button to add nodes.

663anp3ca

91% match

Loading thumbnail…

D3 Tutorial

This example demonstrates a tree visualization using the Flare dataset, displayed as a circular layout with labeled nodes and hierarchical branches rendered in SVG. The code uses D3 v5’s `d3.hierarchy` and `d3.tree` to compute node positions, then draws links and circles with `d3.select` and SVG elements. The hierarchical structure shows parent-child relationships across categories like analytics, animate, and physics, with each leaf node’s value represented by its visual placement. The visualization is contained within a fixed 960x500 viewport.

SShivansh Mathur

84% match

Loading thumbnail…

Gist e3a7564e0daaea9e8d19

This example shows a hierarchical tree layout rendered with D3.js, using the cluster layout to display the Flare visualization toolkit’s class hierarchy. The SVG visualization is organized as an indented dendrogram, with circular nodes connected by elbow-shaped paths. Parent nodes are labeled to the left of their circles, while leaf nodes are labeled to the right. The layout encodes the data’s parent-child relationships through vertical positioning, with the tree flowing horizontally across the 960×2200 pixel canvas.

CCBasis

83% 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

83% match

Loading thumbnail…

Untitled

This example shows a hierarchical clustering tree of the flare dataset, rendered as a radial layout with circular nodes and curved links. The visualization uses D3 v4’s `d3.stratify` to convert CSV data into a hierarchy and `d3.cluster` to compute the radial positions, projecting Cartesian coordinates with a custom `project` function. Nodes are drawn as SVG circles, with internal nodes filled darker and leaf labels rotated to follow the tree’s circumference. The code loads data from `flare.csv` and relies on SVG paths for the connecting links.

990561lkk

81% match

Loading thumbnail…

Untitled

990561lkk

81% match

Loading thumbnail…

Test

This example shows a hierarchical dataset of the Flare visualization library, organized as a tree with branches for analytics, animation, data, and display. Animated transitions smoothly rearrange the nodes when the tree is toggled between layouts. The visualization uses D3.js version 3 with SVG rendering and animation, relying on the force-directed layout algorithm from d3.js to position the connected nodes. The data is provided as a static JavaScript object, and the interaction reveals structural relationships through size and grouping.

NNabajyoti Das

80% match