sunrise/sunset

_.md

[ Launch: sunrise/sunset ] 27c9c284c6a8bf775009 by poezn
[ Launch: sunrise/sunset ] 45480655b90dbfe75c7b by poezn

config.json

{"description":"sunrise/sunset","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"styles.css":{"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,"inline-console":true,"thumbnail":"http://i.imgur.com/udcWYN1.png"}

data.csv

inlet.js

var raw_data = tb.data;
var format = d3.time.format.utc("%m %d, %Y / %I:%M %p");
var w = tb.sw,
    h = tb.sh;

var data = _.map(raw_data, function(d, i) {
  
  d.sunrise = format.parse(d.month + " " + d.day + ", 2014 / " + d.sunrise);
  d.sunset = format.parse(d.month + " " + d.day + ", 2014 / " + d.sunset);
  return d;
})

console.log(tributary) 

var scaleTime = d3.time.scale.utc()
.domain([new Date(2014, 0, 1), new Date(2015, 0, 1)])
.range([0, w])

var scaleDay = d3.scale.linear()
.domain([0, 86400000])
.range([0, h])

var lineSunrise = d3.svg.area()
.x(function(d) {
  return scaleTime(d.sunrise)
})
.y0(function(d) {
  return 0
})
.y1(function(d) {
  return scaleDay(d.sunrise % 86400000)
});


var lineSunset = d3.svg.area()
.x(function(d) {
  return scaleTime(d.sunset)
})
.y0(function(d) {
  return h
})
.y1(function(d) {
  return scaleDay(d.sunset % 86400000)
});

g.append("rect")
.attr({
  "width": w,
  "height": h
})

g.append("path")
.datum(data)
.attr({
  "d": lineSunrise 
});

g.append("path")
.datum(data)
.attr({
  "d": lineSunset
})

var formatDay = d3.time.format.utc("%I %p");

var axisX = d3.svg.axis()
.scale(scaleTime)
.orient("top")
.ticks(10);

var axisY = d3.svg.axis()
.scale(scaleDay)
.orient("left")
.ticks(10)
.tickFormat(function(d) {
  return formatDay(new Date(d));
});

g.append("g")
.attr({
  "class": "axis x",
  "transform": "translate(0 " + h + ")"
})
.call(axisX)

g.append("g")
.attr({
  "class": "axis y",
  "transform": "translate(" + w + " 0)"
})
.call(axisY)
    
    
g.selectAll(".grid.x")
.data(scaleDay.ticks(10))
.enter().append("path")
.attr({
  "class": "grid x",
  "d": function(d) {
    var yPos = scaleDay(d);
    return "M0 " + yPos + "L" + w + " " + yPos;
  }
})

g.selectAll(".grid.y")
.data(scaleTime.ticks(10))
.enter().append("path")
.attr({
  "class": "grid x",
  "d": function(d) {
    var xPos = scaleTime(d);
    return "M" + xPos + " 0L" + xPos + " " + h;
  }
})

styles.css

path {
  stroke: none;
  fill: #a3dbfe;
  opacity: 0.5;
}

rect {
  fill: #fff9d1;
}

.axis text {
  font-size: 12px;
}

.axis line {
  stroke: #000000;
}

.axis path {
  fill: none;
}

path.grid {
  stroke: #888888;
  stroke-dasharray: 5 5;
}