D3 Examples

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<style>
.yAxis text {
  font: 10px sans-serif;
}
.xAxis text {
  font: 10px sans-serif;
}
​
.yAxis path, .yAxis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
​
rect {
    fill :#fff;
}
.xAxis path, .xAxis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
​
.Knear{
    margin-top:20px;
}
​
#kneighbors{
    width:200px;
}
​
.BIGline {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}
​
/*circle {color : #000;
    opacity : .5;
    fill : #000;}
*/
</style>
</head>
<body>
​
<div id="chart">
</div>
<div class="ui-widget">
​
                                <input id = "number" type="search" placeholder="Number of points..." required>
                                <input class="icon-search" type="button" value="Generate">
                                <input class="clear" type="button" value="Clear"><br>
                                <input id = "kneighbors" type="search" placeholder="Number of nearest neighbors..." required>
                                <input class="Knear" type="button" value="Find Decision Boundary"><br>
​
​
</div>
​
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/jquery.auto-complete.min.js"></script>
<link rel="stylesheet" type="text/css" href="js/jquery.auto-complete.css" />
<script src="//d3js.org/d3.v3.min.js"></script>
​
<script>
​
$(".icon-search").click(function() {
var searchstring = $('#number');
searchstring.focus();
pointgenerate(+searchstring.val());
});
​
$(".clear").click(function() {  
points=[];
lineArray=[];
testArray=[];
pointremove();
pathremove();
});
​
$(".Knear").click(function() {
var searchstring = $('#kneighbors');
searchstring.focus();   
drawKnearest(+searchstring.val());
});
​
​
var alignthing = d3.select(".ui-widget")
                   .attr("align","center")
​
var margin ={top:40,bottom:40,left:40,right:40};
var height = 500 - margin.top - margin.bottom ;
var width = 600- margin.right - margin.left ;
​
var points = []
var maxX= Math.exp(0); 
var maxY = Math.exp(0);
​
var x = d3.scale.linear()
          .domain([0,maxX])
          .range([0, width])
​
var y = d3.scale.linear()
          .domain([0,maxY])
          .range([height,0])
          
var yAxis = d3.svg.axis()
              .scale(y)
              .orient("left");
​
var xAxis =  d3.svg.axis()
              .scale(x)
              .orient("bottom")
              .ticks(10);
​
 var dragX = d3.behavior.drag()
    .origin(function(d) { return d; })
    .on("drag", dragmoveX);
​
 var dragY = d3.behavior.drag()
    .origin(function(d) { return d; })
    .on("drag", dragmoveY);
