shimizu/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>加重ボロノイ分割テスト</title>
<style>
svg {
    width: 449px;
    height: 500px;
}

.axis path,
.axis line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
}

.axis text {
	font-family: sans-serif;
	font-size: 11px;
}
</style>
<body>
<svg id="normal"></svg>
<svg id="power"></svg>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
(function(){
    var w = 449;
    var h = 500;
    var padding = 30;
    var pointLength = 25;
    var dataset = [];
    var normalLayer = d3.select("#normal").append("g")
        .attr("width", w)
        .attr("height", h)
    var powerLayer = d3.select("#power").append("g")
        .attr("width", w)
        .attr("height", h)


    for(var x = 0; x < pointLength/2; x++){
         for(var y = 0; y < pointLength/2; y++){
             var newNumber1 = x * 10 + 5;
             var newNumber2 = y * 10 + 5;
             var r = Math.floor(Math.random() * 100)
             dataset.push({x:newNumber1, y:newNumber2, r:r})
         }
    }

   var xScale = d3.scale.linear()
		.domain([0, d3.max(dataset, function(d) { return d.x; })])
		.range([padding, w - padding * 2]);

   var yScale = d3.scale.linear()
		.domain([0, d3.max(dataset, function(d) { return d.y; })])
		.range([h - padding, padding]);

   var rScale = d3.scale.linear()
		.domain([0, d3.max(dataset, function(d) { return d.r; })])
		.range([2, 10]);

   dataset.forEach(function(d) { d.cx = d.x; d.cy = d.y;  d.r = rScale(d.r) });


   var xAxis = d3.svg.axis()
		.scale(xScale)
		.orient("bottom")
		.ticks(5);

   var yAxis = d3.svg.axis()
		.scale(yScale)
		.orient("left")
		.ticks(5);

	var voronoi = d3.geom.voronoi()
		.x(function(d){ return  xScale(d.x) })
		.y(function(d){ return  yScale(d.y) })
		.clipExtent([[padding,padding/2],[w - (padding + (padding/2)),h - padding]])


	drawCharts(normalLayer, false)
	drawCharts(powerLayer, true)


    function drawCharts(layer, flag) {
        var cell = layer.selectAll("g")
            .data(dataset)
            .enter()
            .append('g');

         cell.append("circle")
            .attr("cx", function(d) {
               return xScale(d.x);
            })
            .attr("cy", function(d) {
               return yScale(d.y);
            })
            .attr("r", function(d) {
               return d.r;
            })

       if(flag) dataset.forEach(weight(.2, dataset))

        var pathArray = voronoi(dataset);

        cell.append("svg:path")
            .attr("class", "cell")
            .attr({
                "class":"cell",
                "d":function(d, i) { return "M" + pathArray[i].join("L") + "Z"},
                stroke:"#FF1493",
                fill:"white",
                "fill-opacity": 0.4
            })


        layer.append("g")
            .attr("class", "axis")
            .attr("transform", "translate(0," + (h - padding) + ")")
            .call(xAxis);

        layer.append("g")
            .attr("class", "axis")
            .attr("transform", "translate(" + padding + ",0)")
            .call(yAxis);

    }


})();

// reference:http://bl.ocks.org/nitaku/616c4ef99f71d3dab203
function weight(value, nodes) {
	var maxRadius = 30
	var padding = 2
	var quadtree = d3.geom.quadtree(nodes);
	return function(d) {
		var r = d.r + maxRadius + padding
		var nx1 = d.x - r
		var nx2 = d.x + r
		var ny1 = d.y - r
		var ny2 = d.y + r
		quadtree.visit(function(quad, x1, y1, x2, y2) {
			if (quad.point && (quad.point !== d)) {
				var x = d.x - quad.point.x
				var y = d.y - quad.point.y
				var l = Math.sqrt(x * x + y * y)
				var r = d.r + quad.point.r + padding
				if (l < r) {
					l = (l - r) / l * value
					d.x -= x *= l;
					d.y -= y *= l;
					quad.point.x += x
					quad.point.y += y
				}
			}
			return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1
		})
	}
}

