d3 stuff

bars.js

var w = 500;
var h = 100;
var barPadding = 2;
var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
                11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
var svg = d3.select("#contents")
            .append("svg")
            .attr("width", w)
            .attr("height", h);
var bars = svg.selectAll("rect")
           .data(dataset)
           .enter()
           .append("rect")
           .attr("x", function(d, i) {
             return i * (w / dataset.length);
           })
           .attr("y", function(d) {
             return h - d * 4;
           })
           .attr("width", w / dataset.length - barPadding)
           .attr("height", function(d){
             return d * 4;
           })
           .attr("fill", function(d) {
             return "rgb(" + (d * 10) + ", 0, 0)";
           })
           .attr("stroke", "black");
  var labels = svg.selectAll("text")
               .data(dataset)
               .enter()
               .append("text")
               .text(function(d) {
                 return d;
               })
               .attr("x", function(d, i) {
                 return i * (w / dataset.length) + 11;
               })
               .attr("y", function(d) {
                 return h - (d * 4) + 15;
               })
               .attr("text-anchor", "middle")
               .attr("fill", "white")
</script>

lines.js

console.time("Fetching data")
data = d3.json("http://localhost:8003/v1/metrics/Z?start=131540692000&end=1315493280000&station=NAB1&network=YW",
  function(d) {
    r = d.results;
    console.timeEnd("Fetching data")
    console.log("Rendering " + r.length + "points.")
    render(r);
  }
);

var w = 1000;
var h = 400;
var padding = 20;

var svg = d3.select("#contents")
            .append("svg")
            .attr("width", w)
            .attr("height", h);

function render(dataset) {
  var xScale = d3.scaleLinear()
                       .domain([
                         d3.min(dataset, function(d) { return d[0]; }),
                         d3.max(dataset, function(d) { return d[0]; })
                       ])
                       .range([padding, w - padding * 4]);

  var yScale = d3.scaleLinear()
                       .domain([
                         d3.min(dataset, function(d) { return d[1]; }),
                         d3.max(dataset, function(d) { return d[1]; })
                       ])
                       .range([h - padding, padding]);

  var xAxis = d3.axisBottom()
                .ticks(10)
                .tickFormat(d3.timeFormat("%H:%M:%S"))
                .scale(xScale);

  var yAxis = d3.axisRight()
                .scale(yScale);

  var line = d3.line()
    .x(function(d) {
      return xScale(d[0]);
    })
    .y(function(d) {
      return yScale(d[1]);
    });

  svg.append("g")
      .call(xAxis)
      .selectAll("text")
        .style("text-anchor", "end")
        .attr("dx", "-.8em")
        .attr("dy", ".15em")
        .attr("transform", "rotate(-65)");
  svg.append("g")
      .call(yAxis);

  console.time("Render");
  svg.append("path")
        .data([dataset])
        .attr("class", "line")
        .attr("d", line);
  console.timeEnd("Render");

};