data visualization- scatter graph

data visualization- scatter graph.markdown

data visualization- scatter graph

Demo project

index.html

<div id="_Graph">
  
  
	
</div>
<div id="_Info">
    <label>Name</label>
    <label>Name</label>
  
  </div>

script.js

$(document).ready(
  function() {draw_GRAPH();});
$(window).bind('resize orientationchange', function() {
draw_GRAPH();
	
	
	
	
});

function draw_GRAPH(){
        
      $("#_Graph").html("");

        //draw lines for graph
        for (var i = 0; i < 10; i++) {
            $("#_Graph").append('<div class="h_lines" style="left:' + ($("#_Graph").width() / 10) * i + 'px"></div>');
            $("#_Graph").append('<div class="v_lines" style="bottom:' + ($("#_Graph").height() / 10) * i + 'px"></div>');

            $("#_Graph").append('<a class="h_lines_label" style="left:' + ($("#_Graph").width() / 10) * i + 'px">' + i * 10 + '</a>');
            //$("#_Graph").append('<a class="h_lines_label" style="bottom:' + ($("#_Graph").height() / 10) * i + 'px">' + i*10 + '</a>');
            $("#_Graph").append('<a class="h_lines_label_h" style="left:' + ($("#_Graph").width() / 10) * i + 'px">' + i * 10 + '</a>');
        }

        //draw points for graph
        for (var i = 0; i < 100; i++) {

            $("#_Graph").append('<a class="points" style="left:' + (Math.random() * $("#_Graph").width() - 100) + 'px;bottom:' + (Math.random() * $("#_Graph").height()) + 'px; "></a>');




        }




        $(".points").draggable({containment: 'parent' });



    }
      
    

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

style.css

body,html
{
background:#f9f9f9;

margin:0px 0px;
padding:0px 0px;
font-family:Tahoma, Geneva, sans-serif;

}
#_Graph{width:100%;height:90%;background:#fff;float:left;display:block;position:absolute;

//border:2px solid #ddd;
}
#_Info{
  width:80px;
  height:50px;
  background:#fff;
  border:1px solid #eee;
  position:absolute;
  z-index:1000000;
  -webkit-box-shadow: 0 1px 10px rgba(0,0,0,0.5);
-moz-box-shadow: 0 1px 10px rgba(0,0,0,0.5);
box-shadow: 0 1px 10px rgba(0,0,0,0.5);
  font-size:0.8em;
  padding:2px;
}



#_Graph .h_lines{width:0px;border-left:1px solid #eee;position:absolute;height:100%;}
#_Graph .v_lines{width:100%;border-top:1px solid #eee;position:absolute;height:0px;}
#_Graph .h_lines_label{width:20px;position:absolute;text-align:center;color:red;}
#_Graph .h_lines_label_h{width:20px;position:absolute;text-align:center;color:red;bottom:0px;}
#_Graph .v_lines_label{width:20px;position:absolute;text-align:center;color:red;}
#_Graph .v_lines_label,#_Graph .h_lines_label,#_Graph .h_lines_label_h
{
 -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */

  /* No support for these yet, use at own risk */
  -o-user-select: none;
  user-select: none;  
}
#_Graph .points{width:10px;height:10px;background:#ff0000;position:absolute;border-radius:100%;opacity:1;z-index:100;
cursor:pointer;

}
#_Graph .points:hover{
opacity:1;
 -webkit-animation: pulse 0.5s linear infinite;
	animation: pulse 0.5s linear infinite;
	-webkit-backface-visibility: hidden;
}
@-webkit-keyframes pulse {
 0% {
 -webkit-transform: scale(1, 1);
}
 50% {
 -webkit-transform: scale(3, 3);
}
 100% {
 -webkit-transform: scale(1, 1);
};
}

@keyframes pulse {
 0% {
 transform: scale(1, 1);
}
 50% {
 transform: scale(3, 3);
}
 100% {
transform: scale(1, 1);
};
}

styles

<link href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css" rel="stylesheet" />