Permalink
Browse files

really hacky time travel, but it's a start

  • Loading branch information...
1 parent d36fe86 commit 5083b0732a19e23cc14f688e6f877ef0d9d43bcc Jeff Balogh committed Mar 24, 2011
Showing with 131 additions and 11 deletions.
  1. +18 −0 README
  2. +8 −1 index.html
  3. +60 −0 media/glow.js
  4. +29 −10 media/map.js
  5. +16 −0 media/screen.css
View
18 README
@@ -24,3 +24,21 @@ Firefox, with a few seconds of latency as we process everything on the backend.
The counter at the top shows the total downloads of Firefox since March 22,
2011, when Firefox 4 was released. The arc chart shows those downloads broken
down all the way to the city level.
+
+
+How It Works
+============
+
+glow.mozilla.org is a website for tracking downloads of Firefox 4. We take
+every hit from our logs and drop the download location on the map.
+
+# Getting the data
+# Writing the files
+# REST, caching
+# Displaying the map
+# Running the counter/bars, latency
+# Daisy
+# Perf
+## Avoiding GC
+## .firstChild.textConten
+## Chrome vs. Firefox
View
@@ -32,9 +32,16 @@ <h1 gettext="Firefox 4 Download Stats"></h1>
<div id="social">
<a href="http://twitterparty.mozilla.org/" class="button" id="twitter"><img src="media/twitter-badge.png">Twitter</a>
<a href="http://www.facebook.com/Firefox?v=app_122300121174636" class="button" id="facebook"><img src="media/fb-badge.png">Facebook</a>
- <a href="#" class='show-about'></a>
+ <a href="#" class="show-about"></a>
</div>
</div>
+ <div id="timeshift">
+ <form action="#">
+ <input pattern="\d\d-\d\d-\d{4} \d\d?:\d\d"
+ placeholder="MM-DD-YYYY HH:MM">
+ <button type="submit">Hit it</button>
+ </form>
+ </div>
<a href="http://www.sqlstream.com" id="sqlstream" target="_blank">
<img src="media/sqlstreamlogo.png" width="85" height="19">
</a>
View
@@ -250,6 +250,17 @@ glow.toggleFullscreen = function() {
}
glow.init = function() {
+ if (location.hash.slice(1, 10) == "timeshift") {
+ $(document.body).addClass("timeshift");
+ initTimeshift();
+ initCounter();
+ initBars();
+ initMap();
+ sizePageElements();
+ loadMap(function(){});
+ return;
+ }
+
glow.data.sector.next = glow.time + "/arc.json";
$.getJSON(ROOT + glow.time + "/count.json", function(r) {
glow.data.count.next = r;
@@ -282,6 +293,9 @@ glow.init = function() {
var lastKey = null;
var toggled = false;
$(window).bind('keydown', function(e) {
+ if (location.hash.slice(1, 10) == "timeshift") {
+ return;
+ }
var num = null;
if (e.keyCode >= 48 && e.keyCode <= 57) {
num = e.keyCode - 48;
@@ -317,5 +331,51 @@ $(".show-about").click(function(e) {
},100);
});
+var pad = function(x){
+ return ("" + x).length == 1 ? "0" + x : x;
+};
+
+var path = function(date) {
+ var d = [date.getUTCFullYear(), date.getUTCMonth() + 1, date.getUTCDate(),
+ date.getUTCHours(), date.getUTCMinutes()];
+ return ROOT + $.map(d, pad).join("/");
+};
+
+var initTimeshift = function() {
+ $(window).bind("popstate", function(e) {
+ dbg('popstate');
+ dbg(e.originalEvent.state);
+ });
+
+ if (location.hash.split("/").length == 2) {
+ var date = new Date(location.hash.split("/")[1]),
+ d = $.map([date.getMonth() + 1, date.getDate(), date.getFullYear(),
+ date.getHours(), date.getMinutes()], pad);
+ $("#timeshift input").val(d[0] + "-" + d[1] + "-" + d[2]
+ + " " + d[3] + ":" + d[4]);
+ travel(date);
+ }
+
+ function travel(date) {
+ history.pushState({date: date}, null, "#timeshift/" + date);
+ $.getJSON(path(date) + "/count.json", function(r) {
+ var num = numberfmt(r.data[r.data.length - 1][1])
+ $('#bigcounter')[0].firstChild.textContent = num;
+ });
+ $.getJSON(path(date) + "/map.json", function(r) {
+ glow.map.showAll(glow.map.preparePings(r.data[2]));
+ });
+ }
+
+
+ $("#timeshift form").submit(function(e) {
+ e.preventDefault();
+ var val = /(\d\d)-(\d\d)-(\d{4}) (\d\d?):(\d\d)/.exec(
+ $("#timeshift input").val()),
+ date = new Date(val[3], val[1] - 1, val[2], val[4], val[5]);
+ travel(date);
+ });
+};
+
})();
View
@@ -21,15 +21,8 @@ function initMap() {
}
};
- /* Each ping looks like [latitude, longitude, count]. It represents the
- * numbers of downloads in the timeframe from this location. */
- glow.map.playNext = function() {
- var response = glow.data.map.next,
- /* [date, total, [pings]] */
- data = response.data,
- pings = data[2],
- newData = [];
-
+ glow.map.preparePings = function(pings) {
+ var rv = [];
/* Add `count` [lat, long] pairs to newData, then shuffle the whole
* thing. */
for (var j = 0, jj = pings.length; j < jj; j++) {
@@ -38,9 +31,20 @@ function initMap() {
longitude = ~~((-parseFloat(ping[1]) + 90) * 10),
count = ping[2];
for (var k = 0; k < count; k++) {
- newData.push([0, latitude, longitude]);
+ rv.push([0, latitude, longitude]);
}
}
+ return rv;
+ };
+
+ /* Each ping looks like [latitude, longitude, count]. It represents the
+ * numbers of downloads in the timeframe from this location. */
+ glow.map.playNext = function() {
+ var response = glow.data.map.next,
+ /* [date, total, [pings]] */
+ data = response.data,
+ newData = glow.map.preparePings(data[2]);
+
shuffle(newData);
/* Ping animations last 1 second so some are going to roll over. This
@@ -115,4 +119,19 @@ function initMap() {
}
}
}
+
+ glow.map.showAll = function(data) {
+ var ping;
+ ctx.clearRect(0, 0, 3600, 1800);
+ ctx.fillStyle = "rgba(255, 255, 255, .3)";
+ dbg(data.length);
+ for (var i = 0, ii = data.length; i < ii; i++) {
+ ping = data[i];
+ ctx.beginPath();
+ // Firefox 3.6 requires the anticlockwise argument.
+ ctx.arc(ping[1] * glow.map.scale, ping[2] * glow.map.scale,
+ 1, 0, Math.PI * 2, false);
+ ctx.fill();
+ }
+ };
}
View
@@ -614,3 +614,19 @@ noscript {
top: -78px;
left: 337px;
}
+.timeshift #sqlstream,
+.timeshift #cta,
+.timeshift #social,
+.timeshift .menu {
+ display: none;
+}
+#timeshift {
+ display: none;
+ position: absolute;
+ top: 100px;
+ right: 38px;
+ z-index: 100;
+}
+.timeshift #timeshift {
+ display: inherit;
+}

0 comments on commit 5083b07

Please sign in to comment.