D3 + Vue.js

100%

✓ Published0🌍 Public

Last edited Oct 9, 2018

Created on Oct 9, 2018

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.

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/lorenzopub/'>lorenzopub</a>'s block: <a href='http://bl.ocks.org/lorenzopub/02ccce43d708919ca7c0b242fe1c93f2'>D3 + Vue.js</a>

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

mit Licensed

Similar vizzes

Loading thumbnail…

D3 + Vue.js

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.

663anp3ca

91% match

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

86% match

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

79% match

Loading thumbnail…

D3 Stratify tree diagram

This example shows a hierarchical family tree rendered as a dendrogram, with nodes labeled by name and curved links connecting parents to children. The data is embedded as a CSV string and parsed with `d3.csvParse`, then converted into a hierarchy using `d3.stratify`. The layout is computed with the `d3.cluster` tree layout, and links are drawn as SVG paths using a custom `project` function that maps tree coordinates to screen positions. Text labels use varying font sizes based on node depth.

NNita

79% match

Loading thumbnail…

hw3

This visualization displays a hierarchical clustering of data from a CSV file, using a dendrogram layout to reveal the relationships between data points. The code uses reorder.js to compute the optimal leaf ordering and d3.js to render the tree structure as an SVG. The visualization also includes an interactive element where users can select nodes, triggering animated transitions that highlight the selected branches. The implementation relies on d3.v3 and reorder.js for the clustering and layout algorithms, with the final output rendered as animated SVG elements.

TTimmyLu

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

78% match

Loading thumbnail…

Hello VizHub

This example shows an interactive dendrogram layout of a hierarchical data structure, rendered as SVG circles connected by curved paths. Users can click nodes to inspect them, press Shift-click to add random "florps" children, or Cmd-click to delete entire subtrees, triggering re-renders that change link and node colors. The code relies on d3.hierarchy, d3.cluster, d3.zoom, and the d3 v5 event handling, with data defined as a plain JavaScript object and layout computed at 500x900 pixels.

MMatt Morris

77% match

Loading thumbnail…

Loading CSV Data with D3

This example demonstrates how to load a CSV file using D3.js within a Vue application, rendering the data as an SVG visualization. The dataset, Parisian Associations.csv, contains information about associations including their names, postal codes, activity fields, and membership counts. Using D3 v3, the code parses the CSV and binds the data to SVG elements, likely creating a bar chart or scatter plot to explore the distribution of associations across different activity fields, geographic situations, or member counts. The visualization highlights D3's data-joining capabilities and its integration with Vue for dynamic, data-driven web applications.

EEvryjazz

76% match