markarios/.gistup

## .gistup
gistup

## index.html
  <!DOCTYPE html>
<html>
<!--
Author: Mark Rios
Acknowledgments: Michael Bostock, Scott Murray, Nick Qi Zhu
-->
<head>
<title>D3 Page Template</title>
<meta charset="utf-8">
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<!--   <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script> -->


<style type="text/css">

body {
  font: 10px sans-serif;
  background: white;
}

</style>
</head>
<body>
<script>


var data = [],
    dataPoints = 10;

var width = window.screen.width,
    height = window.screen.height;

function rand(value) {
  return Math.floor(value*Math.random());
}

var ballRadius = width/100;
// http://colorbrewer2.org/?type=qualitative&scheme=Set3&n=4
var colorBrewer = ['rgba(141,211,199,.25)','rgba(255,255,179,.25)','rgba(190,186,218,.25)','rgba(251,128,114,.25)'];

function randColor(){
return colorBrewer[Math.floor(Math.random()*4)];
};


for (var i = dataPoints - 1; i >= 0; i--) {
   data.push({radius : ballRadius,x: rand(width), y: rand(height), color: randColor() });
};

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


function render(data) {
    d3.select("svg").selectAll("circle")
            .data(data)
           .enter()
            .append("circle");

     d3.select("svg").selectAll("circle")
            .data(data)
            .attr("r", function(d) {return d.radius;})
            .attr("cx",function(d) {return d.x})
            .attr("cy",function(d) {return d.y})
            .attr("fill",function(d){return d.color});

     d3.select("body").selectAll("circle")
            .data(data)
            .exit()
            .remove();
  }

setInterval(function () {
  render(data);
  for (var i = dataPoints - 1; i >= 0; i--) {
   data.push({radius : ballRadius,x: rand(width), y: rand(height), color:randColor() });
  };
}, 10);


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

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html>
	<!--
	Author: Mark Rios
	Acknowledgments: Michael Bostock, Scott Murray, Nick Qi Zhu
	-->
	<head>
	<title>D3 Page Template</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
	<!-- <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script> -->


	<style type="text/css">

	body {
	font: 10px sans-serif;
	background: white;
	}

	</style>
	</head>
	<body>
	<script>


	var data = [],
	dataPoints = 10;

	var width = window.screen.width,
	height = window.screen.height;

	function rand(value) {
	return Math.floor(value*Math.random());
	}

	var ballRadius = width/100;
	// http://colorbrewer2.org/?type=qualitative&scheme=Set3&n=4
	var colorBrewer = ['rgba(141,211,199,.25)','rgba(255,255,179,.25)','rgba(190,186,218,.25)','rgba(251,128,114,.25)'];

	function randColor(){
	return colorBrewer[Math.floor(Math.random()*4)];
	};


	for (var i = dataPoints - 1; i >= 0; i--) {
	data.push({radius : ballRadius,x: rand(width), y: rand(height), color: randColor() });
	};

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



	function render(data) {
	d3.select("svg").selectAll("circle")
	.data(data)
	.enter()
	.append("circle");

	d3.select("svg").selectAll("circle")
	.data(data)
	.attr("r", function(d) {return d.radius;})
	.attr("cx",function(d) {return d.x})
	.attr("cy",function(d) {return d.y})
	.attr("fill",function(d){return d.color});

	d3.select("body").selectAll("circle")
	.data(data)
	.exit()
	.remove();
	}

	setInterval(function () {
	render(data);
	for (var i = dataPoints - 1; i >= 0; i--) {
	data.push({radius : ballRadius,x: rand(width), y: rand(height), color:randColor() });
	};
	}, 10);


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