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 { font-family: verdana, 'sans-serif'; font-size: 14px }
    .hours text { text-anchor: middle; font-size: 12px; }
    line { stroke: #c8c8c8; }
  </style>
</head>

<body>
  <script>

    var weekday=new Array(7);
    weekday[0]="Monday";
    weekday[1]="Tuesday";
    weekday[2]="Wednesday";
    weekday[3]="Thursday";
    weekday[4]="Friday";
    weekday[5]="Saturday";
    weekday[6]="Sunday";

    var sizeScale = d3.scale.linear().domain([0,1]).range([0,10]);
    var yScale = d3.scale.linear().domain([0, weekday.length - 1]).range([50,500]);
    var xScale = d3.scale.linear().domain([0,23]).range([140,900]);

    var hourRange = d3.range(0,24);
    var weekData = [];
   	for (var d = 0; d<weekday.length; d++)
      {
        var hourData = hourRange.map(function(d) {
          return {
            hour: d,
            intensity: Math.random()
          }});

        weekData.push({
          day: d,
          dayName: weekday[d],
          hours: hourData
        });
      }

    var offset = function(d,offset) {
    	return offset + d*offset;
    }

    var svg = d3.select("body").append("svg");
    svg.selectAll(".day")
      .data(weekData)
      .enter()
    	.append("g").classed("day",true)
    	.each(function(dw)
      {
				d3.select(this).selectAll("circle").data(dw.hours).enter()
        	.append("circle")
          .attr({
              cx: function(d) { return xScale(d.hour); },
              cy: function(d) { return yScale(dw.day); },
              r: 0
            }).transition()
        		.attr("r",function(d){ return sizeScale(d.intensity); } );

      	d3.select(this).append("text").attr({
          x: 10,
          y: function(d) { return sizeScale.range()[1]/2 + yScale(dw.day); },
        }).text(dw.dayName);

      d3.select(this).append("line").attr({
          x1: 10,
          x2: xScale(23),
        	y1: function(d) { return 30 + yScale(dw.day); },
        	y2: function(d) { return 30 + yScale(dw.day); }
        });

      	d3.select(this).selectAll(".tick").data(dw.hours).enter()
      	.append("line").classed("tick",true)
        .attr({
            x1: function(d) { return xScale(d.hour); },
            x2: function(d) { return xScale(d.hour); },
            y1: function(d) { return 20 + yScale(dw.day); },
            y2: function(d) { return 30 + yScale(dw.day); }
          });
    });

    var hours = svg.append("g")
    	.classed("hours", true)
      .selectAll("text").data(hourRange).enter()
      .append("text").attr({
        x: function(d) { return xScale(d); },
        y: function(d) { return 60 + yScale(weekday.length-1); }
    	}).text(function(d) { return d + "h";});

  </script>
</body>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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 { font-family: verdana, 'sans-serif'; font-size: 14px }
	.hours text { text-anchor: middle; font-size: 12px; }
	line { stroke: #c8c8c8; }
	</style>
	</head>

	<body>
	<script>

	var weekday=new Array(7);
	weekday[0]="Monday";
	weekday[1]="Tuesday";
	weekday[2]="Wednesday";
	weekday[3]="Thursday";
	weekday[4]="Friday";
	weekday[5]="Saturday";
	weekday[6]="Sunday";

	var sizeScale = d3.scale.linear().domain([0,1]).range([0,10]);
	var yScale = d3.scale.linear().domain([0, weekday.length - 1]).range([50,500]);
	var xScale = d3.scale.linear().domain([0,23]).range([140,900]);

	var hourRange = d3.range(0,24);
	var weekData = [];
	for (var d = 0; d<weekday.length; d++)
	{
	var hourData = hourRange.map(function(d) {
	return {
	hour: d,
	intensity: Math.random()
	}});

	weekData.push({
	day: d,
	dayName: weekday[d],
	hours: hourData
	});
	}

	var offset = function(d,offset) {
	return offset + d*offset;
	}

	var svg = d3.select("body").append("svg");
	svg.selectAll(".day")
	.data(weekData)
	.enter()
	.append("g").classed("day",true)
	.each(function(dw)
	{
	d3.select(this).selectAll("circle").data(dw.hours).enter()
	.append("circle")
	.attr({
	cx: function(d) { return xScale(d.hour); },
	cy: function(d) { return yScale(dw.day); },
	r: 0
	}).transition()
	.attr("r",function(d){ return sizeScale(d.intensity); } );

	d3.select(this).append("text").attr({
	x: 10,
	y: function(d) { return sizeScale.range()[1]/2 + yScale(dw.day); },
	}).text(dw.dayName);

	d3.select(this).append("line").attr({
	x1: 10,
	x2: xScale(23),
	y1: function(d) { return 30 + yScale(dw.day); },
	y2: function(d) { return 30 + yScale(dw.day); }
	});

	d3.select(this).selectAll(".tick").data(dw.hours).enter()
	.append("line").classed("tick",true)
	.attr({
	x1: function(d) { return xScale(d.hour); },
	x2: function(d) { return xScale(d.hour); },
	y1: function(d) { return 20 + yScale(dw.day); },
	y2: function(d) { return 30 + yScale(dw.day); }
	});
	});

	var hours = svg.append("g")
	.classed("hours", true)
	.selectAll("text").data(hourRange).enter()
	.append("text").attr({
	x: function(d) { return xScale(d); },
	y: function(d) { return 60 + yScale(weekday.length-1); }
	}).text(function(d) { return d + "h";});

	</script>
	</body>