0

I built a bubble chart based on d3.js. So far it is working well. Now the designer wants it to have a more specific layout and ordering. As I'm not working with d3 from day to day it is a bit frustrating, figuring this out.

This is my pen so far and this is what I try to achieve (upper version is my current layout and lower version which I am aiming to):

  • Descending order, starting from the left floating to the right
  • More horizontal and less vertical layout

This is what my sorting looks like right now.

var nodes = d3.hierarchy(data) .sum(function(d) { return d.value; }) .sort(function(a, b) { return -(a.value - b.value); });

and this is what I've also been trying

var nodes = d3.hierarchy(data) .sum(function(d) { return d.value; }) //.sort(function(a, b) { return 1; });

I am gratefulfor any hint because i really spent a lot of time searching for solutions til now.

user3414687
  • 63
  • 8
  • 2
    I'd probably toss it into force sim – Coderino Javarino Jul 05 '19 at 15:14
  • 1
    Circle packing will not allow, without a *lot* of tinkering, easy manipulation of the ordering of the data nor the shape of the output. This [question](https://stackoverflow.com/q/13339615/7106086) is probably the most comprehensive in terms of answers on how to get a more rectangular layout. There are some other questions on other shapes or manipulations, but few answers (and some of these answers warp the circles). As Coderino Javarino notes, force layout options will be the easiest rather than trying to work with d3.pack, most likely. – Andrew Reid Jul 05 '19 at 16:49
  • Wow, thanks for your reply! I will take a look at force layouts. Is there a quick way to convert my existing example into one with a force layout? I'm pretty new to d3 and it took me some time to get this chart where it is now (tspan rows etc.) soit would be great to utilizesome of my existing code. – user3414687 Jul 08 '19 at 08:26

0 Answers0