CODEWITHSUNDEEP
d3.js
nadieh
nadieh

Reputation: 685

D3: clustered force layout with fixed centers

I'm trying to accomplish something similar to the image below example http://www.magora-systems.com/media/good.png which I found on this page. The author gives some explanation on how he does this, using a clustered force technique from http://bl.ocks.org/mbostock/7882658, but not enough for me to fully understand it

What I do not know is how to set the centers of each cluster to a predefined location (where I define these center locations in a variable for example)?

My second, but less important question is about an extra feature that is mentioned on the blog where I found the image: "it’s been decided that a bubble with the largest diameter in a group will become central". Does anybody know how to do this?

Thank you for any help!

Upvotes: 2

Views: 952

Answers (1)

Jason Ausborn
Jason Ausborn

Reputation: 315

It is an interesting cluster view that I haven't seen before with D3, thanks for that. I looked at the pages you linked, and the author describes a guide found here.

The Grants by Year tab for the example puts 3 clusters organized by year. The example code is calling vis.coffee and defining the year center locations like this :

@year_centers = {
  "2008": {x: @width / 3, y: @height / 2},
  "2009": {x: @width / 2, y: @height / 2},
  "2010": {x: 2 * @width / 3, y: @height / 2}
}

And I see a method for moving the circles to their year_centers like this:

# move all circles to their associated @year_centers 
  move_towards_year: (alpha) =>
    (d) =>
      target = @year_centers[d.year]
      d.x = d.x + (target.x - d.x) * (@damper + 0.02) * alpha * 1.1
      d.y = d.y + (target.y - d.y) * (@damper + 0.02) * alpha * 1.1

You may want to poke around in the vis.coffee or vis.js files, but the vis.coffee file is the one referenced with the source example.

Upvotes: 1

Related Questions