markarios/index.html

## index.html
  <!DOCTYPE html>
<html>
<!-- Acknowledgements
Michael Bostock, D3 Library
Nick Qi Zhu, Styles.css, Line Graph and Rescalable Axis
Scott Murray, Scale and Axis  -->
<!-- Visualization Engineer
Mark Rios-->
<head>
<meta charset="utf-8">
<title>StatVisions Front Page, Draft 1</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<!-- <script src="http://d3js.org/colorbrewer.v1.min.js"></script> -->
</head>
<body>

<div class="content"></div>

<script type="text/javascript">

// setup ////////////////////////////////////////////////////////
var width = 500,
    height = 500
    margin = 40,
    xAxisLength = width - margin,
    yAxisLength = height - margin,
    data = [],
    dataPoints = 3,
    ballRadius = width/100,
    timeStop = 1250,
    // http://colorbrewer2.org/?type=qualitative&scheme=Set3&n=4
    colorBrewer =
   ['rgba(141,211,199,.9)',
    'rgba(255,255,179,.9)',
    'rgba(190,186,218,.9)',
    'rgba(251,128,114,.9)'];

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

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

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

var xScale = d3.scale.linear()
  .domain([0, d3.max(data, function(d) { return d.x; })])
  .range([0, xAxisLength]);

var yScale = d3.scale.linear()
  .domain([d3.max(data, function(d) { return d.y; }),0 ])
  .range([0,yAxisLength]);

////////////////////////////////////////////////////////////

function renderXAxis() {

  xAxis = d3.svg.axis()
    .scale(xScale)
    .tickSubdivide(1)
    .orient("bottom");

  svg.append("g")
    .attr("class","x-axis")
    .attr("transform", function(){
      return "translate(" + margin + "," + (height - margin) + ")";})
    .call(xAxis);
}

function renderYAxis() {

  yAxis = d3.svg.axis()
    .scale(yScale)
    .tickSubdivide(1)
    .orient("left");

  svg.append("g")
    .attr("class","y-axis")
    .attr("transform", function(){
      return "translate(" + margin + ",0)";})
    .call(yAxis);
}

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 xScale(d.x) + margin})
            .attr("cy",function(d) {return yScale(d.y)})
            .attr("fill",function(d){return d.color});

     d3.select("body").selectAll("circle")
            .data(data)
            .exit()
            .remove();
  }
    function renderXGridlines(){
        var lines = d3.selectAll("g.x-axis g.tick")
                .select("line.grid-line")
                .remove(); // <-D

        lines = d3.selectAll("g.x-axis g.tick")
                .append("line")
                .classed("grid-line", true)

        lines.attr("x1", 0)
                .attr("y1", 0)
                .attr("x2", 0)
                .attr("y2", - yAxisLength);
    }

    function renderYGridlines(){
        var lines = d3.selectAll("g.y-axis g.tick")
                .select("line.grid-line").remove();

        lines = d3.selectAll("g.y-axis g.tick")
                .append("line")
                .classed("grid-line", true)

        lines.attr("x1", 0)
            .attr("y1", 0)
            .attr("x2", xAxisLength)
            .attr("y2", 0);
    }

var svg = d3.select("div.content").append("svg")
  .attr("class","axis")
  .attr("width",width)
  .attr("height",height);

renderXAxis();
renderYAxis();
renderXGridlines();
renderYGridlines();

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

setInterval(function(){ stopTimer() },timeStop);

function stopTimer() {
  clearInterval(nIntervId);
};


</script>

</body>
</html>

## styles.css
body {
    font-family: "helvetica";
}

button {
    margin: 0 7px 0 0;
    background-color: #f5f5f5;
    border: 1px solid #dedede;
    border-top: 1px solid #eee;
    border-left: 1px solid #eee;

    font-size: 12px;
    line-height: 130%;
    text-decoration: none;
    font-weight: bold;
    color: #565656;
    cursor: pointer;
}

.box {
    width: 200px;
    height: 200px;
    margin: 40px;
    float: left;
    text-align: center;
    border: #969696 solid thin;
    padding: 5px;
}

.red {
    background-color: #e9967a;
    color: #f0f8ff;
}

.blue {
    background-color: #add8e6;
    color: #f0f8ff;
}

.cell {
    min-width: 40px;
    min-height: 20px;
    margin: 5px;
    float: left;
    text-align: center;
    border: #969696 solid thin;
    padding: 5px;
}

.fixed-cell {
    min-width: 40px;
    min-height: 20px;
    margin: 5px;
    position: fixed;
    text-align: center;
    border: #969696 solid thin;
    padding: 5px;
}

.h-bar {
    min-height: 15px;
    min-width: 10px;
    background-color: steelblue;
    margin-bottom: 2px;
    font-size: 11px;
    color: #f0f8ff;
    text-align: right;
    padding-right: 2px;
}

.v-bar {
    min-height: 1px;
    min-width: 30px;
    background-color: #4682b4;
    margin-right: 2px;
    font-size: 10px;
    color: #f0f8ff;
    text-align: center;
    width: 10px;
    display: inline-block;
}

.baseline {
    height: 1px;
    background-color: black;
}

.clear {
    clear: both;
}

.selected {
    background-color: #f08080;
}

.control-group {
    padding-top: 10px;
    margin: 10px;
}

.table {
    width: 70%;
}

.table td, th {
    padding: 5px;
}

.table-header {
    background-color: #00AFEF;
    font-weight: bold;
}

.table-row-odd {
    background-color: #f0f8ff;
}

.table-row-odd {
    background-color: #d3d3d3;
}

.code {
    display: inline-block;
    font-style: italic;
    background-color: #d3d3d3;
    border: #969696 solid thin;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.countdown{
    width: 150px;
    height: 150px;
    font-size: 5em;
    font-weight: bold;
}

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

.axis text {
    font: 10px sans-serif;
}

.axis .grid-line{
    stroke: black;
    shape-rendering: crispEdges;
    stroke-opacity: .2;
}

.line{
    fill: none;
    stroke: steelblue;
    stroke-width: 2;
}

.dot {
  fill: #fff;
  stroke: steelblue;
}

.area {
    stroke: none;
    fill: steelblue;
    fill-opacity: .2;
}

.pie text{
    fill: white;
    font-weight: bold;
}

.circle {
    stroke: none;
    fill: red;
    fill-opacity: .7;
}

.cross {
    stroke: none;
    fill: blue;
    fill-opacity: .7;
}

.diamond {
    stroke: none;
    fill: green;
    fill-opacity: .7;
}

.square{
    stroke: none;
    fill: yellow;
    fill-opacity: .7;
}

.triangle-down{
    stroke: none;
    fill: blueviolet;
    fill-opacity: .7;
}

.triangle-up{
    stroke: none;
    fill: darkred;
    fill-opacity: .7;
}

.bubble{
    fill-opacity: .3;
}

