Plotting temperature data from a CSV using d3 - http://www.samansari.info/2015/12/using-d3-to-plot-logged-temperature.html

plotTemperatures.js

// Generate an SVG bar plot of temperatures with axes

var dataset; // global dataset populated by d3.csv, used by plotData
function plotData()
{
  //Width and height
  var w = 800;
  var h = 400;

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

  var barPadding = 0;
  var padding = 30;

  // Scales
  var xScale = d3.time.scale()
                       .domain([d3.min(dataset, function(d){return new Date(d.datetime+"-07:00");}),
                                d3.max(dataset, function(d){return new Date(d.datetime+"-07:00");})])
                       .range([padding,w-padding]);

  var yScale = d3.scale.linear()
                       .domain([d3.min(dataset, function(d){return d.out_temperature;}),
                                d3.max(dataset, function(d){return d.out_temperature;})])
                       .rangeRound([h-padding,padding])
                       .clamp(true);
  // Bars
  svg.selectAll("rect")
      .data(dataset)
      .enter()
      .append("rect")
      .attr("x", function(d, i) {return xScale(new Date(d.datetime+"-07:00"));})
      .attr("y", function(d) {return yScale(d.out_temperature);})
      .attr("width", function(d) {return (w-padding*2)/dataset.length;})
      .attr("fill", function(d) {
          return "rgb(0, 0, " + Math.round((d.out_temperature * 155)+100) + ")";
      })
      .attr("height", function(d) {return h-padding-yScale(d.out_temperature);})
      ;

    // Axes
    var datetimeFormatter = d3.time.format("%a %b %d %I:%M %p");

    var xAxis = d3.svg.axis()
                  .scale(xScale)
                  .orient("bottom")
                  .tickFormat(datetimeFormatter)
                  .ticks(4);
    var yAxis = d3.svg.axis()
                  .scale(yScale)
                  .orient("left");

    svg.append("g")
      .attr("class", "axis")
      .attr("transform", "translate(0," + (h - padding) + ")")
      .call(xAxis);

    svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(" + padding + ",0)")
    .call(yAxis);

    // Mouse Overlay
    var focus = svg.append("g")
      .attr("class", "focus")
      .style("display", "none");

    focus.append("circle")
        .attr("r", 4.5);

    focus.append("text")
        .attr("x", 9)
        .attr("dy", ".35em");
    
    svg.append("rect")
      .attr("class", "overlay")
      .attr("width", w)
      .attr("height", h)
      .on("mouseover", function() { focus.style("display", null); })
      .on("mouseout", function() { focus.style("display", "none"); })
      .on("mousemove", mousemove);

  bisectDate = d3.bisector(function(d) { return new Date(d.datetime+"-07:00"); }).left;

  function mousemove() {
    var x0 = xScale.invert(d3.mouse(this)[0]),
        i = bisectDate(dataset, x0, 1),
        d0 = dataset[i - 1],
        d1 = dataset[i],
        d = x0 - d0.datetime > d1.datetime - x0 ? d1 : d0;
    focus.attr("transform",
      "translate(" + xScale(new Date(d.datetime+"-07:00")) + "," + yScale(d.out_temperature) + ")");
    focus.select("text").text(
      datetimeFormatter(new Date(d.datetime+"-07:00")) + 
      " - " + d.out_temperature+"°C");
  }
}

// Load data from CSV
d3.csv('../data/R2015_06_13.csv', function(data) {
  dataset = data;
  plotData();
});

// queue()
//     .defer(d3.csv, "../data/R2015_06_12.csv")
//     .defer(d3.csv, "../data/R2015_06_13.csv")
//     .defer(d3.csv, "../data/R2015_06_14.csv")
//     .await(combine);

// function combine(error, big_data_1, big_data_2, big_data_3) {
//     if (error) {
//         console.log(error);
//     }
//     dataset = d3.merge([big_data_1, big_data_2, big_data_3]);
//     plotData();
// }