gistfile1.js

$(document).ready(function(){
  $('#mixes a').click(function(){
    var id = $(this).attr('data-mix_id')
    $('#scatter').empty()
    scatter(id, d3.select('#scatter'));
  })

  var chart = $("#scatter svg"),
      aspect = chart.width() / chart.height(),
      container = chart.parent();
  $(window).on("resize", function() {
      var targetWidth = container.width();
      chart.attr("width", targetWidth);
      chart.attr("height", Math.round(targetWidth / aspect));
  }).trigger("resize")
});

function scatter(data, selection){
  data.forEach(function(d) {
    // Time and speed to ON or OFF but don't overlap as percents.
    if( ! d.HST  || d.HST  === 0){  d.HST = 0 } else {  d.HST = 90 }
    if( ! d.CRS1 || d.CRS1 === 0){ d.CRS1 = 0 } else { d.CRS1 = 80 }
    if( ! d.CRS2 || d.CRS2 === 0){ d.CRS2 = 0 } else { d.CRS2 = 85 }
  });

  var margin = {
    top: 30,
    right: 45,
    bottom: 20,
    left: 45
  };

  var width = selection.style('width').replace('px', '') - margin.left - margin.right;
  var height = selection.style('height').replace('px', '') - margin.top - margin.bottom;

  var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse;

  var x = d3.time.scale()
    .domain(d3.extent(data, function (d) {
      return parseDate(d.time);
    }))
    .range([0, width]);

  var yl = d3.scale.linear()
    .domain([0, d3.max( data, function(d){ return Math.max(d.S1,d.S2) }) ])
    .range([height, 0]);

  var yr = d3.scale.linear()
    .domain([0, d3.max( data, function(d){ return Math.max(d.KG) }) ])
    .range([height, 0]);

  var yp = d3.scale.linear()
    .domain([0, 100])
    .range([height, 0]);

  var line = function(d, sensor){
    if(sensor === 'CRS1' || sensor === 'CRS2' || sensor === 'HST'){
      svg.select("." + sensor)
        .style("stroke-dasharray", "3, 3" )
      return d3.svg.line()
        .interpolate("step-after")
        .x(function (d) {
          return x(parseDate(d.time));
        })
        .y(function (d, i) {
           return yp(d[sensor]);
        });
    }
    if(sensor === 'KG'){
      return d3.svg.line()
        .x(function (d) {
          return x(parseDate(d.time));
        })
        .y(function (d, i) {
           return yr(d[sensor]);
        });
    }
    if(sensor === 'S1' || sensor === 'S2'){
      return d3.svg.line()
        .interpolate("monotone")
        .x(function (d) {
          return x(parseDate(d.time));
        })
        .y(function (d, i) {
           return yl(d[sensor]);
        });
    }
  }

  var zoom = d3.behavior.zoom()
    .x(x)
    .on("zoom", zoomed);

  svg = selection.append("svg:svg")
    .attr('width', '100%')
    .attr('height', '100%')
    .attr('preserveAspectRatio','xMidYMid meet')
    .append("svg:g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    .call(zoom);

  svg.append("svg:rect")
    .attr("width", width)
    .attr("height", height)
    .attr('preserveAspectRatio','xMidYMid meet')
    .attr("class", "plot");

  var make_x_axis = function () {
    return d3.svg.axis()
      .scale(x)
      .orient("bottom")
      .ticks(10);
  };

  var make_y_axis = function () {
    return d3.svg.axis()
      .scale(yl)
      .orient("left")
      .ticks(10);
  };

  svg.append("g")
    .attr("class", "x grid")
    .attr("transform", "translate(0," + height + ")")
    .call(make_x_axis()
      .tickSize(-height, 0, 0)
      .tickFormat("")
    );

  svg.append("g")
    .attr("class", "y grid")
    .call(make_y_axis()
      .tickSize(-width, 0, 0)
      .tickFormat("")
    );

  var chartBody = svg.append("g")
    .attr("clip-path", "url(#clip)");

  Object.keys(data[0]).forEach(function(key){
    chartBody.append("svg:path")
      .datum(data)
      .attr("class", key)
      .attr("d", line(this,key) );
  })

  var clip = svg.append("svg:clipPath")
    .attr("id", "clip")
    .append("svg:rect")
    .attr("x", 0)
    .attr("y", 0 - margin.top)
    .attr("width", width)
    .attr("height", height + margin.top + margin.bottom);

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

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

  var ylAxis = d3.svg.axis()
    .scale(yl)
    .orient("left")
    .ticks(10);

  svg.append("g")
    .attr("class", "y yl axis")
    .call(ylAxis);

  var yrAxis = d3.svg.axis()
    .scale(yr)
    .orient("right")
    .ticks(10);

  svg.append("g")
    .attr("class", "y yr axis")
    .attr("transform", "translate(" + width + ", 0)")
    .call(yrAxis);

  function zoomed() {
    svg.select(".CRS1")
      .attr("class", "CRS1")
      .attr("d", line(this,'CRS1'));
    svg.select(".CRS2")
      .attr("class", "CRS2")
      .attr("d", line(this,'CRS2'));
    svg.select(".HST")
      .attr("class", "HST")
      .attr("d", line(this,'HST'));
    svg.select(".S1")
      .attr("class", "S1")
      .attr("d", line(this,'S1'));
    svg.select(".S2")
      .attr("class", "S2")
      .attr("d", line(this,'S2'));
    svg.select(".KG")
      .attr("class", "KG")
      .attr("d", line(this,'KG'));

    svg.select(".x.axis").call(xAxis);

    svg.select(".x.grid")
      .call(make_x_axis()
      .tickSize(-height, 0, 0)
      .tickFormat(""));
  }
}