Questions tagged [bundle-layout]

A visualization technique designed specifically to display adjacency relations on top of a tree structure.

This is the first paper on bundle layout.

D3 visualization library implements bundle layout this way.

An example visualization created with D3 bundle layout:

Example Visualization

37 questions
18
votes
1 answer

d3.js - how to automatically calculate arc lengths in radial dendrogram

I'm creating a modified version of Mike Bostock's hierarchical edge bundling diagram: http://mbostock.github.com/d3/talk/20111116/bundle.html but I want to make arcs which span certain groups of data, like this: I'm currently just hardcoding the…
mheavers
  • 29,530
  • 58
  • 194
  • 315
11
votes
1 answer

d3 js Hierarchical edge bundling Data Format

I am trying to visualize url to targetURL using hierarchical edge bundling. What type of relation is required between these columns? Here is the sample: Here is my code. I am getting an error as TypeError: node.parent.children is undefined
Musakkhir Sayyed
  • 7,012
  • 13
  • 42
  • 65
7
votes
0 answers

Create radial network diagram with non-hierarchical data in D3.js

I am trying to create a diagram similar to this one in D3.js: http://mbostock.github.io/d3/talk/20111116/bundle.html This example uses hierarchical edge bundling. However, my data is not hierarchical in nature and I want to represent a relatively…
glaroc
  • 453
  • 4
  • 11
6
votes
1 answer

How to control the group node distance in Hierarchical Edge Bundling in D3.js

This is the link of HEB visualization example in D3. http://mbostock.github.io/d3/talk/20111116/bundle.html I noticed that in the visualization, there is an clear distance(or so-called space) between groups, obviously this distance between groups…
Xiangyu Du
  • 61
  • 3
6
votes
1 answer

TypeError: n is undefined in D3.js , trying to replicate the Hierarchical Edge Bundling

I'm trying to customize an example of Mike Bostock's Hierarchical Edge Bundling: So far I've been able to generate what think is an equivalent json file with my data but I haven't been able to make it show. In the console I get the following…
eclark
  • 819
  • 7
  • 16
5
votes
2 answers

Bundle layout using d3.js and given json file structure

I have a json file with elements like this: [{ "name": "Manuel Jose", "ttags": ["vivant", "designer", "artista", "empreendedor"] }] I'm trying to get the node and the edges using this structure to complete a graph like: (diagram is taken…
cleliodpaula
  • 819
  • 2
  • 11
  • 27
4
votes
2 answers

How to implement variable tension functionality, D3 hierarchical edge bundling?

I am following a d3 sample on hierarchical edge bundling - http://mbostock.github.io/d3/talk/20111116/bundle.html What I am only interested in is, how may I incorporate tension functionality in the above sample in the simplest way possible on top of…
miiike test
  • 103
  • 6
4
votes
3 answers

Hierarchical Edge Bundling from Force Layout in D3

I currently have a Force Layout: http://bl.ocks.org/mbostock/4062045 So my data is simply nodes and links, but I'd like to create this Hierarchical Edge Bundling with the same data: http://bl.ocks.org/mbostock/7607999 I'm having issues because my…
Chet
  • 18,421
  • 15
  • 69
  • 113
3
votes
1 answer

Non-hierarchical (without gaps between groups) bundle layout in D3

I'm trying to make a bundle layout with D3. However, I'd like to make it non-hierarchical (or pseudo non-hierarchical) so as to have no gaps between the edge nodes. The image below hopefully serves as a good example of the gaps I would like to…
Jess
  • 225
  • 3
  • 12
3
votes
1 answer

D3 node text show in tooltip

I am following code at this location: My json file looks like…
Neil
  • 1,715
  • 6
  • 30
  • 45
2
votes
0 answers

d3 transition effect position of svg line with bundle interpolation

I use the following code to draw bended lines: var line = d3.svg.line() .interpolate("bundle") .tension(0.8) .x(function(d) { return d.x; }) .y(function(d) { return d.y; }); ..... links.transition().duration(2000) …
zziemke
  • 33
  • 4
2
votes
1 answer

D3 Dynamic hierarchical edge bundling - 2 way import

I am trying to create a dynamic hierarchical edge bundling based on M Bostock's (http://bl.ocks.org/mbostock/7607999) implementation: The bl.ocks version of my data set is here: http://bl.ocks.org/ratnakarv/91ace0b5f77fff5ef0ab Unlike the original,…
Ratnakar Vellanki
  • 219
  • 1
  • 2
  • 13
2
votes
0 answers

D3.js: Orientation markers won't work. Radial lines to blame?

I am working on a project using D3, specifically the bundle layout. I was asked by my supervisor to add directionality to my graph, using arrows. When I tried to implement this using markers, all of my arrow heads pointed to the right, and did not…
ReezaCoriza
  • 133
  • 4
  • 16
2
votes
1 answer

javascript return map with key as empty string

In D3, the edge bundling example, we have this code // Lazily construct the package hierarchy from class names. function packageHierarchy(classes) { var map = {}; function find(name, data) { var node = map[name], i; if (!node) { …
Orkun
  • 6,998
  • 8
  • 56
  • 103
2
votes
1 answer

d3: Adding links to nodes in hierarchical edge bundling

I'm a super beginner to d3/HTML/JS and I had a question about adding links to nodes in a graph. All of my code is based on: https://gist.github.com/mbostock/7607999 I'd like to add a link that leads to another html file for each node. Is that…
1
2 3