​
var svg = d3.select("#chart")    
    .attr("align","center")
    .append("svg")
    .attr("class", "axis")
    .attr("width",width + margin.left+margin.right )
    .attr("height", height + margin.top+margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
​
​
var color = d3.scale.category10()
    .domain([0, 1]);
​
svg.append('rect')
   .attr("width",width)
   .attr("height",height)
   .on("click",pointClickAdd);
​
​
function pointClickAdd(){
  points.push({x:x.invert(d3.mouse(this)[0]),y:y.invert(d3.mouse(this)[1])})
    svg.selectAll("circle")
        .data(points)
        .enter()
        .append("circle")
        .attr("cx",function(d){return x(d.x) })
        .attr("cy",function(d){return y(d.y)})
        .attr("r",2);
}
​
​
function pointgenerate(n){
svg.selectAll("circle")
    .data(getPoints(n))
    .enter()
    .append("circle")
    .attr("cx",function(d){return x(d.x) })
    .attr("cy",function(d){return y(d.y)})
    .attr("r",2)
    .attr("fill",function(d){return color(d.class); });
}
​
function pointremove(){
svg.selectAll("circle")
    .data(points)
    .exit()
    .remove();}
​
svg.append("g")
    .attr("class","yAxis")
    .call(yAxis);
​
svg.append("g")
    .attr("transform", "translate(0,"+height+")")
    .attr("class","xAxis")
    .call(xAxis);
​
 
d3.select(".xAxis").selectAll(".tick")
    .call(dragX)
  
  d3.select(".yAxis").selectAll(".tick")
    .call(dragY)
​
​
function dragmoveX(d) {
    maxX = (Math.exp(Math.log(maxX)+d3.event.dx/width)) ;
​
    x.domain([0,maxX]);
​
    xAxis.scale(x);
    
    svg.selectAll(".xAxis")
       .call(xAxis)
​
    d3.select(".xAxis").selectAll(".tick")
       .call(dragX)
​
​
    svg.selectAll("circle")
        .attr("cx",function(d){return x(d.x)})
​
​
    var line = d3.svg.line()
        .x(function(d) { return x(d.x); })
        .y(function(d) { return y(d.y); });
​
    svg.selectAll(".BIGline")
      .attr("d", line);
}   
​
function dragmoveY(d) { 
    maxY = (Math.exp(Math.log(maxY)+d3.event.dy/height)) ;
​
    y.domain([0,maxY]);
​
    yAxis.scale(y);
    
    svg.selectAll(".yAxis")
       .call(yAxis)
​
    d3.select(".yAxis").selectAll(".tick")
       .call(dragY)
​
    svg.selectAll("circle")
        .attr("cy",function(d){return y(d.y)})
​
    var line = d3.svg.line()
        .x(function(d) { return x(d.x); })
        .y(function(d) { return y(d.y); });
​
    svg.selectAll(".BIGline")
      .attr("d", line);
​
}   
​
function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min)) + min;
}
​
​
​
function assignClass(x,y){
    var output;
    if (y > Math.sin(x)*maxY) {
        output = 0;
    }
    else {
        output = 1;
    }
    if(Math.random()<.05){
        if(output=== 0){
            output = 1;
        }
        else {
            output = 0;
        }
    }
​
    return output;
}
​
​
function getPoints(n){
    for(var i=0;i<n;i++){
        var x = Math.random()*maxX;
        var y = Math.random()*maxY;
        points.push({x : x, y : y, class : assignClass(x,y)});
    }
    return points
}
​
function EuclideanDistance(point1,point2) {
    return Math.sqrt(Math.pow((point1.x - point2.x),2) + Math.pow((point1.y - point2.y),2));
}
​
function distance(point) {
        return points.map(function(d){return EuclideanDistance(point,d);
        });
    }
​
function sort(arr) {
  return arr.concat().sort();
}
​
function Knearest(k,distances){
    var mins=sort(distances).slice(0,k);
    var sum = 0;
    for(var i=0; i < mins.length; i++){
     sum += points[distances.indexOf(mins[i])].class ;
    }
    return Math.round(sum/k)
}
​
​
function drawKnearest(k){
    pathremove();
    var testArray=[];
        for (var i = 0; i<100 ; i++){
            var temporaryArray=[];
            for (var j = 0; j<100 ; j++){
                    var pointClass = Knearest(k,distance({x:i*maxX/100,y:j*maxY/100}));
                    temporaryArray.push({x:i*maxX/100,y:j*maxY/100, class:pointClass});
                }
            testArray.push(temporaryArray);
        };
​
​
    var lineArray=[]
    for (var i = 1; i<99 ; i++){
            for (var j = 1; j<99 ; j++){
                var line = 0;
                if (testArray[i][j].class !== testArray[i+1][j].class ||
                    testArray[i][j].class !== testArray[i][j+1].class ||
                    testArray[i][j].class !== testArray[i+1][j+1].class ||
                    testArray[i][j].class !== testArray[i-1][j].class ||    
                    testArray[i][j].class !== testArray[i][j-1].class ||
                    testArray[i][j].class !== testArray[i-1][j-1].class ||
                    testArray[i][j].class !== testArray[i+1][j-1].class ||
                    testArray[i][j].class !== testArray[i-1][j+1].class
                    ){
                    lineArray.push(testArray[j][i]);
                }
            }
        }
    var line = d3.svg.line()
        .interpolate("basis")   
        .x(function(d) { return x(d.x); })
        .y(function(d) { return y(d.y); });
​
    svg.append("path")
          .datum(lineArray)
          .attr("class", "BIGline")
          .attr("d", line);
​
}
​
​
function pathremove(){
svg.selectAll(".BIGline")
    .remove();}
​
​
​
</script>
​
</body>
    