.bar{
    stroke: none;
    fill: steelblue;
}

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html>
	<!-- Acknowledgements
	Michael Bostock, D3 Library
	Nick Qi Zhu, Styles.css, Line Graph and Rescalable Axis
	Scott Murray, Scale and Axis -->
	<!-- Visualization Engineer
	Mark Rios-->
	<head>
	<meta charset="utf-8">
	<title>StatVisions Front Page, Draft 1</title>
	<link rel="stylesheet" type="text/css" href="styles.css">
	<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
	<!-- <script src="http://d3js.org/colorbrewer.v1.min.js"></script> -->
	</head>
	<body>

	<div class="content"></div>

	<script type="text/javascript">

	// setup ////////////////////////////////////////////////////////
	var width = 500,
	height = 500
	margin = 40,
	xAxisLength = width - margin,
	yAxisLength = height - margin,
	data = [],
	dataPoints = 3,
	ballRadius = width/100,
	timeStop = 1250,
	// http://colorbrewer2.org/?type=qualitative&scheme=Set3&n=4
	colorBrewer =
	['rgba(141,211,199,.9)',
	'rgba(255,255,179,.9)',
	'rgba(190,186,218,.9)',
	'rgba(251,128,114,.9)'];

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

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

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

	var xScale = d3.scale.linear()
	.domain([0, d3.max(data, function(d) { return d.x; })])
	.range([0, xAxisLength]);

	var yScale = d3.scale.linear()
	.domain([d3.max(data, function(d) { return d.y; }),0 ])
	.range([0,yAxisLength]);

	////////////////////////////////////////////////////////////

	function renderXAxis() {

	xAxis = d3.svg.axis()
	.scale(xScale)
	.tickSubdivide(1)
	.orient("bottom");

	svg.append("g")
	.attr("class","x-axis")
	.attr("transform", function(){
	return "translate(" + margin + "," + (height - margin) + ")";})
	.call(xAxis);
	}

	function renderYAxis() {

	yAxis = d3.svg.axis()
	.scale(yScale)
	.tickSubdivide(1)
	.orient("left");

	svg.append("g")
	.attr("class","y-axis")
	.attr("transform", function(){
	return "translate(" + margin + ",0)";})
	.call(yAxis);
	}

	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 xScale(d.x) + margin})
	.attr("cy",function(d) {return yScale(d.y)})
	.attr("fill",function(d){return d.color});

	d3.select("body").selectAll("circle")
	.data(data)
	.exit()
	.remove();
	}
	function renderXGridlines(){
	var lines = d3.selectAll("g.x-axis g.tick")
	.select("line.grid-line")
	.remove(); // <-D

	lines = d3.selectAll("g.x-axis g.tick")
	.append("line")
	.classed("grid-line", true)

	lines.attr("x1", 0)
	.attr("y1", 0)
	.attr("x2", 0)
	.attr("y2", - yAxisLength);
	}

	function renderYGridlines(){
	var lines = d3.selectAll("g.y-axis g.tick")
	.select("line.grid-line").remove();

	lines = d3.selectAll("g.y-axis g.tick")
	.append("line")
	.classed("grid-line", true)

	lines.attr("x1", 0)
	.attr("y1", 0)
	.attr("x2", xAxisLength)
	.attr("y2", 0);
	}

	var svg = d3.select("div.content").append("svg")
	.attr("class","axis")
	.attr("width",width)
	.attr("height",height);

	renderXAxis();
	renderYAxis();
	renderXGridlines();
	renderYGridlines();

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

	setInterval(function(){ stopTimer() },timeStop);

	function stopTimer() {
	clearInterval(nIntervId);
	};





	</script>

	</body>
	</html>
	body {
	font-family: "helvetica";
	}

	button {
	margin: 0 7px 0 0;
	background-color: #f5f5f5;
	border: 1px solid #dedede;
	border-top: 1px solid #eee;
	border-left: 1px solid #eee;

	font-size: 12px;
	line-height: 130%;
	text-decoration: none;
	font-weight: bold;
	color: #565656;
	cursor: pointer;
	}

	.box {
	width: 200px;
	height: 200px;
	margin: 40px;
	float: left;
	text-align: center;
	border: #969696 solid thin;
	padding: 5px;
	}

	.red {
	background-color: #e9967a;
	color: #f0f8ff;
	}

	.blue {
	background-color: #add8e6;
	color: #f0f8ff;
	}

	.cell {
	min-width: 40px;
	min-height: 20px;
	margin: 5px;
	float: left;
	text-align: center;
	border: #969696 solid thin;
	padding: 5px;
	}

	.fixed-cell {
	min-width: 40px;
	min-height: 20px;
	margin: 5px;
	position: fixed;
	text-align: center;
	border: #969696 solid thin;
	padding: 5px;
	}

	.h-bar {
	min-height: 15px;
	min-width: 10px;
	background-color: steelblue;
	margin-bottom: 2px;
	font-size: 11px;
	color: #f0f8ff;
	text-align: right;
	padding-right: 2px;
	}

	.v-bar {
	min-height: 1px;
	min-width: 30px;
	background-color: #4682b4;
	margin-right: 2px;
	font-size: 10px;
	color: #f0f8ff;
	text-align: center;
	width: 10px;
	display: inline-block;
	}

	.baseline {
	height: 1px;
	background-color: black;
	}

	.clear {
	clear: both;
	}

	.selected {
	background-color: #f08080;
	}

	.control-group {
	padding-top: 10px;
	margin: 10px;
	}

	.table {
	width: 70%;
	}

	.table td, th {
	padding: 5px;
	}

	.table-header {
	background-color: #00AFEF;
	font-weight: bold;
	}

	.table-row-odd {
	background-color: #f0f8ff;
	}

	.table-row-odd {
	background-color: #d3d3d3;
	}

	.code {
	display: inline-block;
	font-style: italic;
	background-color: #d3d3d3;
	border: #969696 solid thin;
	padding: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
	}

	.countdown{
	width: 150px;
	height: 150px;
	font-size: 5em;
	font-weight: bold;
	}

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

	.axis text {
	font: 10px sans-serif;
	}

	.axis .grid-line{
	stroke: black;
	shape-rendering: crispEdges;
	stroke-opacity: .2;
	}

	.line{
	fill: none;
	stroke: steelblue;
	stroke-width: 2;
	}

	.dot {
	fill: #fff;
	stroke: steelblue;
	}

	.area {
	stroke: none;
	fill: steelblue;
	fill-opacity: .2;
	}

	.pie text{
	fill: white;
	font-weight: bold;
	}

	.circle {
	stroke: none;
	fill: red;
	fill-opacity: .7;
	}

	.cross {
	stroke: none;
	fill: blue;
	fill-opacity: .7;
	}

	.diamond {
	stroke: none;
	fill: green;
	fill-opacity: .7;
	}

	.square{
	stroke: none;
	fill: yellow;
	fill-opacity: .7;
	}

	.triangle-down{
	stroke: none;
	fill: blueviolet;
	fill-opacity: .7;
	}

	.triangle-up{
	stroke: none;
	fill: darkred;
	fill-opacity: .7;
	}

	.bubble{
	fill-opacity: .3;
	}

	.bar{
	stroke: none;
	fill: steelblue;
	}