fml

_.md

[ Launch: fml ] d39abdd844c0daec1774 by bjorngi
[ Launch: test ] 4653053 by enjalot
[ Launch: test ] 4652017 by enjalot
[ Launch: test ] 4582399 by enjalot

config.json

{"description":"fml","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"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},"feber.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"tab":"edit","display_percent":0.7,"thumbnail":"http://i.imgur.com/Z4ghHZY.png","fullscreen":false,"ajax-caching":true}

feber.csv

inlet.js

var data = tributary.feber;
var margin = {top: 20, right: 80, bottom: 100, left: 40},
    w = 880 - margin.left - margin.right,
    h = 500 - margin.top - margin.bottom;

var svg = d3.select("svg")
    .attr("width", w + margin.left + margin.right)
    .attr("height", h + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");



var parseDate = d3.time.format("%Y-%m-%d:%H:%M").parse;
            
var line = d3.svg.line()
	.x(function(d) {
      return xScale(parseDate(d.date));
	 }) 
	.y(function(d) {
      return yScale(d.temp);
     })
	.interpolate('basis');


var yScale = d3.scale.linear()
	.domain([35, 41])
	.range([h, 0]);


var xScale = d3.time.scale()
	.domain([new Date(2015,6,14,12), new Date(2015,6,18,1)])
    .range([0, w]);

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

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

svg.append('g')
	.append('rect')
.attr({
  x: 0,
  y: 222,
  width: 760,
  height: 157.5
})
.classed('yeah bg', true)

svg.append('g')
.append('rect')
.attr({
  x: 0,
  y: 100,
  width: 760,
  height: 122
})
.classed('ok bg', true)

svg.append('g')
	.append('rect')
.attr({
  x: 0,
  y: 0,
  width: 760,
  height: 100
})
.classed('fml bg', true)

svg.append("g")
	.attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("x", -20)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Fuck this");

svg.append("g")
	.attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("x", -120)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Less awesome");

svg.append("g")
	.attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("x", -235)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("EVERYTHING IS AWESOME");

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

var source = svg.selectAll('.line')
    .data([data])
	.enter()

source
	.append('g')
	.attr('class', 'line')
	.append('path')
	.attr('d', function(d) {
		return line(d);
});

style.css

body {
  font: 10px sans-serif;
} 
 
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
 
.x.axis path {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
 

.line path {
  fill: none;
  stroke: black;
  stroke-width: 3px;
}

.bg {
  opacity: 0.1;
}

.fml {
  fill: red;
}

.ok {
  fill: yellow;
}

.yeah {
  fill: green;
}