</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<title>加重ボロノイ分割テスト</title>
	<style>
	svg {
	width: 449px;
	height: 500px;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
	}

	.axis text {
	font-family: sans-serif;
	font-size: 11px;
	}
	</style>
	<body>
	<svg id="normal"></svg>
	<svg id="power"></svg>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>
	(function(){
	var w = 449;
	var h = 500;
	var padding = 30;
	var pointLength = 25;
	var dataset = [];
	var normalLayer = d3.select("#normal").append("g")
	.attr("width", w)
	.attr("height", h)
	var powerLayer = d3.select("#power").append("g")
	.attr("width", w)
	.attr("height", h)


	for(var x = 0; x < pointLength/2; x++){
	for(var y = 0; y < pointLength/2; y++){
	var newNumber1 = x * 10 + 5;
	var newNumber2 = y * 10 + 5;
	var r = Math.floor(Math.random() * 100)
	dataset.push({x:newNumber1, y:newNumber2, r:r})
	}
	}

	var xScale = d3.scale.linear()
	.domain([0, d3.max(dataset, function(d) { return d.x; })])
	.range([padding, w - padding * 2]);

	var yScale = d3.scale.linear()
	.domain([0, d3.max(dataset, function(d) { return d.y; })])
	.range([h - padding, padding]);

	var rScale = d3.scale.linear()
	.domain([0, d3.max(dataset, function(d) { return d.r; })])
	.range([2, 10]);

	dataset.forEach(function(d) { d.cx = d.x; d.cy = d.y; d.r = rScale(d.r) });


	var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom")
	.ticks(5);

	var yAxis = d3.svg.axis()
	.scale(yScale)
	.orient("left")
	.ticks(5);

	var voronoi = d3.geom.voronoi()
	.x(function(d){ return xScale(d.x) })
	.y(function(d){ return yScale(d.y) })
	.clipExtent([[padding,padding/2],[w - (padding + (padding/2)),h - padding]])


	drawCharts(normalLayer, false)
	drawCharts(powerLayer, true)


	function drawCharts(layer, flag) {
	var cell = layer.selectAll("g")
	.data(dataset)
	.enter()
	.append('g');

	cell.append("circle")
	.attr("cx", function(d) {
	return xScale(d.x);
	})
	.attr("cy", function(d) {
	return yScale(d.y);
	})
	.attr("r", function(d) {
	return d.r;
	})

	if(flag) dataset.forEach(weight(.2, dataset))

	var pathArray = voronoi(dataset);

	cell.append("svg:path")
	.attr("class", "cell")
	.attr({
	"class":"cell",
	"d":function(d, i) { return "M" + pathArray[i].join("L") + "Z"},
	stroke:"#FF1493",
	fill:"white",
	"fill-opacity": 0.4
	})


	layer.append("g")
	.attr("class", "axis")
	.attr("transform", "translate(0," + (h - padding) + ")")
	.call(xAxis);

	layer.append("g")
	.attr("class", "axis")
	.attr("transform", "translate(" + padding + ",0)")
	.call(yAxis);

	}


	})();

	// reference:http://bl.ocks.org/nitaku/616c4ef99f71d3dab203
	function weight(value, nodes) {
	var maxRadius = 30
	var padding = 2
	var quadtree = d3.geom.quadtree(nodes);
	return function(d) {
	var r = d.r + maxRadius + padding
	var nx1 = d.x - r
	var nx2 = d.x + r
	var ny1 = d.y - r
	var ny2 = d.y + r
	quadtree.visit(function(quad, x1, y1, x2, y2) {
	if (quad.point && (quad.point !== d)) {
	var x = d.x - quad.point.x
	var y = d.y - quad.point.y
	var l = Math.sqrt(x * x + y * y)
	var r = d.r + quad.point.r + padding
	if (l < r) {
	l = (l - r) / l * value
	d.x -= x *= l;
	d.y -= y *= l;
	quad.point.x += x
	quad.point.y += y
	}
	}
	return x1 > nx2 \|\| x2 < nx1 \|\| y1 > ny2 \|\| y2 < ny1
	})
	}
	}

	</script>