More composable forces, such as charge colors. #2

Closed
altsheets opened this Issue Nov 9, 2015 · 3 comments

Comments

2 participants
@altsheets

Hey there,
first of all, HUGE kudos for D3. It's amazing.

Intro: I just finished my v2 of AssetGraphs = visualizing $NXT blockchain data, the assets around a NXT address. I am using a -heavily modified- version of Force-Directed Graph to show the output of my graph building scripts.

I am superthankful for your work, and I think my first examples are looking great. But now I am running into the -expected- challenges of displaying larger and larger networks.

Data: The structure of my data is bipartite. As nodes I have FEW assets, and MANY shareholders (address == shareholder) ... and all links are always only between partitions, i.e. a shareholder is linked to all the assets he is holding.

Problem: Usually a lot of shareholders are holding the same assets, so I get densely knitted clusters. Which condenses some of those assets into ugly blobs.

A lot of tweaking of the force parameters does often get mildly satisfying configurations, but ... I see a more general solution:

Idea: I would like to have two force algorithm parameter-subsets, one for each partition. Not all force parameters need to be partition specific, but 'charge' seems to be the most important to split. Like this:

  • The shareholders shall have less charge to each other.
  • The assets shall have more charge to each other. <-- that is the essential thing, I guess.
  • Across partition, I don't know yet. A third charge parameter, to fiddle with.

I guess there is a already some solution that has implemented this?

Thx

@altsheets

This comment has been minimized.

Show comment
Hide comment
@altsheets

altsheets Nov 9, 2015

Oh ... as a workaround, I could start with simply giving the assets a larger charge, right?

But that would also repel the shareholders from that asset.

Oh ... as a workaround, I could start with simply giving the assets a larger charge, right?

But that would also repel the shareholders from that asset.

@altsheets altsheets changed the title from node charge by node type to node charge by node type (bipartite graph) Nov 9, 2015

@mbostock mbostock changed the title from node charge by node type (bipartite graph) to Charge groups. Nov 11, 2015

@mbostock

This comment has been minimized.

Show comment
Hide comment
@mbostock

mbostock Nov 11, 2015

Member

I like this idea.

Currently charge is a global force: it applies between all nodes. You can very the strength of the charge per node but that’s it.

If we had charge “groups” (or charge “types” or “colors”) then it would be possible to compose multiple charge forces to different subsets of a graph. For example, red nodes could attract other red nodes, and blue nodes could repel other blue nodes, but red and blue nodes would not interact.

More generally, it might be worth restructuring the force layout so that it’s just position verlet integration, and then you can compose different forces and constraints on top of the simulation: charges, gravity, links, etc. Then you can customize those forces a bit more, such as having a charge force only apply to a subset of a graph.

You can implement this today by copying the appropriate code out of the force layout and applying it yourself inside the tick event. But it would be nice to make such a pattern easier to specify.

Member

mbostock commented Nov 11, 2015

I like this idea.

Currently charge is a global force: it applies between all nodes. You can very the strength of the charge per node but that’s it.

If we had charge “groups” (or charge “types” or “colors”) then it would be possible to compose multiple charge forces to different subsets of a graph. For example, red nodes could attract other red nodes, and blue nodes could repel other blue nodes, but red and blue nodes would not interact.

More generally, it might be worth restructuring the force layout so that it’s just position verlet integration, and then you can compose different forces and constraints on top of the simulation: charges, gravity, links, etc. Then you can customize those forces a bit more, such as having a charge force only apply to a subset of a graph.

You can implement this today by copying the appropriate code out of the force layout and applying it yourself inside the tick event. But it would be nice to make such a pattern easier to specify.

@mbostock mbostock changed the title from Charge groups. to More composable forces, such as charge groups (colors). Nov 11, 2015

@mbostock mbostock changed the title from More composable forces, such as charge groups (colors). to More composable forces, such as charge colors. Nov 11, 2015

@mbostock mbostock self-assigned this Apr 6, 2016

@mbostock

This comment has been minimized.

Show comment
Hide comment
@mbostock

mbostock Apr 6, 2016

Member

The composable aspect of force layout is now implemented, although I think the API needs some work. In the current implementation, d3.forceSimulation doesn’t provide any forces by default; it only implements alpha decay (for use by listeners) and velocity Verlet integration with decay (friction). For example, to compose the standard force-directed graph layout:

var simulation = d3.forceSimulation(nodes)
    .on("beforetick.charge", d3.forceManyBody(nodes))
    .on("beforetick.link", d3.forceLink(nodes, links))
    .on("beforetick.position", d3.forcePosition(nodes).position([width / 2, height / 2]))
    .on("tick", draw);

I’m going to file a few related issues that cover other specific aspects of the API that I’d like to improve.

Member

mbostock commented Apr 6, 2016

The composable aspect of force layout is now implemented, although I think the API needs some work. In the current implementation, d3.forceSimulation doesn’t provide any forces by default; it only implements alpha decay (for use by listeners) and velocity Verlet integration with decay (friction). For example, to compose the standard force-directed graph layout:

var simulation = d3.forceSimulation(nodes)
    .on("beforetick.charge", d3.forceManyBody(nodes))
    .on("beforetick.link", d3.forceLink(nodes, links))
    .on("beforetick.position", d3.forcePosition(nodes).position([width / 2, height / 2]))
    .on("tick", draw);

I’m going to file a few related issues that cover other specific aspects of the API that I’d like to improve.

@mbostock mbostock closed this Apr 6, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment