Skip to content

Instantly share code, notes, and snippets.

@zeroeth
Forked from tommaybe/LICENSE.md
Last active November 27, 2019 00:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save zeroeth/d4a638e183c7efd9f45cfaadb40d51e4 to your computer and use it in GitHub Desktop.
Save zeroeth/d4a638e183c7efd9f45cfaadb40d51e4 to your computer and use it in GitHub Desktop.
Day / Hour Heatmap

Inspired by Trulia Trends - but with code and using SVG.

Example data shows concurrent user sessions over time, taken from a development environment.

MIT Licensed, see LICENSE.MD.

day hour value
1 1 16
1 2 20
1 3 0
1 4 0
1 5 0
1 6 2
1 7 0
1 8 9
1 9 25
1 10 49
1 11 57
1 12 61
1 13 37
1 14 66
1 15 70
1 16 55
1 17 51
1 18 55
1 19 17
1 20 20
1 21 9
1 22 4
1 23 0
1 24 12
2 1 6
2 2 2
2 3 0
2 4 0
2 5 0
2 6 2
2 7 4
2 8 11
2 9 28
2 10 49
2 11 51
2 12 47
2 13 38
2 14 65
2 15 60
2 16 50
2 17 65
2 18 50
2 19 22
2 20 11
2 21 12
2 22 9
2 23 0
2 24 13
3 1 5
3 2 8
3 3 8
3 4 0
3 5 0
3 6 2
3 7 5
3 8 12
3 9 34
3 10 43
3 11 54
3 12 44
3 13 40
3 14 48
3 15 54
3 16 59
3 17 60
3 18 51
3 19 21
3 20 16
3 21 9
3 22 5
3 23 4
3 24 7
4 1 0
4 2 0
4 3 0
4 4 0
4 5 0
4 6 2
4 7 4
4 8 13
4 9 26
4 10 58
4 11 61
4 12 59
4 13 53
4 14 54
4 15 64
4 16 55
4 17 52
4 18 53
4 19 18
4 20 3
4 21 9
4 22 12
4 23 2
4 24 8
5 1 2
5 2 0
5 3 8
5 4 2
5 5 0
5 6 2
5 7 4
5 8 14
5 9 31
5 10 48
5 11 46
5 12 50
5 13 66
5 14 54
5 15 56
5 16 67
5 17 54
5 18 23
5 19 14
5 20 6
5 21 8
5 22 7
5 23 0
5 24 8
6 1 2
6 2 0
6 3 2
6 4 0
6 5 0
6 6 0
6 7 4
6 8 8
6 9 8
6 10 6
6 11 14
6 12 12
6 13 9
6 14 14
6 15 0
6 16 4
6 17 7
6 18 6
6 19 0
6 20 0
6 21 0
6 22 0
6 23 0
6 24 0
7 1 7
7 2 6
7 3 0
7 4 0
7 5 0
7 6 0
7 7 0
7 8 0
7 9 0
7 10 0
7 11 2
7 12 2
7 13 5
7 14 6
7 15 0
7 16 4
7 17 0
7 18 2
7 19 10
7 20 7
7 21 0
7 22 19
7 23 9
7 24 4
<!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"></div>
<div id="dataset-picker">
</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 = ["voyager-rank.csv", "data2.tsv"];
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", 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"); });
var heatmapChart = function(csvFile) {
d3.csv(csvFile,
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);
});
</script>
</body>
</html>

Copyright (c) 2016, Tom May

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Rank Title Season Episode Hashtag
168 Author, Author 7 20 Mean-spirited, untrue to Doctor's character. #PhotonsBeAssholes
167 Virtuoso 6 13 More ridiculous 20th century motives. #PainfullyBad
166 The Fight 5 19 Forced fighting metaphor basically incomprensible. #BoothbySighting
165 Unforgettable 4 22 Absolutely, 100 percent, completely forgettable. #VirginiaMadsen
164 Favorite Son 3 20 Interesting Kim premise goes awry. #Awkward
163 Innocence 2 22 Little kids rarely score high. #InMyBook
162 Concerning Flight 4 11 Goofy end for da Vinci. #Catarina
161 False Profits 3 05 Bad Ferengi episodes invade Voyager. #MissedOpportunity
160 Fair Trade 3 13 Neelix would have come clean. #IdiotPlot
159 Threshold 2 15 Bad, but not "reputation" bad. #LizardBabies
158 11:59 5 23 Tries to be profound statement. #MillenniumGate
157 Elogium 2 04 Subject matter hard to watch. #EnsignWildman
156 Inside Man 7 06 Quality control is lowered again. #BecauseFerengi
155 Cold Fire 2 10 Ocampa backstory doesn't offer much. #ExceptGaryGraham
154 Tattoo 2 09 Some interesting elements; not enough.#SkySpirits
153 Alice 6 05 "Christine" homage is too predictable. #JohnFleck
152 Fury 6 23 Huge idea, but massive failure. #UnworthyOfKes
151 Once Upon a Time 5 05 Simple story has some heart. #Flotter
150 Nightingale 7 08 Harry really needs to chillax. #RonGlass
149 The Thaw 2 23 So incredibly weird, it might…#ActuallyBeGood
148 Emanations 1 09 Another example of religion sucking. #ThereIsNoAfterLife
147 Cathexis 1 13 Great title. Not great episode. #ChakotaysConsciousness
146 Retrospect 4 17 Repressed memory exploration misses mark.
145 Persistence of Vision 2 08 Telepathic aliens? Nothing new here. #MrsTempleton
144 Random Thoughts 4 10 Interesting idea, but feels repetitive. #B'Etor
143 The Chute 3 03 "This man is my friend." #TomAndHarry
142 Darkling 3 18 Sadistic storyline not much fun. #LordByron
141 Vis à Vis 4 20 Body jumping hard to track. #SeenItBefore
140 Ex Post Facto 1 08 Yet another memory crime episode. #TheDogSolvesIt
139 Faces 1 14 Rough Dawson performance hurts product. #BadTeeth
138 The Swarm 3 04 A and B plots mismatched. #FeelsIncoherent
137 Sacred Ground 3 07 Introspective Janeway piece too introspective. #Faith
136 The 37's 2 01 Big concept with average execution. #AmeliaEarhart
135 Mortal Coil 4 12 Poignant, but afterlife belief dumb. #Alixia
134 Tsunkatse 6 15 Crew's obsession with blood sport? #Disconcerting
133 Twisted 2 06 Plodding execution belies strong idea. #ChezSandrine
132 The Q and the Grey 3 11 Too fanciful and on-the-nose metaphor. #YouHadYourChance
131 Bliss 5 14 Mind-control episodes aren't my favorite. #PitcherPlant
130 Barge of the Dead 6 03 Big ideas and great execution. #ButPrettyDark
129 Repression 7 04 Maquis callback ultimately doesn't work. #PaghTemFarBtanay
128 Time and Again 1 04 Feels like a TNG episode. #TooEarlyForThat
127 Fair Haven 6 11 Diverting program asks big questions. #MildlySuccessful
126 Ashes to Ashes 6 18 Unique concept doesn't grab hold. #LyndsayBallardWho?
125 In the Flesh 5 04 Destroys established Species 8472 intrigue. #MajorDisappointment
124 Repentance 7 13 Goes in an unexpected direction. #SolidPerformances
123 Critical Care 7 05 On the nose, but effective. #HealthcareForAll
122 Real Life 3 22 Emotional impact is very real. #Belle
121 Infinite Regress 5 07 Powerhouse performance from Jeri Ryan. #KadisKot
120 Human Error 7 18 I'm good with Chakotay, Seven. #MinorityOpinion
119 Course: Oblivion 5 18 Dark, nihilistic episode ends tragically. #DemonClass
118 Prime Factors 1 10 Poor execution of interesting solution. #TuvokLogic
117 Q2 7 19 Predictable, but fun Q finale. #QJunior
116 Homestead 7 23 Solid feel-good ending for Neelix. #Dexa
115 Alter Ego 3 14 Odd structure is oddly invigorating. #KalToh
114 Collective 6 16 Auspicious start for Borg kids. #EndUpAddingValue
113 Child's Play 6 19 Icheb's parents are complete assholes. #MarkASheppard
112 The Cloud 1 06 "There's coffee in that nebula." #NotANebula
111 Coda 3 15 Chakotay really, really loves Janeway. #WishWeHadSeenMore
110 Resolutions 2 25 Tantalizing taste of Janeway/Chakotay. #ResetButton
109 Resistance 2 12 Strong performances and deep emotion. #JoelGrey
108 One 4 25 Psychological thriller been done before. #ButNotBad
107 Spirit Folk 6 17 More fun than you remember. #FairHaven
106 Survival Instinct 6 02 Powerful depth added to Borg. #WonkySetup
105 Live Fast and Prosper 6 21 Clever structure keeps you guessing. #LLAP
104 Flashback 3 02 Should have been more fun. #Praxis
103 Life Line 6 24 Solid, if not entirely satisfying. #TalkingIguana
102 Heroes and Demons 1 12 Early gateway to EMH's character. #Schweitzer
101 Learning Curve 1 16 Enjoyable "Lower Decks" knock off. #NotAtThatLevel
100 Remember 3 06 Interesting exploration of whitewashing history. #Regressives
99 Demon 4 24 Fascinating set-up with surprising resolution. #Deuterium
98 Nothing Human 5 08 Morality play explores interesting areas. #NoEasyAnswers
97 Prototype 2 13 Cool retro sci-fi design elements. #AutomatedUnit3947
96 Warhead 5 25 Familiar territory in Doctor takeover. #ButSolidExploration
95 Initiations 2 02 Love Nog, but poor casting. #OverallSolidStory
94 Parturition 2 07 Worth it for alien baby! #GuiltyPleasure
93 Non Sequitur 2 05 A time-travel episode done light. #Cosimo
92 Warlord 3 10 Nice seeing Kes' boundaries expanded. #BreakUp
91 Renaissance Man 7 24 Tricky episode; fun to track. #Hierarchy
90 Phage 1 05 Legitimately scary Delta Quadrant foil. #Vidiians
89 Unimatrix Zero, Part II 7 01 Interesting Borg conceit; poor execution. #TertiaryAdjunct
88 Unimatrix Zero 6 26 Seven's love interest poorly cast. #NoChemistry
87 Workforce, Part II 7 17 Tricky plot keeps your attention. #ECH
86 Workforce 7 16 Surprsingly effective emotion and action. #RalphMouth
85 Imperfection 7 02 Clever, emotional use of Icheb. #OcularImplant
84 Extreme Risk 5 03 Pretty effective dissertation on depression. #OrbitalSkydiving
83 Lifesigns 2 19 Quiet look at Doctor's development. #DenaraPel
82 The Disease 5 17 Underrated dissection of love, Kim. #BestTrekTrackingShotEver
81 Body and Soul 7 07 Uncanny Jeri Ryan performance impresses. #Holophobic
80 Prophecy 7 14 Complex, but satisfying, Klingon saga. #D7
79 Natural Law 7 22 Familiar plotting, but expertly executed. #AutumnReeser
78 Friendship One 7 21 RIP, Carey. You were great. #Underrated
77 Lineage 7 12 Torres never pulls any punches. #GeneticManipulation
76 The Gift 4 02 Seven storyline works; Kes swansong? #NotSoMuch
75 Waking Moments 4 13 Great conclusion for sleepy Chakotay. #FullMoon
74 Distant Origin 3 23 Final courtroom-drama act is disappointing. #DoctrineSucks
73 Investigations 2 20 Effective resolution to Jonas arc. #ABriefingWithNeelix
72 Caretaker 1 01 Solid pilot, if slightly nonsensical. #KazonHaveNoWater?
72 Caretaker 1 02 Solid pilot, if slightly nonsensical. #KazonHaveNoWater?
71 Parallax 1 03 Great early character development, plus… #FunTechnobabble
70 Eye of the Needle 1 07 Satisfying mystery; great mellow pacing. #VaughnArmstrong
69 Nemesis 4 04 Works powerfully, even if familiar. #Fathom?
68 Displaced 3 24 Unique enemy is pretty unsettling. #Translocator
67 Before and After 3 21 Better title? "After and Before." #Linnis
66 Drive 7 03 Torres and Paris get hitched. #AntarianTransStellarRally
65 Rise 3 19 Maybe chintzy, but pretty fun. #OrbitalTether
64 Riddles 6 06 Fun character piece for "Tuvix." #ILikeTheWayItLooksNow
63 Someone to Watch Over Me 5 22 Sitcom plot device affects grade. #YouAreMySunshine
62 Thirty Days 5 09 Love the conservation message, structure. #SaveTheOcean
61 The Voyager Conspiracy 6 09 Bobs, weaves in every direction. #ClassicVoyager
60 Memorial 6 14 Not a light, frothy re-watch. #ButEffectiveWarParable
59 The Haunting of Deck Twelve 6 25 Neelix ghost story surprisingly gripping. #TalCeles
58 Hope and Fear 4 26 Great companion piece to "Scorpion." #PlusRayWise
57 Drone 5 02 "You're hurting me." "You'll adapt." #JPaulBoehmer
56 Juggernaut 5 21 Effective monster of the week. #MalonAreQualityVillain
55 Death Wish 2 18 Moving right-to-life parable hits home. #WillRiker
54 Revulsion 4 05 Creepy, bloody and very disturbing. #LelandOrser
53 Pathfinder 6 10 Clever, impactful use of Barclay. #NeelixTheCat
52 Muse 6 22 Maybe shouldn't work, but does. #Eternals
51 Unity 3 17 Great Delta Quadrant Borg introduction. #OurThoughtsAreOne
50 The Omega Directive 4 21 Huge scope with some success. #Perfection
49 Macrocosm 3 12 Janeway's "Die Hard" action breakout. #TakTak
48 Tuvix 2 24 Among Trek's toughest moral dilemmas. #TuvixLives
47 Alliances 2 14 The Trabe were complete assholes. #JustSayin'
46 Scientific Method 4 07 Extremely freaky, scary, twisty episode. #Memorable
45 Projections 2 03 What's real? Keeps me guessing. #Holomatrix
44 Dreadnought 2 17 More awesome Rube Goldberg Trek! #MadeAFriendHere
43 Latent Image 5 11 Introspective and moving life-and-death analysis. #Jetal
42 Think Tank 5 20 Special premise is well sold. #CuredThePhage?
41 Equinox, Part II 6 01 Dynamic performance from John Savage. #NucleogenicLifeform
40 Equinox 5 26 Another great Trek conservation message. #BLT
39 State of Flux 1 11 Holy crap! Seska is Cardassian?!? #SecondSkin
38 Relativity 5 24 Temporal Prime Directive? What. Ever. #BraxtonReturns
37 Night 5 01 Dark, effective reset of Voyager. #CaptainProton
36 Jetrel 1 15 Holocaust architect tries for redemption. #MetreonCascade
35 The Killing Game, Part II 4 19 Fantastic action, pacing, character development. #SainteClaire
34 The Killing Game 4 18 Great ensemble piece. Incredible setting. #HirogenNazi
33 Counterpoint 5 10 Leave the telepaths alone, Kashyk. #Prax!
32 Living Witness 4 23 Voyager's "Mirror" episode doesn't disappoint. #JanewayIsTerrifying
31 Dragon's Teeth 6 07 Should have been two parts. #Vaadwaur
30 Endgame 7 25 Janeway's choices are pretty questionable. #ButFunConclusion
30 Endgame 7 26 Janeway's choices are pretty questionable. #ButFunConclusion
29 Good Shepherd 6 20 A true "Lower Decks" classic. #TomMorello
28 Basics, Part II 3 01 Glorious end for Lon Suder. #RIPHogan
27 Basics, Part I 2 26 Straight-up and effective action adventure. #BabySeska
26 Meld 2 16 Incredibly deep-dive into psychopath psyche. #NoReason
25 Maneuvers 2 11 Tricky Seska is best Seska. #BabyChakotay?
24 Shattered 7 11 Time-jumping tale visits key moments. #SeskaIsBack!
23 The Void 7 15 Underrated gem defines "Federation" DNA. #Fantome
22 Hunters 4 15 Fantastic new villain quickly established. #Hirogen
21 Prey 4 16 Species 8472 menace expertly explored. #TonyTodd
20 Bride of Chaotica! 5 12 Best Trek holodeck episode ever? #QuitePossibly
19 Dark Frontier 5 15 Riveting Borg backstory for Seven. #NeedleFingers
19 Dark Frontier 5 16 Riveting Borg backstory for Seven. #NeedleFingers
18 The Raven 4 06 Strong production stands time's test. #AnnikaHansen
17 Gravity 5 13 Spectacular scope, heart and drama. #TellMeAboutYouThere
16 Tinker Tenor Doctor Spy 6 04 Funniest Trek episode since "Tribbles"? #QuitePossibly
15 Year of Hell, Part II 4 09 Reset button: tiny bit disappointing. #TimesUp!
14 Year of Hell 4 08 Annorax: all-time deep, complicated villain. #TemporalIncursion
13 Deadlock 2 21 All-time great science fiction conceit. #PerfectExecution
12 One Small Step 6 08 Special combination of technobabble, heart. #PhilMorris
11 Blood Fever 3 16 Incredibly structured amalgamation of Trek. #KlingonPonFarr
10 Day of Honor 4 03 Superb pacing and heartfelt emotion. #EjectTheCore
9 Flesh and Blood 7 09 Perfect exploration of holographic rights. #OppositeOfVirtuosoAuthor
9 Flesh and Blood 7 10 Perfect exploration of holographic rights. #OppositeOfVirtuosoAuthor
8 Message in a Bottle 4 14 Amazing comedy with impactful gravitas. #NoLongerAlone
7 Future's End, Part II 3 09 Starling: another great Voyager villain. #MobileEmitter
6 Future's End 3 08 Temporal fun in 1996 LA. #RainRobinson
5 Worst Case Scenario 3 25 Seska will never give up. #FantasticCharacter
4 Timeless 5 06 Anniversary episode hits every note. #CaptainLaForge
3 Scorpion, Part II 4 01 Seven debuts in spectacular fashion. #AllTimeGreatCharacter
2 Scorpion 3 26 Game-changing deal with the devil. #NorthwestPassage
1 Blink of an Eye 6 12 "Weird Planet Displaced in Time." #MountainOrLakeside?
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment