nanu146/README.md

## README.md

      
    Raw
  

              README.md
            
          
    This example uses Voronoi diagrams to estimate the boudaries of each node. For more on Voronoi layout read https://github.com/d3/d3/wiki/Voronoi-Geom

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
    path {
        stroke: #fff;
    }

    .routes {
    stroke:black;
    stroke-width:1px;
    }

    .NodeIndicator {
        stroke-width:.5px;
        stroke:red;
        fill:red;
        fill-opacity:.5;
    }
    .point {
        fill: #000;
        pointer-events: none;
    }

    .q0-9 {
        fill: rgb(197,27,125);
    }

    .q1-9 {
        fill: rgb(222,119,174);
    }

    .q2-9 {
        fill: rgb(241,182,218);
    }

    .q3-9 {
        fill: rgb(253,224,239);
    }

    .q4-9 {
        fill: rgb(247,247,247);
    }

    .q5-9 {
        fill: rgb(230,245,208);
    }

    .q6-9 {
        fill: rgb(184,225,134);
    }

    .q7-9 {
        fill: rgb(127,188,65);
    }

    .q8-9 {
        fill: rgb(77,146,33);
    }
</style>
<body>
    <script src="//d3js.org/d3.v3.min.js"></script>
    <script>

        var width = 960,
            height = 500;

        var vertices = d3.range(100).map(function (d) {
            return [Math.random() * width, Math.random() * height];
        });

        CoOrdinates = new Array();

        /*var line = d3.svg.line()
            .x(function (d) { return x(d.Calories); })
            .y(function (d) { return y(regression(d.Calories)); });
            */
        var voronoi = d3.geom.voronoi()
            .clipExtent([[0, 0], [width, height]]);

        var svg = d3.select("body").append("svg")
            .attr("width", width)
            .attr("height", height)


        var path = svg.append("g").selectAll("path");

        svg.selectAll("circle")
            .data(vertices.slice(1))
          .enter().append("circle").attr("class","point")
            .attr("transform", function (d) { return "translate(" + d + ")"; })
            .attr("r", 1.5);


        path = path
            .data(voronoi(vertices), polygon);

        path.exit().remove();

        path.enter().append("path")
            .attr("class", function (d, i) { return "q" + (i % 9) + "-9"; })
            .attr("d", polygon);

        path.order();


        function polygon(d) {
            return "M" + d.join("L") + "Z";
        }

        d3.selectAll("path").on("mousemove", function (d, i) {

            CoOrdinates[0] = d.point;
            CoOrdinates[1] = d3.mouse(this);
            svg.selectAll(".routes").remove();
            svg.selectAll(".NodeIndicator").remove();

            NodeIndicator = svg.append("g").attr("class","NodeIndicator").append("circle")
                .attr("r", 10)
                .attr("cx", d.point[0])
                .attr("cy", d.point[1])


            line = svg.append("g").attr("class", "routes").append("line")
                  .attr("x1", CoOrdinates[0][0] )
                  .attr("y1", CoOrdinates[0][1])
                  .attr("x2", CoOrdinates[1][0])
                  .attr("y2", CoOrdinates[1][1])


        }
            );
    </script>
</body>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	path {
	stroke: #fff;
	}

	.routes {
	stroke:black;
	stroke-width:1px;
	}

	.NodeIndicator {
	stroke-width:.5px;
	stroke:red;
	fill:red;
	fill-opacity:.5;
	}
	.point {
	fill: #000;
	pointer-events: none;
	}

	.q0-9 {
	fill: rgb(197,27,125);
	}

	.q1-9 {
	fill: rgb(222,119,174);
	}

	.q2-9 {
	fill: rgb(241,182,218);
	}

	.q3-9 {
	fill: rgb(253,224,239);
	}

	.q4-9 {
	fill: rgb(247,247,247);
	}

	.q5-9 {
	fill: rgb(230,245,208);
	}

	.q6-9 {
	fill: rgb(184,225,134);
	}

	.q7-9 {
	fill: rgb(127,188,65);
	}

	.q8-9 {
	fill: rgb(77,146,33);
	}
	</style>
	<body>
	<script src="//d3js.org/d3.v3.min.js"></script>
	<script>

	var width = 960,
	height = 500;

	var vertices = d3.range(100).map(function (d) {
	return [Math.random() * width, Math.random() * height];
	});

	CoOrdinates = new Array();

	/*var line = d3.svg.line()
	.x(function (d) { return x(d.Calories); })
	.y(function (d) { return y(regression(d.Calories)); });
	*/
	var voronoi = d3.geom.voronoi()
	.clipExtent([[0, 0], [width, height]]);

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height)


	var path = svg.append("g").selectAll("path");

	svg.selectAll("circle")
	.data(vertices.slice(1))
	.enter().append("circle").attr("class","point")
	.attr("transform", function (d) { return "translate(" + d + ")"; })
	.attr("r", 1.5);


	path = path
	.data(voronoi(vertices), polygon);

	path.exit().remove();

	path.enter().append("path")
	.attr("class", function (d, i) { return "q" + (i % 9) + "-9"; })
	.attr("d", polygon);

	path.order();


	function polygon(d) {
	return "M" + d.join("L") + "Z";
	}

	d3.selectAll("path").on("mousemove", function (d, i) {

	CoOrdinates[0] = d.point;
	CoOrdinates[1] = d3.mouse(this);
	svg.selectAll(".routes").remove();
	svg.selectAll(".NodeIndicator").remove();

	NodeIndicator = svg.append("g").attr("class","NodeIndicator").append("circle")
	.attr("r", 10)
	.attr("cx", d.point[0])
	.attr("cy", d.point[1])




	line = svg.append("g").attr("class", "routes").append("line")
	.attr("x1", CoOrdinates[0][0] )
	.attr("y1", CoOrdinates[0][1])
	.attr("x2", CoOrdinates[1][0])
	.attr("y2", CoOrdinates[1][1])


	}
	);
	</script>
	</body>