Meekohi/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Force layout with background Voronoi cells

  
## index.html

<!DOCTYPE html>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style>

.link {
  fill: none;
  stroke: #666;
  stroke-width: 1.5px;
}

.node circle {
  fill: #ccc;
  stroke: #fff;
  stroke-width: 1.5px;
}

text {
  font: 10px sans-serif;
  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>


// Data setup
var nodes = [];
var links = [];
for(var i = 0; i < 100; i++){
  nodes[i] = {
    id: i,
    name: i,
    raw: 0.1,
    x:4*i,
    y:1000*Math.sin(i/100)
  };
  if(i>0)
    links.push({
      source: nodes[i],
      target: nodes[i-1],
      distance: 10
    });
  for(var j = 0; j < i-1; j++){
    if(Math.random() < 0.001) {
      links.push({
        source: nodes[j],
        target: nodes[i],
        distance: 10
      });
    }
  }
}

var width = window.innerWidth,
    height = window.innerHeight;

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

// Vornoi
var voronoi = d3.geom.voronoi()
  .x(function(node){return node.x;})
  .y(function(node){return node.y;})
  .clipExtent([[0, 0], [width, height]]);

var path = svg.append("g").selectAll("path").data(voronoi(nodes), polygon);
path.exit().remove();
path.enter().append("path")
  .attr("class", function(d, i) { return "q" + (i % 9) + "-9"; })
  .attr("d", polygon);

// Force
var force = d3.layout.force()
    .nodes(d3.values(nodes))
    .links(links)
    .size([width, height])
    .linkDistance(10)
    .charge(-10)
    .theta(0)
    .gravity(0.01)
    .on("tick", tick)
    .start();

var link = svg.selectAll(".link")
    .data(force.links())
  .enter().append("line")
    .attr("class", "link");

var node = svg.selectAll(".node")
    .data(force.nodes())
  .enter().append("g")
    .attr("class", "node")
    .call(force.drag);

node.append("circle")
    .attr("r", function(d){ return 5+3*(parseInt(d.raw) || 0); });

// node.append("text")
//     .attr("x", 12)
//     .attr("dy", ".35em")
//     .text(function(d) { return d.name; });

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

function tick() {

  link
      .attr("x1", function(d) { return d.source.x; })
      .attr("y1", function(d) { return d.source.y; })
      .attr("x2", function(d) { return d.target.x; })
      .attr("y2", function(d) { return d.target.y; });

  node
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

  path.data(voronoi(nodes)).attr("d", polygon);
}

function mouseover() {
  d3.select(this).select("circle").transition()
      .duration(750)
      .attr("r", 16);
}

function mouseout() {
  d3.select(this).select("circle").transition()
      .duration(750)
      .attr("r", 8);
}

</script>
</body>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png

	<!DOCTYPE html>
	<meta charset="utf-8">
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<style>

	.link {
	fill: none;
	stroke: #666;
	stroke-width: 1.5px;
	}

	.node circle {
	fill: #ccc;
	stroke: #fff;
	stroke-width: 1.5px;
	}

	text {
	font: 10px sans-serif;
	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>


	// Data setup
	var nodes = [];
	var links = [];
	for(var i = 0; i < 100; i++){
	nodes[i] = {
	id: i,
	name: i,
	raw: 0.1,
	x:4*i,
	y:1000*Math.sin(i/100)
	};
	if(i>0)
	links.push({
	source: nodes[i],
	target: nodes[i-1],
	distance: 10
	});
	for(var j = 0; j < i-1; j++){
	if(Math.random() < 0.001) {
	links.push({
	source: nodes[j],
	target: nodes[i],
	distance: 10
	});
	}
	}
	}

	var width = window.innerWidth,
	height = window.innerHeight;

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

	// Vornoi
	var voronoi = d3.geom.voronoi()
	.x(function(node){return node.x;})
	.y(function(node){return node.y;})
	.clipExtent([[0, 0], [width, height]]);

	var path = svg.append("g").selectAll("path").data(voronoi(nodes), polygon);
	path.exit().remove();
	path.enter().append("path")
	.attr("class", function(d, i) { return "q" + (i % 9) + "-9"; })
	.attr("d", polygon);

	// Force
	var force = d3.layout.force()
	.nodes(d3.values(nodes))
	.links(links)
	.size([width, height])
	.linkDistance(10)
	.charge(-10)
	.theta(0)
	.gravity(0.01)
	.on("tick", tick)
	.start();

	var link = svg.selectAll(".link")
	.data(force.links())
	.enter().append("line")
	.attr("class", "link");

	var node = svg.selectAll(".node")
	.data(force.nodes())
	.enter().append("g")
	.attr("class", "node")
	.call(force.drag);

	node.append("circle")
	.attr("r", function(d){ return 5+3*(parseInt(d.raw) \|\| 0); });

	// node.append("text")
	// .attr("x", 12)
	// .attr("dy", ".35em")
	// .text(function(d) { return d.name; });

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

	function tick() {

	link
	.attr("x1", function(d) { return d.source.x; })
	.attr("y1", function(d) { return d.source.y; })
	.attr("x2", function(d) { return d.target.x; })
	.attr("y2", function(d) { return d.target.y; });

	node
	.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

	path.data(voronoi(nodes)).attr("d", polygon);
	}

	function mouseover() {
	d3.select(this).select("circle").transition()
	.duration(750)
	.attr("r", 16);
	}

	function mouseout() {
	d3.select(this).select("circle").transition()
	.duration(750)
	.attr("r", 8);
	}

	</script>
	</body>
	</html>