GitNoise/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
    text {
      text-anchor: middle;
      font-size: 1.3em;
    }
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see!
    var svg = d3.select("body").append("svg")

    // force
    function tick(e) {
      node.each(moveToCategoryCenter(e.alpha));

      node
        .attr("cx", function(d){ return d.x })
      	.attr("cy", function(d){ return d.y });
    }

    function randomCategory(val) {
      var category = "a";
      if (val<0.60) category = "b";
      if (val<0.5) category = "c";
			if (val<0.05) category = "d";

      return category;
    }

    var nodes = d3.range(1,100).map(function(d) {
      return {
      	amount: Math.random()*20,
        category: randomCategory(Math.random())
      }
    });

    var categoryCenters = {
      a: {x:100, y: 200},
      b: {x:300, y: 200},
      c: {x:500, y: 200},
      d: {x:700, y: 200},
    }

    var orgCenter = {
      a: {x:400, y: 325},
      b: {x:400, y: 325},
      c: {x:400, y: 325},
      d: {x:400, y: 325},
    }

    var secCategoryCenters = {
      a: {x:250, y: 450},
      b: {x:550, y: 450},
      c: {x:250, y: 450},
      d: {x:550, y: 450}
    }

    var currCenter = orgCenter;

    var labels = [
      { txt: "Category 1", pos: categoryCenters.a },
      { txt: "Category 2", pos: categoryCenters.b },
      { txt: "Category 3", pos: categoryCenters.c },
      { txt: "Category 4", pos: categoryCenters.d }
    ];

    var secLabels = [
      { txt: "Category A", pos: secCategoryCenters.a },
      { txt: "Category B", pos: secCategoryCenters.b },
    ]

    function moveToCategoryCenter(alpha) {
      return function(d,i) {

        var center = currCenter[d.category];

        d.x += (center.x - d.x) * alpha*1.1;
        d.y += (center.y - d.y) * alpha*1.1;
      };
    }

    function charge(d) {
      return d.amount * d.amount * -1.2;
    }

    var force = d3.layout.force()
    	.nodes(nodes)
    	.size([900,350])
    	.on("tick", tick)
    	.charge(charge);

    var node = svg.selectAll("circle")
    	.data(force.nodes())
    	.enter().append("circle")
    	.attr("r", 10)
    	.style({
        "fill": function(d,i) { return i%3 === 0 ? "steelblue" : "orange" },
        "stroke": "#c8c8c8",
      });

    function writeCategories(labelData, cls) {
      svg.selectAll("." + cls).data(labelData).enter()
        .append("text").classed(cls, true)
        .attr({
          x: function(d) { return d.pos.x; },
          y: function(d) { return d.pos.y + 100; }
        })
        .text(function(d) { return d.txt; });
    }

    function writeSecondaryCategory() {

    }

    // init labels
    setInterval(function() {
    	animate();
    }, 5000)

    var split = 1;
 		function animate() {
      svg.selectAll("text").remove();
      if (split === 1) {
        writeCategories(labels, 'prim');
        currCenter = categoryCenters;
      }
      else if (split === 2) {
        writeCategories(secLabels, 'sec')
        currCenter = secCategoryCenters;
      }
      else {
      	currCenter = orgCenter;
        split = 0;
      }

      split = split+1;
      force.start();
    }

  </script>
</body>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	svg { width:100%; height: 100% }
	text {
	text-anchor: middle;
	font-size: 1.3em;
	}
	</style>
	</head>

	<body>
	<script>
	// Feel free to change or delete any of the code you see!
	var svg = d3.select("body").append("svg")

	// force
	function tick(e) {
	node.each(moveToCategoryCenter(e.alpha));

	node
	.attr("cx", function(d){ return d.x })
	.attr("cy", function(d){ return d.y });
	}

	function randomCategory(val) {
	var category = "a";
	if (val<0.60) category = "b";
	if (val<0.5) category = "c";
	if (val<0.05) category = "d";

	return category;
	}

	var nodes = d3.range(1,100).map(function(d) {
	return {
	amount: Math.random()*20,
	category: randomCategory(Math.random())
	}
	});

	var categoryCenters = {
	a: {x:100, y: 200},
	b: {x:300, y: 200},
	c: {x:500, y: 200},
	d: {x:700, y: 200},
	}

	var orgCenter = {
	a: {x:400, y: 325},
	b: {x:400, y: 325},
	c: {x:400, y: 325},
	d: {x:400, y: 325},
	}

	var secCategoryCenters = {
	a: {x:250, y: 450},
	b: {x:550, y: 450},
	c: {x:250, y: 450},
	d: {x:550, y: 450}
	}

	var currCenter = orgCenter;

	var labels = [
	{ txt: "Category 1", pos: categoryCenters.a },
	{ txt: "Category 2", pos: categoryCenters.b },
	{ txt: "Category 3", pos: categoryCenters.c },
	{ txt: "Category 4", pos: categoryCenters.d }
	];

	var secLabels = [
	{ txt: "Category A", pos: secCategoryCenters.a },
	{ txt: "Category B", pos: secCategoryCenters.b },
	]

	function moveToCategoryCenter(alpha) {
	return function(d,i) {

	var center = currCenter[d.category];

	d.x += (center.x - d.x) * alpha*1.1;
	d.y += (center.y - d.y) * alpha*1.1;
	};
	}

	function charge(d) {
	return d.amount * d.amount * -1.2;
	}

	var force = d3.layout.force()
	.nodes(nodes)
	.size([900,350])
	.on("tick", tick)
	.charge(charge);

	var node = svg.selectAll("circle")
	.data(force.nodes())
	.enter().append("circle")
	.attr("r", 10)
	.style({
	"fill": function(d,i) { return i%3 === 0 ? "steelblue" : "orange" },
	"stroke": "#c8c8c8",
	});

	function writeCategories(labelData, cls) {
	svg.selectAll("." + cls).data(labelData).enter()
	.append("text").classed(cls, true)
	.attr({
	x: function(d) { return d.pos.x; },
	y: function(d) { return d.pos.y + 100; }
	})
	.text(function(d) { return d.txt; });
	}

	function writeSecondaryCategory() {

	}

	// init labels
	setInterval(function() {
	animate();
	}, 5000)

	var split = 1;
	function animate() {
	svg.selectAll("text").remove();
	if (split === 1) {
	writeCategories(labels, 'prim');
	currCenter = categoryCenters;
	}
	else if (split === 2) {
	writeCategories(secLabels, 'sec')
	currCenter = secCategoryCenters;
	}
	else {
	currCenter = orgCenter;
	split = 0;
	}

	split = split+1;
	force.start();
	}

	</script>
	</body>