[ Launch: simple horizon++ ] 776f3cff0830ca6958a1 by enjalot
[ Launch: simple horizon++ ] de713c5d78463d41e09c by enjalot
-
-
Save enjalot/776f3cff0830ca6958a1 to your computer and use it in GitHub Desktop.
kijani horizon
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"description":"kijani horizon","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"horizon.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},"style.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.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,"controls":{"garden":"asprod3"},"thumbnail":"http://i.imgur.com/DU81wHV.png"} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function() { | |
d3.horizon = function() { | |
var bands = 1, // between 1 and 5, typically | |
mode = "offset", // or mirror | |
interpolate = "linear", // or basis, monotone, step-before, etc. | |
x = d3_horizonX, | |
y = d3_horizonY, | |
width = 960, | |
height = 40; | |
var color = d3.scale.linear() | |
.domain([-1, 0, 1]) | |
.range(["#d62728", "#fff", "#1f77b4"]); | |
// For each small multiple… | |
function horizon(g) { | |
g.each(function(d) { | |
var g = d3.select(this), | |
xMin = Infinity, | |
xMax = -Infinity, | |
yMax = -Infinity, | |
x0, // old x-scale | |
y0, // old y-scale | |
t0, | |
id; // unique id for paths | |
// Compute x- and y-values along with extents. | |
var data = d.map(function(d, i) { | |
var xv = x.call(this, d, i), | |
yv = y.call(this, d, i); | |
if (xv < xMin) xMin = xv; | |
if (xv > xMax) xMax = xv; | |
if (-yv > yMax) yMax = -yv; | |
if (yv > yMax) yMax = yv; | |
return [xv, yv]; | |
}); | |
// Compute the new x- and y-scales, and transform. | |
var x1 = d3.scale.linear().domain([xMin, xMax]).range([0, width]), | |
y1 = d3.scale.linear().domain([0, yMax]).range([0, height * bands]), | |
t1 = d3_horizonTransform(bands, height, mode); | |
// Retrieve the old scales, if this is an update. | |
if (this.__chart__) { | |
x0 = this.__chart__.x; | |
y0 = this.__chart__.y; | |
t0 = this.__chart__.t; | |
id = this.__chart__.id; | |
} else { | |
x0 = x1.copy(); | |
y0 = y1.copy(); | |
t0 = t1; | |
id = ++d3_horizonId; | |
} | |
// We'll use a defs to store the area path and the clip path. | |
var defs = g.selectAll("defs") | |
.data([null]); | |
// The clip path is a simple rect. | |
defs.enter().append("defs").append("clipPath") | |
.attr("id", "d3_horizon_clip" + id) | |
.append("rect") | |
.attr("width", width) | |
.attr("height", height); | |
d3.transition(defs.select("rect")) | |
.attr("width", width) | |
.attr("height", height); | |
// We'll use a container to clip all horizon layers at once. | |
g.selectAll("g") | |
.data([null]) | |
.enter().append("g") | |
.attr("clip-path", "url(#d3_horizon_clip" + id + ")"); | |
// Instantiate each copy of the path with different transforms. | |
var path = g.select("g").selectAll("path") | |
.data(d3.range(-1, -bands - 1, -1).concat(d3.range(1, bands + 1)), Number); | |
var d0 = d3_horizonArea | |
.interpolate(interpolate) | |
.x(function(d) { return x0(d[0]); }) | |
.y0(height * bands) | |
.y1(function(d) { return height * bands - y0(d[1]); }) | |
(data); | |
var d1 = d3_horizonArea | |
.x(function(d) { return x1(d[0]); }) | |
.y1(function(d) { return height * bands - y1(d[1]); }) | |
(data); | |
path.enter().append("path") | |
.style("fill", color) | |
.attr("transform", t0) | |
.attr("d", d0); | |
d3.transition(path) | |
.style("fill", color) | |
.attr("transform", t1) | |
.attr("d", d1); | |
d3.transition(path.exit()) | |
.attr("transform", t1) | |
.attr("d", d1) | |
.remove(); | |
// Stash the new scales. | |
this.__chart__ = {x: x1, y: y1, t: t1, id: id}; | |
}); | |
} | |
horizon.bands = function(_) { | |
if (!arguments.length) return bands; | |
bands = +_; | |
color.domain([-bands, 0, bands]); | |
return horizon; | |
}; | |
horizon.mode = function(_) { | |
if (!arguments.length) return mode; | |
mode = _ + ""; | |
return horizon; | |
}; | |
horizon.colors = function(_) { | |
if (!arguments.length) return color.range(); | |
color.range(_); | |
return horizon; | |
}; | |
horizon.interpolate = function(_) { | |
if (!arguments.length) return interpolate; | |
interpolate = _ + ""; | |
return horizon; | |
}; | |
horizon.x = function(_) { | |
if (!arguments.length) return x; | |
x = _; | |
return horizon; | |
}; | |
horizon.y = function(_) { | |
if (!arguments.length) return y; | |
y = _; | |
return horizon; | |
}; | |
horizon.width = function(_) { | |
if (!arguments.length) return width; | |
width = +_; | |
return horizon; | |
}; | |
horizon.height = function(_) { | |
if (!arguments.length) return height; | |
height = +_; | |
return horizon; | |
}; | |
horizon.colors = function(_) { | |
if (!arguments.length) return color.range(); | |
color.range(_); | |
return horizon; | |
}; | |
return horizon; | |
}; | |
var d3_horizonArea = d3.svg.area(), | |
d3_horizonId = 0; | |
function d3_horizonX(d) { return d[0]; } | |
function d3_horizonY(d) { return d[1]; } | |
function d3_horizonTransform(bands, h, mode) { | |
return mode == "offset" | |
? function(d) { return "translate(0," + (d + (d < 0) - bands) * h + ")"; } | |
: function(d) { return (d < 0 ? "scale(1,-1)" : "") + "translate(0," + (d - bands) * h + ")"; }; | |
} | |
})(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var HOUR = 1000 * 60 * 60 | |
var today = Math.floor(+new Date() / HOUR) * HOUR; //round now to the latest hour mark | |
var earlier = today - 2 * HOUR; //get data from two hours before that | |
d3.json("http://50.19.108.27/arduino/list", function(err, gardens) { | |
console.log("gardens", gardens); | |
var gnames = []; | |
gardens.forEach(function(d) { | |
if(d && +new Date(d.time) > earlier) { | |
gnames.push(d.report.garden.name) | |
} | |
}) | |
gnames.sort(function(a,b) { return b < a ? 1 : -1 }); | |
var garden = tributary.control({name:"garden", options:gnames}); | |
//var start = "2014-05-15T02:03:07.000Z" | |
//var end = "2014-05-16T01:17:31.000Z" | |
var start = new Date(earlier).toString() | |
var end = new Date(today).toString() | |
var num = 500; | |
var url = "http://50.19.108.27/arduino/garden/range/" + garden + "?start_time=" + start + "&end_time=" + end + "&num=" + num; | |
console.log("url:",url); | |
d3.json(url, function(err, reports) { | |
//console.log(reports); | |
if(err) { | |
console.log(err); | |
return; | |
} | |
console.log("first report", reports[0]) | |
var data = []; | |
reports.forEach(function(d) { | |
if(!d || d.report.gb_level_sensor.gbLevel === undefined) return; | |
data.push([ d.timestamp, d.report.gb_level_sensor.gbLevel ]); | |
}); | |
var colors = ["#ded04e", "#ffffff", "#1a859c"]; | |
var width = 500; | |
var height = 200; | |
var svg = d3.select("svg"); | |
var chart = d3.horizon() | |
.width(width) | |
.height(height) | |
.bands(8) | |
.height(height) | |
.mode("mirror") | |
.interpolate("step-after") | |
.colors(colors); | |
var g = svg.append("g") | |
.attr("transform", "translate(" + [ 51, 50 ] +")") | |
g.append("rect") | |
.attr({ | |
x: -1, | |
y: -1, | |
width: width + 2, | |
height: height + 2 | |
}) | |
g.datum(data); | |
chart(g); | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#gif { | |
display: none; | |
} | |
#controls { | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment