CODEWITHSUNDEEP
javascriptd3.jsvisualization
LemonMan
LemonMan

Reputation: 3143

D3 Visualization Questions

I'm working on a visualization and working off of a jsfiddle I found on stackoverflow.

I haven't done D3 before, so I had a couple of questions.

I want to visualize some json like this

{word:"cat", count: 30},
{word:"dog", count: 15}....

I've been working on a jsfiddle here

http://jsfiddle.net/matthewpiatetsky/nCNyE/3/

  1. How can I ensure that text and circle don't intersect? The previous fiddle ensured this for the circles, but I want to prevent the label for one circle from intersecting with other circles/other labels.
  2. How can I change the size of circles to scale relative the amount of open space in the window? I'm thinking I'll make a 800 by 800 window, and if there's lots of empty space and few circles, I want circles to get bigger, and if there isn't i want them to get smaller.

Any tips would be much appreciated, thank you! (I know I can figure this stuff out myself, and I am doing so slowly, but some examples of how to do these things that I could play around with would be helpful!

Upvotes: 0

Views: 125

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109232

The short answer for your first question is that you can't do this automatically with D3. You can try to ensure that this is the case by manually checking the positions of the labels and circles, or by using something like D3's force layout to lay them out automatically without overlap. Either of those options would be quite a bit of work though and in the second case you would have no guarantee that nothing would overlap.

Concerning your second question, you determine the size of the window and set the radius accordingly, e.g. something like

var radius = Math.sqrt(window.innerWidth * window.innerHeight) / 100;

Upvotes: 1

Related Questions