Built with blockbuilder.org
Created
November 24, 2016 02:33
-
-
Save DarienLiang/485c82d5ec2e63bd3171a58d0ea9f85b to your computer and use it in GitHub Desktop.
heatmap
This file contains hidden or 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
| license: mit |
This file contains hidden or 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> | |
| 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; | |
| } | |
| </style> | |
| <script src="http://d3js.org/d3.v3.js"></script> | |
| </head> | |
| <body> | |
| <div id="chart"> | |
| <svg></svg> | |
| </div> | |
| <script type="text/javascript"> | |
| 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 / 24), | |
| legendElementWidth = gridSize*2, | |
| buckets = 9, | |
| colors = ["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"], // alternatively colorbrewer.YlGnBu[9] | |
| days = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"], | |
| 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", "data2.tsv"]; | |
| var svg = d3.select("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", 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", function(d, i) { return ((i >= 7 && i <= 16) ? "timeLabel mono axis axis-worktime" : "timeLabel mono axis"); }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment