mbostock/.block

## .block
license: gpl-3.0

## README.md

      
    Raw
  

              README.md
            
          
    Fixing a bug with tick identity in the axis component.

  
## data.tsv

          
            value
            time

            
              6.281247165532879
              1377244506.794737

            
              6.54390022675737
              1377244506.898609

            
              6.640204081632653
              1377244506.994899

            
              6.741292517006802
              1377244507.095995

            
              6.840136054421769
              1377244507.194835

            
              6.940612244897959
              1377244507.295265

            
              7.04047619047619
              1377244507.395149

            
              7.140453514739229
              1377244507.495221

            
              7.24063492063492
              1377244507.59541

            
              7.35625850340136
              1377244507.710992

            
              7.440340136054422
              1377244507.795081

            
              7.540748299319728
              1377244507.895482

            
              7.64079365079365
              1377244507.995466

            
              7.741247165532879
              1377244508.095888

            
              7.841156462585034
              1377244508.195787

            
              7.940022675736961
              1377244508.294706

            
              8.04063492063492
              1377244508.39531

            
              8.140952380952381
              1377244508.49563

            
              8.240294784580499
              1377244508.59497

            
              8.340566893424036
              1377244508.69526

            
              8.440861678004536
              1377244508.795564

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

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

.axis .title {
  font-weight: bold;
  text-anchor: end;
}

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

.x.axis path {
  display: none;
}

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

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var margin = {top: 20.5, right: 30, bottom: 30, left: 40.5},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x = d3.time.scale()
    .range([0, width]);

 var y = d3.scale.linear()
    .range([height, 0]);

 var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

var line = d3.svg.line()
    .x(function(d) { return x(d.time); })
    .y(function(d) { return y(d.value); });

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.tsv("data.tsv", type, function(error, data) {
  x.domain(d3.extent(data, function(d) { return d.time; }));
  y.domain(d3.extent(data, function(d) { return d.value; }));

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("class", "title")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .text("Value");

  svg.append("path")
      .datum(data)
      .attr("class", "line")
      .attr("d", line);
});

function type(d) {
  d.time = new Date(+d.time * 1000);
  d.value = +d.value;
  return d;
}

</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	value	time
	6.281247165532879	1377244506.794737
	6.54390022675737	1377244506.898609
	6.640204081632653	1377244506.994899
	6.741292517006802	1377244507.095995
	6.840136054421769	1377244507.194835
	6.940612244897959	1377244507.295265
	7.04047619047619	1377244507.395149
	7.140453514739229	1377244507.495221
	7.24063492063492	1377244507.59541
	7.35625850340136	1377244507.710992
	7.440340136054422	1377244507.795081
	7.540748299319728	1377244507.895482
	7.64079365079365	1377244507.995466
	7.741247165532879	1377244508.095888
	7.841156462585034	1377244508.195787
	7.940022675736961	1377244508.294706
	8.04063492063492	1377244508.39531
	8.140952380952381	1377244508.49563
	8.240294784580499	1377244508.59497
	8.340566893424036	1377244508.69526
	8.440861678004536	1377244508.795564
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

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

	.axis .title {
	font-weight: bold;
	text-anchor: end;
	}

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

	.x.axis path {
	display: none;
	}

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

	</style>
	<body>
	<script src="//d3js.org/d3.v3.min.js"></script>
	<script>

	var margin = {top: 20.5, right: 30, bottom: 30, left: 40.5},
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	var x = d3.time.scale()
	.range([0, width]);

	var y = d3.scale.linear()
	.range([height, 0]);

	var xAxis = d3.svg.axis()
	.scale(x)
	.orient("bottom");

	var yAxis = d3.svg.axis()
	.scale(y)
	.orient("left");

	var line = d3.svg.line()
	.x(function(d) { return x(d.time); })
	.y(function(d) { return y(d.value); });

	var svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	d3.tsv("data.tsv", type, function(error, data) {
	x.domain(d3.extent(data, function(d) { return d.time; }));
	y.domain(d3.extent(data, function(d) { return d.value; }));

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis);

	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis)
	.append("text")
	.attr("class", "title")
	.attr("transform", "rotate(-90)")
	.attr("y", 6)
	.attr("dy", ".71em")
	.text("Value");

	svg.append("path")
	.datum(data)
	.attr("class", "line")
	.attr("d", line);
	});

	function type(d) {
	d.time = new Date(+d.time * 1000);
	d.value = +d.value;
	return d;
	}

	</script>