All examples By author By category About

Bcohn

Full window Github gist

knn

<!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>

$(".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;
}

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)
}

svg.append("path")
	      .datum(lineArray)
	      .attr("class", "BIGline")
	      .attr("d", line);

}

function pathremove(){
svg.selectAll(".BIGline")
	.remove();}

</script>

</body>

https://code.jquery.com/jquery-1.11.3.min.js

https://d3js.org/d3.v3.min.js