gistfile1.txt

$(function() {
  var margin = { top: 300, right: 100, bottom: 100, left: 100 },
    width = 1400 - margin.right - margin.left,
    height = 1080 - margin.top - margin.bottom;

  var parseTime = d3.timeParse("%H:%M:%S");
  var x = d3.scaleTime().range([0, width]);
  var y = d3.scaleLinear().range([height, 0]);
  var log2y = d3.scaleLinear().range([height, 0]);


  // var log2y = d3.scaleLinear().range([height, 0]);
  var valueline = d3.line()
    .curve(d3.curveMonotoneX)
    .x(function (d) { return x(d.date); })
    .y(function (d) { return y(d.value); });

  var log2valueline = d3.line()
    .x(function (d) { return x(d.date); })
    .y(function (d) { return y(Math.log2(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.select("body").attr("align", "center");

  d3.csv("data.csv", function (error, data) {
    if (error) {
      throw error;
    }
    var log2data = [];
    var log10data = [];
    data.forEach(function (d, index) {
      d.date = parseTime(d.date);
      d.value = +d.value;
      log2data[index] = { "date": d.date, "value": Math.log2(+d.value) };
      log10data[index] = { "date": d.date, "value": Math.log10(+d.value) };
    });

    x.domain(d3.extent(data, function (d) { return d.date; }));
    y.domain([0, d3.max(data, function (d) { return d.value; })]);
    log2y.domain([0, d3.max(log2data, function (d) { return d.value; })]);
    svg.append("path")
      .data([data])
      .attr("class", "line")
      .attr("d", valueline);

    svg.append("g")
      .attr("class", "xaxis")
      .attr("class", "chart")
      .attr("transform", "translate(0, " + height + ")")
      .call(d3.axisBottom(x).ticks(d3.timeMinute.every(10)));

    var yaxis = svg.append("g")
      .attr("class", "yaxis")
      .attr("class", "chart")
      .call(d3.axisLeft(y).ticks(5));

    yaxis
      .transition().duration(500).delay(2000)
      .call(d3.axisLeft(log2y).ticks(4));

    svg.selectAll("path")
      .data([log2data])
      .transition().duration(500).delay(2000)
      .attr("d", valueline);
  });

});