Precipitation CA 1895-2014

_.md

[ Launch: Precip ] 9699810 by poezn

config.json

{"description":"Precipitation CA 1895-2014","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data.tsv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"styles.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"index.html":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/ZRsFcGS.png"}

data.csv

index.html

<img src="https://pbs.twimg.com/media/Bit0VzRCYAABuUc.png" style="position: absolute; left: 650px; top: 20px"/>

inlet.js

var rawData = tb.data;

var values = _.chain(rawData)
.map(function(d, i) {
  return _.map(d3.range(0, 12), function(ind) {
      var val = +d["m" + ind];
    return {
      data: val >= 0 ? +d["m" + ind] : null,
      year: +d.year,
      month: ind
    }
  })
})
.flatten()
.value();

values = values.slice(6);

var startYear = 1895;

var data = d3.range(startYear, new Date().getFullYear())
.map(function(d, i) {
  return {
    year: +d,
    data: _.filter(values.slice(i*12, (i+1)*12), function(d) { return !_.isNull(d.data)})
  }
}); 
//console.log(data)

var aggregates = _.map(data, function(d, i) {
  return {
    year: d.year,
    data: _.map(d.data, function(val, i) {
      return d3.sum(d.data.slice(0, i+1), function(d, i) { return d.data });
    }),
    sum: d3.sum(d.data, function(d, i) { return d.data }),
    numMonths: d.data.length
  }
});

var extremes = _.chain(aggregates)
.filter(function(d, i) { return d.numMonths == 12 })
.sortBy(function(d, i) { return d.sum })
.value();
//console.log(extremes)


var driest = extremes[0];
var wettest  = extremes[extremes.length - 1];
var recent  = aggregates[aggregates.length - 1];
var averageValues = d3.range(0, 12).map(function(d, month) {
  var vals = _.chain(data)
  .map(function(d, i) { return d.data[month] ? d.data[month].data : null })
  .value();
  
  return d3.mean(vals);
});

var averageYear = _.map(averageValues, function(val, i) {
  return d3.sum(averageValues.slice(0, i));
});
  
console.log(recent)
//console.log(wettest, driest)
 
 
var w = 486,
    h = 370;

var g = g.append("g")
.attr("transform", "translate(50, 50)")

var xScale = d3.scale.linear()
.domain([0, 11])
.range([0, w]);

var yScale = d3.scale.linear()
.domain([0, d3.max(aggregates, function(d, i) { return d.data[d.data.length - 1]; })])
.range([h, 0]);

var line = d3.svg.line()
    .x(function(d) { return xScale(d.x); })
    .y(function(d, i) { return yScale(d.y); });

var years = g.selectAll("g")
.data(aggregates);

years.enter().append("g");

years.append("path") 
.datum(function(d, i) {
  return _.map(d.data, function(precip, i) {
    return {
      x: i,
      y: precip
    }
  })
})
.attr({
  "class": "year",
  "d": function(d, i) {
    return line(d);
  } 
});

years
.on("mouseover", function(d, i) {
  g.selectAll("text.year")
  .style("opacity", function(t, i) {
    return t.year == d.year ? 1 : 0
  })
})
.on("mouseout", function(d, i) {
  g.selectAll("text.year")
  .style("opacity", 0)
})
;

g.append("path")
.datum(_.map(driest.data, function(precip, i) {
    return {
      x: i,
      y: precip
    }
  })
)
.attr({
  "class": "driest",
  "d": function(d, i) {
    return line(d);
  }
});
g.append("path")
.datum(_.map(wettest.data, function(precip, i) {
    return {
      x: i,
      y: precip
    }
  })
)
.attr({
  "class": "wettest",
  "d": function(d, i) {
    return line(d);
  }
});
g.append("path")
.datum(_.map(driest.data, function(precip, i) {
    return {
      x: i,
      y: precip
    }
  })
)
.attr({
  "class": "driest",
  "d": function(d, i) {
    return line(d);
  }
});

g.append("path")
.datum(_.map(recent.data, function(precip, i) {
    return {
      x: i,
      y: precip
    }
  })
)
.attr({
  "class": "recent",
  "d": function(d, i) {
    return line(d);
  }
});

g.append("path")
.datum(_.map(averageYear, function(precip, i) {
    return {
      x: i,
      y: precip
    }
  })
)
.attr({
  "class": "average",
  "d": function(d, i) {
    return line(d);
  }
});

years.append("text") 
.datum(function(d, i) {
  return d;
})
.attr({
  "x": w + 10,
  "y": function(d, i) {
    return yScale(d.data[d.data.length - 1]) + 7;
  },
  "opacity": function(d, i) {
    return d == recent || d == wettest || d == driest  ? 1 : 0
  },
  "class": function(d, i) {
    return d == recent ? "recent" :
    d == wettest ? "wettest" : 
    d == driest ? "driest" : "year"
  }
})
.text(function(d, i) { return d.year + "/" + (d.year+1) });

g.append("text") 
.datum(averageYear)
.attr({
  "x": w + 10,
  "y": function(d, i) {
    return yScale(d[d.length - 1]) + 7;
  },
  "class": "average"
})
.text("Average");


var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom")

var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left");

g.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + h + ")")
      .call(xAxis)


g.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Precipitation (in)");


var months = ["Jul", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan", "Feb", "Mar", "Apr", "May", "Jun"];

g.selectAll(".axis.x text")
.text(function(d, i) {
	return months[d]
})

styles.css

path {
  stroke: #000;
 opacity: 0.1;
  fill: none;
}

path.average, path.driest, path.wettest, path.recent {
  stroke-width: 2;
  opacity: 1;
  fill: none;
}

path.average {
  stroke: #000000;
}

path.driest {
  stroke: #ff0000;
}
  
path.wettest {
  stroke: #0000FF;
}
    
path.recent {
  stroke: #70319F;
}

path.year:hover {
  stroke-width: 5;
  opacity: 0.5
}

  
text.average {
  fill: #000000;
}

text.driest {
  fill: #ff0000;
}
  
text.wettest {
  fill: #0000FF;
}
    
text.recent {
  fill: #70319F;
}
  
.axis text {
  font-size: 12px;
}