Clustering Algolrythme 1

by Ben Clayton

HTML

<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<div class="pp dd">2</div>
<div class="pp dd">1</div>
<div class="pp dd">4</div>
<div class="pp dd">1</div>
<div class="pp dd">1</div>

CSS

.pp {
        border: 2px solid #aaaaaa;
        border-radius:50%;
        text-align:center;
        position:absolute;
        z-index:2;
    }  

.pp { width: 20px; height: 20px; padding: 0.5em; }
.cc { 
        border: 2px solid #ff0000;
        background-color:#FFEEDD;
        z-index:1;
    }

JavaScript

$(function() {
    $( ".dd" ).draggable({ zIndex: 100 });
    $(".pp").each(function(idx){
        $(this).css({top:(30*idx)+'px',left:(30*idx)+'px'})
    });
                  
    $( ".dd" ).on( "dragstop", function( event, ui ) {
        $( ".cc" ).remove();
        var $cl=null;
        $(".dd").each(function(idx){
            var p = $(this).position();
            console.log(idx,'top:',p.top,'left:',
                        p.left,'size:',$(this).text() );
            if(!$cl){
               $cl=$("<div class='pp cc'></div>");
               $('body').append($cl);
               p.size=$(this).text();
               move_cl($cl,p);
            }else{
               move_cl($cl,mid_point($cl,$(this)));    
            }
            //$(this).remove();
         });
    });
  });

function move_cl($cl,pt){
   $cl.css({top:pt.top+'px',left:pt.left+'px'}).html(pt.size);   
} 

function mid_point($pt1,$pt2){
    var v1 = parseInt($pt1.text(),10);
    var v2 = parseInt($pt2.text(),10);
    var vt = v1+v2;
    var p1 = $pt1.position();
    var p2 = $pt2.position();
    var pm ={};
    pm.top = (v1/vt*p1.top)+(v2/vt*p2.top);
    pm.left = (v1/vt*p1.left)+(v2/vt*p2.left);
    pm.size = vt;
    return pm;
}