thole/index.html

## index.html
<!DOCTYPE html>
<html>
	<head>
		<style>
			.line {
			  fill: none;
			  stroke-width: 1.5px;
			}
			rect {
			   fill: steelblue;
			}
			text {
				font-size : 6pt;
				font-family:sans-serif;
				fill:steelblue;
			}
			path.line {
				stroke-width:1.8;
				fill: none;
			}
			circle.incoming{
				fill:steelblue;
			}
			path.incoming {
				stroke:steelblue;
			}
			circle.outgoing{
				fill:crimson;
			}
			path.outgoing {
				stroke:crimson;
			}
		</style>
		<script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script>


<!-- #Feef1f3 -->
	</head>
	<body style="background-color:#edeff1">
		<div class="rightborder" id="bc_chartD"></div>

	</body>
	<script type="text/javascript">

			var chart = new Object();

			chart.insertLineChart = function(config, data){

					var svg = config.element.append("svg");
						svg.attr("width",config.w)
						svg.attr("height",config.h);

					var chart = svg.append("g")
						.attr("class", "chart");

					var y = d3.scale.linear()
					      		.domain([0, d3.max(data,function(d){
										if(d.incoming > d.outgoing){return d.incoming;}else{return d.outgoing;};})])
					      		.range([0+config.mh, config.h-config.mh]);


					var x = d3.scale.linear().domain([0, data.length]).range([config.mw, config.w-config.mw]);


					chart.attr("transform","matrix(1 0 0 -1 0 100)");


					chart.selectAll("circle.incoming")
						.data(data)
						.enter().append("circle")
						.attr("cx", function(d, i) { return x(i);})
						.attr("cy", config.mw)
						.attr("r", 2)
						.attr("class", "incoming")
						.transition()
						.duration(1000)
						.attr("cy", function(d, i) { return y(d.incoming);})


					chart.selectAll("circle.outgoing")
						.data(data)
						.enter().append("circle")
						.attr("cx", function(d, i) { return x(i);})
						.attr("cy", config.mw)
						.attr("r", 2)
						.attr("class", "outgoing")
						.transition()
						.duration(1000)
						.attr("cy", function(d, i) { return y(d.outgoing);})


					var line_base = d3.svg.line()
						.x(function(d, i) { return x(i); })
						.y(function(d, i) { return config.mw;})

					var line_in = d3.svg.line()
						 .x(function(d, i) { return x(i); })
						 .y(function(d, i) { return y(d.incoming);})

					var line_out = d3.svg.line()
						 .x(function(d, i) { return x(i); })
					     .y(function(d, i) { return y(d.outgoing);})


					chart.append("svg:path")
						.attr("d", line_base(data))
						.attr("class","line outgoing")
						.transition()
						.duration(1000)
						.attr("d", line_out(data));


					chart.append("svg:path")
						.attr("class","line incoming")
						.attr("d", line_base(data))
						.transition()
						.duration(1000)
						.attr("d", line_in(data));


					chart.append("rect")
						.attr("x",config.mw)
						.attr("y",config.mh/2)
						.attr("width",config.w-(5*config.mw))
						.attr("height",1.5)
						.style("fill-opacity",0.5);

					svg.selectAll("text")
						.data(data)
						.enter().append("text")
						.attr("x", function(d, i) { return x(i);})
						.attr("y", config.h)
						.style("text-anchor","middle")
						.text(function(d,i){return getMonthFirstLetter(d.timestamp);});
			}


			function getMonthFirstLetter(date){
				var i = date.getMonth();
				if(i== '0'){return "J";}
				else if(i== '1'){return "F";}
				else if(i== '2'){return "M";}
				else if(i== '3'){return "A";}
				else if(i== '4'){return "M";}
				else if(i== '5'){return "J";}
				else if(i== '6'){return "J";}
				else if(i== '7'){return "A";}
				else if(i== '8'){return "S";}
				else if(i== '9'){return "O";}
				else if(i== '10'){return "N";}
				else if(i== '11'){return "D";}
				else{return null;}
			}

			function generateScattern(size){

				var objects = [];
				for(var i=0; i < size;i++){
					var object = {};
					var timestamp = new Date();
				 	timestamp = new Date()
					timestamp.setYear(2011)
					timestamp.setDate(1)
					timestamp.setMonth(i%12)

					object.timestamp = timestamp;
					object.incoming = Math.round(Math.random() * 1000);
					object.outgoing = Math.round(Math.random() * 1000);
					objects.push(object);
				}
				return objects;
			}


			chart.insertLineChart({h:100,w:400,mh:20,mw:10,element:d3.select("#bc_chartD")},generateScattern(12));
		</script>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	.line {
	fill: none;
	stroke-width: 1.5px;
	}
	rect {
	fill: steelblue;
	}
	text {
	font-size : 6pt;
	font-family:sans-serif;
	fill:steelblue;
	}
	path.line {
	stroke-width:1.8;
	fill: none;
	}
	circle.incoming{
	fill:steelblue;
	}
	path.incoming {
	stroke:steelblue;
	}
	circle.outgoing{
	fill:crimson;
	}
	path.outgoing {
	stroke:crimson;
	}
	</style>
	<script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script>


	<!-- #Feef1f3 -->
	</head>
	<body style="background-color:#edeff1">
	<div class="rightborder" id="bc_chartD"></div>

	</body>
	<script type="text/javascript">

	var chart = new Object();

	chart.insertLineChart = function(config, data){

	var svg = config.element.append("svg");
	svg.attr("width",config.w)
	svg.attr("height",config.h);

	var chart = svg.append("g")
	.attr("class", "chart");

	var y = d3.scale.linear()
	.domain([0, d3.max(data,function(d){
	if(d.incoming > d.outgoing){return d.incoming;}else{return d.outgoing;};})])
	.range([0+config.mh, config.h-config.mh]);



	var x = d3.scale.linear().domain([0, data.length]).range([config.mw, config.w-config.mw]);


	chart.attr("transform","matrix(1 0 0 -1 0 100)");


	chart.selectAll("circle.incoming")
	.data(data)
	.enter().append("circle")
	.attr("cx", function(d, i) { return x(i);})
	.attr("cy", config.mw)
	.attr("r", 2)
	.attr("class", "incoming")
	.transition()
	.duration(1000)
	.attr("cy", function(d, i) { return y(d.incoming);})


	chart.selectAll("circle.outgoing")
	.data(data)
	.enter().append("circle")
	.attr("cx", function(d, i) { return x(i);})
	.attr("cy", config.mw)
	.attr("r", 2)
	.attr("class", "outgoing")
	.transition()
	.duration(1000)
	.attr("cy", function(d, i) { return y(d.outgoing);})


	var line_base = d3.svg.line()
	.x(function(d, i) { return x(i); })
	.y(function(d, i) { return config.mw;})

	var line_in = d3.svg.line()
	.x(function(d, i) { return x(i); })
	.y(function(d, i) { return y(d.incoming);})

	var line_out = d3.svg.line()
	.x(function(d, i) { return x(i); })
	.y(function(d, i) { return y(d.outgoing);})


	chart.append("svg:path")
	.attr("d", line_base(data))
	.attr("class","line outgoing")
	.transition()
	.duration(1000)
	.attr("d", line_out(data));


	chart.append("svg:path")
	.attr("class","line incoming")
	.attr("d", line_base(data))
	.transition()
	.duration(1000)
	.attr("d", line_in(data));


	chart.append("rect")
	.attr("x",config.mw)
	.attr("y",config.mh/2)
	.attr("width",config.w-(5*config.mw))
	.attr("height",1.5)
	.style("fill-opacity",0.5);

	svg.selectAll("text")
	.data(data)
	.enter().append("text")
	.attr("x", function(d, i) { return x(i);})
	.attr("y", config.h)
	.style("text-anchor","middle")
	.text(function(d,i){return getMonthFirstLetter(d.timestamp);});
	}


	function getMonthFirstLetter(date){
	var i = date.getMonth();
	if(i== '0'){return "J";}
	else if(i== '1'){return "F";}
	else if(i== '2'){return "M";}
	else if(i== '3'){return "A";}
	else if(i== '4'){return "M";}
	else if(i== '5'){return "J";}
	else if(i== '6'){return "J";}
	else if(i== '7'){return "A";}
	else if(i== '8'){return "S";}
	else if(i== '9'){return "O";}
	else if(i== '10'){return "N";}
	else if(i== '11'){return "D";}
	else{return null;}
	}

	function generateScattern(size){

	var objects = [];
	for(var i=0; i < size;i++){
	var object = {};
	var timestamp = new Date();
	timestamp = new Date()
	timestamp.setYear(2011)
	timestamp.setDate(1)
	timestamp.setMonth(i%12)

	object.timestamp = timestamp;
	object.incoming = Math.round(Math.random() * 1000);
	object.outgoing = Math.round(Math.random() * 1000);
	objects.push(object);
	}
	return objects;
	}


	chart.insertLineChart({h:100,w:400,mh:20,mw:10,element:d3.select("#bc_chartD")},generateScattern(12));
	</script>
	</html>