Skip to content

Instantly share code, notes, and snippets.

@hashimkey

hashimkey/.block

Last active December 21, 2016 22:49
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save hashimkey/17060644fdc72a3a8c93e9ae09eeee2c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save hashimkey/17060644fdc72a3a8c93e9ae09eeee2c to your computer and use it in GitHub Desktop.
Download ZIP
okkkkkkkkk
Raw
.block
license: mit
Raw
data.tsv
date Amer_8 Amer_9 Borssele_12
20141107 0 0 0
20141107 0 0 0
20141108 0 0 0
20141108 0 0 0
20141109 0 0 0
20141109 0 0 0
20141110 0 0 0
20141110 0 0 0
20141111 0 0 0
20141111 0 0 0
20141112 0 0 0
20141112 0 0 0
20141113 0 0 0
20141113 0 0 0
20141114 0 0 0
20141114 0 0 0
20141115 0 0 0
20141115 0 0 0
20141116 0 0 0
20141116 0 0 0
20141117 0 0 0
20141117 0 0 0
20141118 0 0 0
20141118 0 0 0
20141119 0 0 0
20141119 0 0 0
20141120 0 0 0
20141120 0 0 0
20141121 0 0 0
20141121 0 0 0
20141122 0 0 0
20141122 0 0 0
20141123 0 0 0
20141123 0 0 0
20141124 0 0 0
20141124 0 0 0
20141125 0 0 0
20141125 0 0 0
20141126 0 0 0
20141126 0 0 0
20141127 0 0 0
20141127 0 0 0
20141128 0 0 0
20141128 0 0 0
20141129 0 0 0
20141129 0 0 0
20141130 0 0 0
20141130 0 0 0
20141201 0 0 0
20141201 0 0 0
20141202 0 0 0
20141202 0 0 0
20141203 0 0 0
20141203 0 0 0
20141204 0 0 0
20141204 0 0 0
20141205 0 0 0
20141205 0 0 0
20141206 0 0 0
20141206 0 0 0
20141207 0 0 0
20141207 0 0 0
20141208 0 0 0
20141208 0 0 0
20141209 0 0 0
20141209 0 0 0
20141210 0 0 0
20141210 0 0 0
20141211 0 0 0
20141211 0 0 0
20141212 0 0 0
20141212 0 0 0
20141213 0 0 0
20141213 0 0 0
20141214 0 0 0
20141214 0 0 0
20141215 0 0 0
20141215 0 0 0
20141216 0 0 0
20141216 0 0 0
20141217 0 0 0
20141217 0 0 0
20141218 0 0 0
20141218 0 0 0
20141219 0 0 0
20141219 0 0 0
20141220 0 0 0
20141220 0 0 0
20141221 0 0 0
20141221 0 0 0
20141222 0 0 0
20141222 0 0 0
20141223 0 0 0
20141223 0 0 0
20141224 0 0 0
20141224 0 0 0
20141225 0 0 0
20141225 0 0 0
20141226 0 0 0
20141226 0 0 0
20141227 0 0 0
20141227 0 0 0
20141228 0 0 0
20141228 0 0 0
20141229 0 0 0
20141229 0 0 0
20141230 0 0 0
20141230 0 0 0
20141231 0 0 0
20141231 0 0 87000
20150101 0 0 63083.33333
20150101 0 0 86750
20150102 0 0 75833.33333
20150102 0 0 98750
20150103 0 0 96250
20150103 0 0 98416.66667
20150104 0 0 61583.33333
20150104 432333.3333 574666.6667 97083.33333
20150105 384833.3333 530333.3333 78416.66667
20150105 409833.3333 579500 125750
20150106 410583.3333 571166.6667 396916.6667
20150106 396500 540916.6667 365166.6667
20150107 408000 519083.3333 91500
20150107 458916.6667 536833.3333 99000
20150108 405916.6667 536333.3333 78666.66667
20150108 258166.6667 529833.3333 93583.33333
20150109 0 524416.6667 77166.66667
20150109 0 566083.3333 90916.66667
20150110 0 528333.3333 64250
20150110 0 568500 93833.33333
20150111 0 494000 49416.66667
20150111 6416.666667 551416.6667 85916.66667
20150112 303666.6667 538416.6667 73000
20150112 403333.3333 581750 97666.66667
20150113 402833.3333 543500 73750
20150113 452250 574250 98916.66667
20150114 427083.3333 553416.6667 78833.33333
20150114 471833.3333 553083.3333 111583.3333
20150115 403583.3333 533583.3333 300416.6667
20150115 419083.3333 575750 396000
20150116 447500 543666.6667 324583.3333
20150116 511333.3333 556250 399250
20150117 440250 534916.6667 343916.6667
20150117 390333.3333 574416.6667 370250
20150118 352666.6667 543166.6667 74750
20150118 182333.3333 589083.3333 124833.3333
20150119 367166.6667 562500 378583.3333
20150119 359083.3333 577833.3333 399083.3333
20150120 383750 576833.3333 396666.6667
20150120 473166.6667 563916.6667 398416.6667
20150121 416333.3333 559750 386666.6667
20150121 480416.6667 551500 385583.3333
20150122 420750 538333.3333 315000
20150122 486333.3333 540916.6667 399833.3333
20150123 461666.6667 551583.3333 373083.3333
20150123 512416.6667 554416.6667 400333.3333
20150124 419500 554166.6667 374833.3333
20150124 423916.6667 542666.6667 395583.3333
20150125 413000 552500 372833.3333
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
</style>
</head>
<body>
<script>
var margin = {
top: 20,
right: 80,
bottom: 30,
left: 50
},
width = 500 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var parseDate = d3.time.format("%Y%m%d").parse;
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var color = d3.scale.category10();
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.line()
.interpolate("basis")
.x(function(d) {
return x(d.date);
})
.y(function(d) {
return y(d.temperature);
});
var svg = d3.select("body").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 + ")");
d3.tsv("data.tsv", function(error, data) {
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));
data.forEach(function(d) {
d.date = parseDate(d.date);
});
var cities = color.domain().map(function(name) {
return {
name: name,
values: data.map(function(d) {
return {
date: d.date,
temperature: +d[name]
};
})
};
});
x.domain(d3.extent(data, function(d) {
return d.date;
}));
y.domain([
d3.min(cities, function(c) {
return d3.min(c.values, function(v) {
return v.temperature;
});
}),
d3.max(cities, function(c) {
return d3.max(c.values, function(v) {
return v.temperature;
});
})
]);
var legend = svg.selectAll('g')
.data(cities)
.enter()
.append('g')
.attr('class', 'legend');
legend.append('rect')
.attr('x', width - 20)
.attr('y', function(d, i) {
return i * 20;
})
.attr('width', 10)
.attr('height', 10)
.style('fill', function(d) {
return color(d.name);
});
legend.append('text')
.attr('x', width - 8)
.attr('y', function(d, i) {
return (i * 20) + 9;
})
.text(function(d) {
return d.name;
});
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Test Graph (1)");
var city = svg.selectAll(".city")
.data(cities)
.enter().append("g")
.attr("class", "city");
city.append("path")
.attr("class", "line")
.attr("d", function(d) {
return line(d.values);
})
.style("stroke", function(d) {
return color(d.name);
});
city.append("text")
.datum(function(d) {
return {
name: d.name,
value: d.values[d.values.length - 1]
};
})
.attr("transform", function(d) {
return "translate(" + x(d.value.date) + "," + y(d.value.temperature) + ")";
})
.attr("x", 3)
.attr("dy", ".35em")
.text(function(d) {
return d.name;
});
var mouseG = svg.append("g")
.attr("class", "mouse-over-effects");
mouseG.append("path") // this is the black vertical line to follow mouse
.attr("class", "mouse-line")
.style("stroke", "black")
.style("stroke-width", "1px")
.style("opacity", "0");
var lines = document.getElementsByClassName('line');
var mousePerLine = mouseG.selectAll('.mouse-per-line')
.data(cities)
.enter()
.append("g")
.attr("class", "mouse-per-line");
mousePerLine.append("circle")
.attr("r", 7)
.style("stroke", function(d) {
return color(d.name);
})
.style("fill", "none")
.style("stroke-width", "1px")
.style("opacity", "0");
mousePerLine.append("text")
.attr("transform", "translate(10,3)");
mouseG.append('svg:rect') // append a rect to catch mouse movements on canvas
.attr('width', width) // can't catch mouse events on a g element
.attr('height', height)
.attr('fill', 'none')
.attr('pointer-events', 'all')
.on('mouseout', function() { // on mouse out hide line, circles and text
d3.select(".mouse-line")
.style("opacity", "0");
d3.selectAll(".mouse-per-line circle")
.style("opacity", "0");
d3.selectAll(".mouse-per-line text")
.style("opacity", "0");
})
.on('mouseover', function() { // on mouse in show line, circles and text
d3.select(".mouse-line")
.style("opacity", "1");
d3.selectAll(".mouse-per-line circle")
.style("opacity", "1");
d3.selectAll(".mouse-per-line text")
.style("opacity", "1");
})
.on('mousemove', function() { // mouse moving over canvas
var mouse = d3.mouse(this);
d3.select(".mouse-line")
.attr("d", function() {
var d = "M" + mouse[0] + "," + height;
d += " " + mouse[0] + "," + 0;
return d;
});
d3.selectAll(".mouse-per-line")
.attr("transform", function(d, i) {
console.log(width/mouse[0])
var xDate = x.invert(mouse[0]),
bisect = d3.bisector(function(d) { return d.date; }).right;
idx = bisect(d.values, xDate);
var beginning = 0,
end = lines[i].getTotalLength(),
target = null;
while (true){
target = Math.floor((beginning + end) / 2);
pos = lines[i].getPointAtLength(target);
if ((target === end || target === beginning) && pos.x !== mouse[0]) {
break;
}
if (pos.x > mouse[0]) end = target;
else if (pos.x < mouse[0]) beginning = target;
else break; //position found
}
d3.select(this).select('text')
.text(y.invert(pos.y).toFixed(2));
return "translate(" + mouse[0] + "," + pos.y +")";
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment