Skip to content

Instantly share code, notes, and snippets.

@bjorngi
Last active Aug 29, 2015
Embed
What would you like to do?
fml
{"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}
date temp
2015-07-14:14:30 38.7
2015-07-14:16:30 39.5
2015-07-14:20:30 39.9
2015-07-15:00:30 38.5
2015-07-15:10:40 37.0
2015-07-15:12:10 38.3
2015-07-15:16:30 40.1
2015-07-15:18:30 40.5
2015-07-15:18:30 38.9
2015-07-15:21:20 39.5
2015-07-15:23:10 38.1
2015-07-16:06:10 37.5
2015-07-16:06:50 37.3
2015-07-16:07:10 37.3
2015-07-16:07:30 37.1
2015-07-16:13:30 38.7
2015-07-16:14:30 39.7
2015-07-16:15:30 39.4
2015-07-16:23:30 38.4
2015-07-17:02:10 39.3
2015-07-17:04:50 38.1
2015-07-17:06:10 37.1
2015-07-17:10:00 38.1
2015-07-17:12:00 38.9
2015-07-17:13:50 39.5
2015-07-17:16:40 38.1
2015-07-17:18:10 38.3
2015-07-17:19:30 37.9
2015-07-17:22:10 36.9
2015-07-17:23:00 36.6
2015-07-18:01:00 36.5
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);
});
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment