Skip to content

Instantly share code, notes, and snippets.

@mbostock

mbostock/.block

Last active Mar 25, 2017
Embed
What would you like to do?
Subsecond Ticks
license: gpl-3.0
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.