Skip to content

Instantly share code, notes, and snippets.

@suranyami

suranyami/.block

Created November 14, 2017 02:48
Show Gist options
  • Save suranyami/dea578b21d9c53b437ebaf87cb110f5f to your computer and use it in GitHub Desktop.
Save suranyami/dea578b21d9c53b437ebaf87cb110f5f to your computer and use it in GitHub Desktop.
Download ZIP
fresh block
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<div class="sparkline" data-history="[['2017-11-13T04:51:20.899093Z', 3.1], ['2017-11-13T05:04:19.145983Z', 3.1], ['2017-11-13T04:44:47.974365Z', 2.7], ['2017-11-13T04:53:27.774662Z', 3.1], ['2017-11-13T04:54:53.465594Z', 3.1], ['2017-11-13T04:44:57.935704Z', 2.7], ['2017-11-13T04:38:39.091989Z', 2.6], ['2017-11-13T04:57:02.355071Z', 3.1], ['2017-11-13T04:48:31.629266Z', 2.9], ['2017-11-13T04:57:42.407547Z', 3.1], ['2017-11-13T05:14:06.044202Z', 3.1], ['2017-11-13T05:13:21.829607Z', 3.1], ['2017-11-13T04:56:27.162948Z', 3.1], ['2017-11-13T05:01:56.008800Z', 3.1], ['2017-11-13T05:03:53.603041Z', 3.1], ['2017-11-13T04:36:32.274968Z', 2.6], ['2017-11-13T04:58:33.475927Z', 3.1], ['2017-11-13T04:44:17.081697Z', 2.7], ['2017-11-13T04:52:44.854424Z', 3.1], ['2017-11-13T04:55:25.733404Z', 3.1], ['2017-11-13T05:08:32.490219Z', 3.1], ['2017-11-13T04:32:17.273882Z', 2.6], ['2017-11-13T04:59:09.598823Z', 3.1], ['2017-11-13T04:46:25.071005Z', 2.8], ['2017-11-13T05:11:58.616890Z', 3.1], ['2017-11-13T04:38:28.499141Z', 2.6], ['2017-11-13T04:42:41.882647Z', 2.7], ['2017-11-13T05:07:01.115277Z', 3.1], ['2017-11-13T04:49:14.655322Z', 3, '2017-11-13T04:57:32.611973Z', 3.1], ['2017-11-13T04:49:05.259890Z', 3, '2017-11-13T04:47:06.315335Z', 2.8], ['2017-11-13T04:59:49.195411Z', 3.1], ['2017-11-13T05:06:01.881200Z', 3.1], ['2017-11-13T05:02:45.724850Z', 3.1], ['2017-11-13T04:40:35.492208Z', 2.6], ['2017-11-13T04:36:21.892346Z', 2.6], ['2017-11-13T04:55:34.318375Z', 3.1], ['2017-11-13T04:51:12.108541Z', 3.1], ['2017-11-13T05:05:37.767420Z', 3.1], ['2017-11-13T05:10:39.593988Z', 3.1], ['2017-11-13T05:00:39.472766Z', 3.1], ['2017-11-13T04:40:45.041481Z', 2.6], ['2017-11-13T05:09:08.645128Z', 3.1], ['2017-11-13T04:53:18.813787Z', 3.1], ['2017-11-13T05:09:50.225128Z', 3.1], ['2017-11-13T05:12:34.759560Z', 3.1], ['2017-11-13T05:12:23.348751Z', 3.1], ['2017-11-13T05:04:03.745644Z', 3.1], ['2017-11-13T04:42:51.350362Z', 2.7], ['2017-11-13T05:01:46.843001Z', 3.1], ['2017-11-13T05:07:44.029823Z', 3.1], ['2017-11-13T04:54:17.858715Z', 3.1], ['2017-11-13T05:06:26.397212Z', 3.1], ['2017-11-13T04:46:56.194061Z', 2.8], ['2017-11-13T05:12:46.353787Z', 3.1], ['2017-11-13T05:04:52.734755Z', 3.1], ['2017-11-13T05:08:07.960191Z', 3.1], ['2017-11-13T04:31:28.141185Z', 2.6], ['2017-11-13T05:01:16.035681Z', 3.1], ['2017-11-13T04:34:26.320760Z', 2.6], ['2017-11-13T05:11:15.134329Z', 3.1], ['2017-11-13T04:59:40.064204Z', 3.1], ['2017-11-13T05:08:20.633884Z', 3.1], ['2017-11-13T04:34:16.227909Z', 2.6], ['2017-11-13T05:10:27.028661Z', 3.1], ['2017-11-13T05:10:15.174596Z', 3.1], ['2017-11-13T04:50:37.751234Z', 3.1], ['2017-11-13T05:03:30.072787Z', 3.1], ['2017-11-13T05:06:13.832367Z', 3.1]]">
</div>
<div class="sparkline" data-history="[['2017-11-13T04:31:31.046000Z', 4.6], ['2017-11-13T04:32:20.089451Z', 4.6], ['2017-11-13T04:33:23.169080Z', 4.6], ['2017-11-13T04:34:24.839636Z', 4.6], ['2017-11-13T04:35:28.387986Z', 4.6], ['2017-11-13T04:36:30.129479Z', 4.6], ['2017-11-13T04:37:32.722478Z', 4.6], ['2017-11-13T04:38:36.338093Z', 4.6], ['2017-11-13T04:39:40.482600Z', 4.6], ['2017-11-13T04:40:44.018558Z', 4.8], ['2017-11-13T04:41:46.490985Z', 5.0], ['2017-11-13T04:42:47.960638Z', 5.0], ['2017-11-13T04:43:51.124649Z', 5.0], ['2017-11-13T04:44:54.852583Z', 5.0], ['2017-11-13T04:45:59.042302Z', 4.8], ['2017-11-13T04:47:01.821784Z', 4.8], ['2017-11-13T04:48:04.860762Z', 4.6], ['2017-11-13T04:49:07.589167Z', 4.6], ['2017-11-13T04:50:11.987241Z', 4.2]]"></div>
<script>
// Set the dimensions of the canvas / graph
var margin = {top: 30, right: 20, bottom: 30, left: 50},
width = 300 - margin.left - margin.right,
height = 200 - margin.top - margin.bottom;
// Parse the date / time
var parseDate = d3.time.format("%Y-%m-%dT%H:%M:%S.%LZ").parse;
// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
// Define the line
var valueline = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.price); });
console.log('start');
// Adds the svg canvas
var svg = d3.selectAll(".sparkline")
// .append("svg")
// .attr("width", width + margin.left + margin.right)
// .attr("height", height + margin.top + margin.bottom)
// .append("g")
// .attr("transform",
// "translate(" + margin.left + "," + margin.top + ")")
.datum(function() {
console.log("datum");
return this.dataset;
})
.each(function(error, data) {
console.log(data);
data.forEach(function(d) {
d.date = parseDate(d[0]);
d.price = d[1];
// console.log(d);
})
})
.text(function(d) {
d.history;
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.price; })]);
// Add the valueline path.
svg.append("path")
.attr("class", "line")
.attr("d", valueline(data));
//});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment