Geek Answers Handbook

D3.js User Browse Table

Development of a diagram that will provide the user with visual information for those who viewed them. The inner circle shows matches (following / following the user), the next ring is the user, following the others, the last ring is the followers of the user.

enter image description here

I mocked the positions cy, cx, but what would it do to arrange them like this: snap orange circles to different quadrants of the circle?

http://jsfiddle.net/NYEaX/281/

sampleSVG.selectAll("circle") .data(dataset) .enter().append("circle") .style("stroke", "gray") .style("fill", "orange") .attr("r", 6) .attr("cx", function(d, i){return 2 + (i*80)}) .attr("cy", function(d, i){return (i*80)});
0
source share
1 answer

"LAST CODE" - http://jsfiddle.net/NYEaX/336/ (Note. Simple conceptual, highly non- optimized!)

I'm not sure d3 can do this automatically, but you can always simply determine the x and y positions of your points with some math:

One way to do this is to simply place each point in a random way until it stands correctly. This is definitely not the fastest approach, but if you have too many points to post, it can still be good enough.

Say your smallest circle has a radius r s and a center point ( x s , y s ) and your middle circle r m and ( x m , y m ) and your largest circle r l and ( x l , y l ), then you can check which circle the point is executing or not falling by comparing its distance from the center point of the circle to the radius of that circle:

For example, if you want to put a point in the middle circle:

  • Choose a random position ( x , y ) so that it can hit anywhere in this circle:
    • x <sub> tsub> & thinsp; - & thinsp; <b> <i> r <sub> tsub> & le; x & le; <i> x <sub> tsub> & thinsp + & thinsp; <b> <i> r <sub> tsub> i>
    • <sub> tsub> & thinsp; - & thinsp; <b> <i> r <sub> tsub> & le; y & le; <sub> tsub> & thinsp + & thinsp; <b> <i> r <sub> tsub> i>
  • Make sure it is inside the circle:
    • Check ( x ? Thinsp; -? Thinsp; x m ) 2 + ( y ? Thinsp; -? Thinsp; y m ) 2 ? t <sub> tsub> 2
    • If it is not, start over and choose another ( x , y )
  • Make sure not inside the smaller circle:
    • Check ( x ? Thinsp; -? Thinsp; x s ) 2 + ( y ? Thinsp; -? Thinsp; y s ) 2 > r s 2
    • If it is not, start over and choose another ( x , y )

Now you have a random point that is inside the middle circle, but not small. Putting one in a large circle works the same way (just replace x m , y m and r m with x l , y l and r l , as well as x s , y s and r s with x m , y m and r m ). To place a point in the smallest circle, you only need to check the first condition (using x m , y m , and r m is replaced by x s , y s and r <sub> ssub> ).

Now you can stop here (but depending on your density of points, this may not be the most beautiful image), or you can try to place the points a little more beautiful relative to each other. One way to do this:

  • Loop over all points ( x 1 , y 1 ) ... ( x n , y n )
  • Calculate the distance from each point to point point
  • Find the two closest to each other.
  • From these two, find out which one is closer to the neighbors.
  • Delete this point and place it again randomly using the method described above
  • Repeat this several times or until you get the minimum distance between any two points that are acceptable (I would just try what works best).

Using the two above verification equations, you can also add a little clearance around the borders of your circles that avoid points by replacing r m 2 s ( r m & thinsp; - thinsp; d ) 2 and r s 2 s ( r s & thinsp ; +? thinsp; d ) 2 .

There are definitely many ways to optimize this simple approach: for example, you can choose your initial ( x , y ) in polar coordinates, choosing r and ? and then computing x and y to make sure you never pick a point that is not inside the circle. Just make sure you choose r from a properly weighted distribution so that x and y are evenly distributed. In addition, you can immediately check the distance from a recently set point to all its neighbors when placing a point, rather than in the second step at the end. For example, find 10 places for each point and then always choose one of those with the greatest distance to the nearest neighbor.

UPDATE

And this is what it looks like without worrying about the location of the dots: http://jsfiddle.net/NYEaX/328/

The corresponding section that implements the placement of points is here (variable names are changed to match above):

 function getXCoordinateInCircleSection(i, xm, ym, rm, xs, ys, rs) { done = false; while (!done) { x = getRandomCoordinate(xm-rm, xm+rm); y = getRandomCoordinate(ym-rm, ym+rm); done = true; if ((x-xm)*(x-xm)+(y-ym)*(y-ym) > (rm-10)*(rm-10)) done = false; if ((x-xs)*(x-xs)+(y-ys)*(y-ys) <= (rs+10)*(rs+10)) done = false; } window.ys[i] = y; return x; } function getYCoordinateInCircleSection(i) { return window.ys[i]; }

And with improved dot spacing: http://jsfiddle.net/NYEaX/329/

(Both are based on http://jsfiddle.net/NYEaX/326/ created by @TheOldCounty)

+2
source

More articles:


All Articles