// Convenience functions that provide parameters for
// the chart. In most cases these could be defined as
// CSS rules, but for this particular implementation
// we're avoiding CSS so that we can easily extract
// the SVG into a presentation.

// What colors are we going to use for the different
// datasets.
var color = function(i) {
  var colors = ["#CA0000", "#A2005C",
                "#7EBD00", "#007979"];
  return colors[i % colors.length]
};

// What symbols are we going to use for the different
// datasets.
var symbol = function(i) {
  var symbols = ["circle", "diamond",
                 "square", "triangle-up",
                 "triangle-down", "cross"];
  return d3.svg.symbol()
           .size(100)
           .type(symbols[i % symbols.length]);
};

// Define the dimensions of the visualization.
var margin = {top: 60, right: 160, bottom: 30, left: 50},
    width = 840 - margin.left - margin.right,
    height = 520 - margin.top - margin.bottom;

// Since this is a line chart, it graphs x- and y-values.
// Define scales for each. Both scales span the size of
// the chart. The x-scale is time-based (assuming months)
// and the y-scale is linear. Note that the y-scale
// ranges from `height` to 0 (opposite of what might be
// expected) because the SVG coordinate system places a
// y-value of `0` at the _top_ of the container.

// At this point we don't know the domain for either of
// the x- or y-values since that depends on the data
// itself (which we'll retrieve in a moment) so we only
// define the type of each scale and its range. We'll
// add a definition of the domain after we retrieve the
// actual data.
var x = d3.time.scale()
          .range([0, width]),
    y = d3.scale.linear()
          .range([height, 0]);

// Define the axes for both x- and y-values. For the
// x-axis, we specify a format for the tick labels
// (just the month abbreviation) since we only have
// the month value for the data. (The year is unknown.)
// Without the override, D3 will try to display an
// actual date (e.g. with a year).
var xAxis = d3.svg.axis()
  .scale(x)
  .tickSize(0, 0, 0)
  .tickPadding(10)
  .tickFormat(d3.time.format("%b"))
  .orient("bottom");

// For the y-axis we add grid lines by specifying a
// negative value for the major tick mark size. We
// set the size of the grid lines to be the entire
// width of the graph.
var yAxis = d3.svg.axis()
  .scale(y)
  .tickSize(-width, 0, 0)
  .tickPadding(10)
  .orient("left");

// Define a convenience function to create a line on
// the chart. The line's x-values are dates and the
// y-values are the temperature values. The result
// of this statement is that `line` will be a
// function that, when passed an array of data
// points, returns an SVG path whose coordinates
// match the x- and y-scales of the chart.
var line = d3.svg.line()
  .x(function(d) { return x(d.date); })
  .y(function(d) { return y(d.temp); });

// Create the SVG container for the visualization and
// define its dimensions. Within that container, add a
// group element (`<g>`) that can be transformed via
// a translation to account for the margins.
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 + ")");

// Retrieve the data. Even though this particular
// data file is small enough to embed directly, it's
// generally a good idea to keep the data separate.
d3.json('data.json', function(error, datasets) {

  // We're not bothering to check for error returns
  // for this simple demonstration.

  // Convert the data into a more "understandable"
  // JavaScript object. Instead of just an array
  // of numbers, make it an array of objects with
  // appropriate properties.
  datasets.forEach(function(dataset) {
    dataset.data = dataset.data.map(function(d,i) {

      // Although no year is given for the data
      // (so we won't display one), we can simply
      // pick an abitrary year (2013, in this case)
      // to use for our dates. We'll start in January
      // and increment by the index of the data value.
      // The data value itself is the temperature.
      return {
        "date": d3.time.month.offset(
          new Date(2013,0,1), i),
        "temp": d
      };
    });
  })

  // Now that we have the data, we can calculate
  // the domains for our x- and y-values. The x-values
  // are a little tricky because we want to add additional
  // space before and after the data. We start by getting
  // the extent of the data, and then extending that range
  // 16 days before the first date and 15 days after the
  // last date. To account for datasets of differing
  // lengths, we get the maximum length from among all
  // datasets.
  var xMin = new Date(2013,0,1),
      xMax = d3.time.month.offset(xMin,
               d3.max(datasets, function(dataset) {
                 return dataset.data.length-1;
               }));
  x.domain([d3.time.day.offset(xMin,-16),
            d3.time.day.offset(xMax,15)]);

  // For the y-values, we want the chart to show the
  // minimum and maximum values from all the datasets.
  var yMin = d3.min(datasets, function(dataset) {
               return d3.min(dataset.data, function(d) {
                 return d.temp;
               });
             });
  var yMax = d3.max(datasets, function(dataset) {
               return d3.max(dataset.data, function(d) {
                 return d.temp;
               });
             });

  // The `.nice()` function gives the domain nice
  // rounded limits.
  y.domain([yMin, yMax]).nice();

  // With the domains defined, we now have enough
  // information to complete the axes. We position
  // the x-axis by translating it below the chart.
  svg.append("g")
       .attr("class", "x axis")
       .attr("transform", "translate(0," + height + ")")
       .call(xAxis);

  // For the y-axis, we add a label.
  svg.append("g")
       .attr("class", "y axis")
       .call(yAxis)
     .append("text")
       .attr("font-size", "18")
       .attr("transform", "rotate(-90)")
       .attr("y", 9)
       .attr("dy", ".71em")
       .attr("text-anchor", "end")
       .text("Temperature (°C)");

  // Style the axes. As with other styles, these
  // could be more easily defined in CSS. For this
  // particular code, though, we're avoiding CSS
  // to make it easy to extract the resulting SVG
  // and paste it into a presentation.
  svg.selectAll(".axis line, .axis path")
       .attr("fill", "none")
       .attr("stroke", "#bbbbbb")
       .attr("stroke-width", "2px")
       .attr("shape-rendering", "crispEdges");

  svg.selectAll(".axis text")
       .attr("font-size", "18");

  svg.selectAll(".axis .tick line")
       .attr("stroke", "#d0d0d0")
       .attr("stroke-width", "1");

  // Plot the data and the legend
  datasets.forEach(function(dataset, i) {

      // Individual points
      svg.selectAll(".point.dataset-" + i)
           .data(dataset.data)
         .enter().append("path")
           .attr("class", "point dataset-" + i)
           .attr("fill", color(i))
           .attr("stroke", color(i))
           .attr("d", symbol(i))
           .attr("transform", function(d) {
             return "translate(" + x(d.date) +
                         "," + y(d.temp) + ")";
           });

      // Connect the points with lines
      svg.append("path")
         .datum(dataset.data)
         .attr("class", "line dataset-" + i)
         .attr("fill", "none")
         .attr("stroke", color(i))
         .attr("stroke-width", "3")
         .attr("d", line);

      // Legend. In general, it would be cleaner
      // to create an SVG group for the legend,
      // position that group, and then position
      // the individual elements of the legend
      // relative to the group. We're not doing
      // it in this case because we want to do
      // some fancy animation tricks with the
      // resulting SVG within the presentation.
      d3.select("svg").append("path")
         .attr("class", "point dataset-" + i)
         .attr("fill", color(i))
         .attr("stroke", color(i))
         .attr("d", symbol(i))
         .attr("transform", "translate(" +
           (margin.left + width + 40) + "," +
           (24*i + margin.top + height/2 -
            24*datasets.length/2 - 6) + ")")

      d3.select("svg").append("line")
         .attr("class", "line dataset-" + i)
         .attr("stroke", color(i))
         .attr("stroke-width", "3")
         .attr("x1", margin.left + width + 30)
         .attr("x2", margin.left + width + 50)
         .attr("y1", 24*i + margin.top + height/2 -
                     24*datasets.length/2 - 6)
         .attr("y2", 24*i + margin.top + height/2 -
                     24*datasets.length/2 - 6);

      d3.select("svg").append("text")
         .attr("transform", "translate(" +
           (margin.left + width + 60) + "," +
           (24*i + margin.top + height/2 -
            24*datasets.length/2) + ")")
         .attr("class", "legend")
         .attr("font-size", "18")
         .attr("text-anchor", "left")
         .text(dataset.name);

  });

  // Chart decoration. Once more we're avoiding
  // CSS for styling, but usually that would be
  // a better approach.
  d3.select("svg").append("text")
       .attr("transform", "translate(" +
         (margin.left + width/2 + 20) + ",20)")
       .attr("class", "title")
       .attr("font-size", "24")
       .attr("text-anchor", "middle")
       .text("Monthly Average Temperature");

  d3.select("svg").append("text")
       .attr("transform", "translate(" +
         (margin.left + width/2 + 20) + ",48)")
       .attr("class", "subtitle")
       .attr("font-size", "18")
       .attr("text-anchor", "middle")
       .text("Source: WorldClimate.com");
});