lsquaredleland/README.md

## README.md

      
    Raw
  

              README.md
            
          
    #Uniform Kernel Distribution:
Try experimenting with changing the bandwidth value (h) and the grid_spacing, To see how the bubble sizes vary.

  
## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Uniform Kernel Distribution</title>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>

  </head>

	<body>
		<label id="form" for="show-h">
		  Show Bandwidth
		  <input type="checkbox" id="show-h" disabled>
		</label>
		<div id="chartArea"></div>
		<script src="js.js"></script>
	</body>

</html>

## js.js
var height = 500;
var width = 900;

var data = [];
var grid_spacing = 100;
var h = 75; //Cut off distance is the bandwidth for this type of kernel

for(var i = 0; i < 50; i++){
  data.push([Math.random()*width, Math.random()*height]);
}

var svg = d3.select("#chartArea") //Uniform Kernel
  .append("svg")
  .attr("width", width)
  .attr("height", height);

svg.selectAll('circle')
	.data(data).enter()
	.append('circle')
	.attr('cx', function(d) { return d[0]; })
	.attr('cy', function(d) { return d[1]; })
	.attr('r', 5)

for(var wi = 0; wi <= width; wi+=grid_spacing){
  svg.append('line')
    .style('stroke', 'black')
    .attr('x1', wi)
    .attr('x2', wi)
    .attr('y1', 0)
    .attr('y2', height)
}
for(var hi = 0; hi <= height; hi+=grid_spacing){
  svg.append('line')
    .style('stroke', 'black')
    .attr('x1', 0)
    .attr('x2', width)
    .attr('y1', hi)
    .attr('y2', hi)
}

for(var x_i = 0; x_i <= width; x_i += grid_spacing){
  for(var y_i = 0; y_i <= height; y_i += grid_spacing){
    var summation = 0;
    for(var i = 0; i < data.length; i++){
      //Calculate Eulicidean distance
      distance = Math.sqrt(Math.pow((x_i - data[i][0]),2) + Math.pow((y_i - data[i][1]),2))
      if(distance < h)
        summation++
    }
    //Shows the extent of the h
    svg.append('circle')
      .classed('h', true)
      .style('fill', 'none')
      .style('stroke', 'none')
      .attr('cx', x_i)
      .attr('cy', y_i)
      .attr('r', h)

    var lambda = 1/(Math.PI*h^2) * summation;
    if(lambda > 0){
      svg.append('circle')
        .style('fill', 'none')
        .style('stroke', 'maroon')
        .attr('cx', x_i)
        .attr('cy', y_i)
        .attr('r', lambda*1000)
    }
  }
}

d3.select("#show-h")
  .property("disabled", false)
  .on("change", function() {
    var currentColour = d3.selectAll('.h').style('stroke');
    var nextColour = currentColour === 'rgb(28, 255, 152)' ? 'none' : 'rgb(28, 255, 152)';
    d3.selectAll('.h').style('stroke', nextColour);
  });


## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Uniform Kernel Distribution</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>

	</head>

	<body>
	<label id="form" for="show-h">
	Show Bandwidth
	<input type="checkbox" id="show-h" disabled>
	</label>
	<div id="chartArea"></div>
	<script src="js.js"></script>
	</body>

	</html>
	var height = 500;
	var width = 900;

	var data = [];
	var grid_spacing = 100;
	var h = 75; //Cut off distance is the bandwidth for this type of kernel

	for(var i = 0; i < 50; i++){
	data.push([Math.random()width, Math.random()height]);
	}

	var svg = d3.select("#chartArea") //Uniform Kernel
	.append("svg")
	.attr("width", width)
	.attr("height", height);

	svg.selectAll('circle')
	.data(data).enter()
	.append('circle')
	.attr('cx', function(d) { return d[0]; })
	.attr('cy', function(d) { return d[1]; })
	.attr('r', 5)

	for(var wi = 0; wi <= width; wi+=grid_spacing){
	svg.append('line')
	.style('stroke', 'black')
	.attr('x1', wi)
	.attr('x2', wi)
	.attr('y1', 0)
	.attr('y2', height)
	}
	for(var hi = 0; hi <= height; hi+=grid_spacing){
	svg.append('line')
	.style('stroke', 'black')
	.attr('x1', 0)
	.attr('x2', width)
	.attr('y1', hi)
	.attr('y2', hi)
	}

	for(var x_i = 0; x_i <= width; x_i += grid_spacing){
	for(var y_i = 0; y_i <= height; y_i += grid_spacing){
	var summation = 0;
	for(var i = 0; i < data.length; i++){
	//Calculate Eulicidean distance
	distance = Math.sqrt(Math.pow((x_i - data[i][0]),2) + Math.pow((y_i - data[i][1]),2))
	if(distance < h)
	summation++
	}
	//Shows the extent of the h
	svg.append('circle')
	.classed('h', true)
	.style('fill', 'none')
	.style('stroke', 'none')
	.attr('cx', x_i)
	.attr('cy', y_i)
	.attr('r', h)

	var lambda = 1/(Math.PIh^2) summation;
	if(lambda > 0){
	svg.append('circle')
	.style('fill', 'none')
	.style('stroke', 'maroon')
	.attr('cx', x_i)
	.attr('cy', y_i)
	.attr('r', lambda*1000)
	}
	}
	}

	d3.select("#show-h")
	.property("disabled", false)
	.on("change", function() {
	var currentColour = d3.selectAll('.h').style('stroke');
	var nextColour = currentColour === 'rgb(28, 255, 152)' ? 'none' : 'rgb(28, 255, 152)';
	d3.selectAll('.h').style('stroke', nextColour);
	});