-
-
Save chloerulesok/1e0837dfbf65305af7d3c0411916bab0 to your computer and use it in GitHub Desktop.
Day / Hour Heatmap
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
| { | |
| "Monday":{ | |
| "1am":1, | |
| "2am":6, | |
| "3am":9, | |
| "4am":5 | |
| }, | |
| "Tuesday":{ | |
| "1am":2, | |
| "2am":7, | |
| "3am":2, | |
| "4am":4 | |
| }, | |
| "Wednesday":{ | |
| "1am":7, | |
| "2am":5, | |
| "3am":4, | |
| "4am":2 | |
| } | |
| } |
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
| rect.bordered { | |
| stroke: #E6E6E6; | |
| stroke-width:2px; | |
| } | |
| text.mono { | |
| font-size: 9pt; | |
| font-family: Consolas, courier; | |
| fill: #aaa; | |
| } | |
| text.axis-workweek { | |
| fill: #000; | |
| } | |
| text.axis-worktime { | |
| fill: #000; | |
| } |
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
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <html> | |
| <head> | |
| <style src="formatting.css"></style> | |
| <script src="http://d3js.org/d3.v3.js"></script> | |
| <script src="viz.js"></script> | |
| </head> | |
| <body> | |
| <div id="chart"></div> | |
| </body> | |
| </html> |
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 colors = ["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"], // alternatively colorbrewer.YlGnBu[9] | |
| //days = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"], | |
| days = ["Mo", "Tu", "We"], | |
| times = ["1a", "2a", "3a", "4a", "5a", "6a", "7a", "8a", "9a", "10a", "11a", "12a", "1p", "2p", "3p", "4p", "5p", "6p", "7p", "8p", "9p", "10p", "11p", "12p"], | |
| datasets = ["data.tsv"]; | |
| var margin = { top: 50, right: 0, bottom: 100, left: 30 }, | |
| width = 960 - margin.left - margin.right, | |
| height = 430 - margin.top - margin.bottom, | |
| gridSize = Math.floor(width / times.length), | |
| legendElementWidth = gridSize*2, | |
| buckets = 9; | |
| var svg = d3.select("#chart").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 + ")"); | |
| var dayLabels = svg.selectAll(".dayLabel") | |
| .data(days) | |
| .enter().append("text") | |
| .text(function (d) { return d; }) | |
| .attr("x", 0) | |
| .attr("y", function (d, i) { return i * gridSize; }) | |
| .style("text-anchor", "end") | |
| .attr("transform", "translate(-6," + gridSize / 1.5 + ")") | |
| .attr("class", "dayLabel mono axis axis-workweek"); | |
| //.attr("class", function (d, i) { return ((i >= 0 && i <= 4) ? "dayLabel mono axis axis-workweek" : "dayLabel mono axis"); }); | |
| var timeLabels = svg.selectAll(".timeLabel") | |
| .data(times) | |
| .enter().append("text") | |
| .text(function(d) { return d; }) | |
| .attr("x", function(d, i) { return i * gridSize; }) | |
| .attr("y", 0) | |
| .style("text-anchor", "middle") | |
| .attr("transform", "translate(" + gridSize / 2 + ", -6)") | |
| .attr("class", "timeLabel mono axis axis-worktime"); | |
| //.attr("class", function(d, i) { return ((i >= 7 && i <= 16) ? "timeLabel mono axis axis-worktime" : "timeLabel mono axis"); }); | |
| var heatmapChart = function(tsvFile) { | |
| d3.tsv(tsvFile, | |
| function(d) { | |
| return { | |
| day: +d.day, | |
| hour: +d.hour, | |
| value: +d.value | |
| }; | |
| }, | |
| function(error, data) { | |
| var colorScale = d3.scale.quantile() | |
| .domain([0, buckets - 1, d3.max(data, function (d) { return d.value; })]) | |
| .range(colors); | |
| var cards = svg.selectAll(".hour") | |
| .data(data, function(d) {return d.day+':'+d.hour;}); | |
| cards.append("title"); | |
| cards.enter().append("rect") | |
| .attr("x", function(d) { return (d.hour - 1) * gridSize; }) | |
| .attr("y", function(d) { return (d.day - 1) * gridSize; }) | |
| .attr("rx", 4) | |
| .attr("ry", 4) | |
| .attr("class", "hour bordered") | |
| .attr("width", gridSize) | |
| .attr("height", gridSize) | |
| .style("fill", colors[0]); | |
| cards.transition().duration(1000) | |
| .style("fill", function(d) { return colorScale(d.value); }); | |
| cards.select("title").text(function(d) { return d.value; }); | |
| cards.exit().remove(); | |
| var legend = svg.selectAll(".legend") | |
| .data([0].concat(colorScale.quantiles()), function(d) { return d; }); | |
| legend.enter().append("g") | |
| .attr("class", "legend"); | |
| legend.append("rect") | |
| .attr("x", function(d, i) { return legendElementWidth * i; }) | |
| .attr("y", height) | |
| .attr("width", legendElementWidth) | |
| .attr("height", gridSize / 2) | |
| .style("fill", function(d, i) { return colors[i]; }); | |
| legend.append("text") | |
| .attr("class", "mono") | |
| .text(function(d) { return "≥ " + Math.round(d); }) | |
| .attr("x", function(d, i) { return legendElementWidth * i; }) | |
| .attr("y", height + gridSize); | |
| legend.exit().remove(); | |
| }); | |
| }; | |
| heatmapChart(datasets[0]); | |
| var datasetpicker = d3.select("#dataset-picker").selectAll(".dataset-button") | |
| .data(datasets); | |
| datasetpicker.enter() | |
| .append("input") | |
| .attr("value", function(d){ return "Dataset " + d }) | |
| .attr("type", "button") | |
| .attr("class", "dataset-button") | |
| .on("click", function(d) { | |
| heatmapChart(d); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment