Permalink
Browse files

Add country chooser

  • Loading branch information...
1 parent 0136877 commit 595ae6726f12daaa2182d073ba4585fdd51ac1d3 Per Thulin committed Aug 12, 2012
Showing with 92 additions and 11 deletions.
  1. +9 −0 html/index.html
  2. +83 −11 static/main.js
View
@@ -16,10 +16,19 @@
text-align: center;
margin-top: 50px;
}
+ .controls {
+ text-align: center;
+ padding: 5px;
+ }
</style>
</head>
<body>
+ <div class="controls">
+ <select class="country">
+ </select>
+ </div>
<div class="progress"></div>
+ <div class="cloud"></div>
<script src="/static/d3.js"></script>
<script src="/static/d3.layout.cloud.js"></script>
<script src="/static/main.js"></script>
View
@@ -1,13 +1,22 @@
+var initialPopStateHasRun = false;
+var hasLoaded = false;
var biggestNum = 0;
var WIDTH = window.innerWidth;
var HEIGHT = window.innerHeight;
var global = {};
var countries = {};
-var words;
+var words = [];
var progressCounter = 0;
+var $cloud = document.querySelector('.cloud');
var $progress = document.querySelector('.progress');
+var $country = document.querySelector('select.country');
var CACHE_TIME = 60 * 10 * 1000; // 10 minutes
+$country.onchange = function() {
+ history.pushState(null, null, '/?country=' + this.value)
+ run();
+};
+
function extractWords(map) {
var i;
var entry;
@@ -26,22 +35,42 @@ function extractWords(map) {
window.words = words.sort(function(a, b) {
return a.size < b.size;
});
+
+ biggestNum = words[0].size;
+}
+
+function setupCountryChooser() {
+ var $option;
+ var selectedCountry = getCountryFromUrl();
+ $country.innerHTML = '';
+ $option = document.createElement('option');
+ $option.setAttribute('value', 'global');
+ $option.innerHTML = 'Global';
+ $country.appendChild($option);
+
+ for (key in countries) {
+ if (countries.hasOwnProperty(key)) {
+ $option = document.createElement('option');
+ $option.setAttribute('value', key);
+ $option.innerHTML = key;
+ if (selectedCountry === key) {
+ $option.setAttribute('selected', 'selected');
+ }
+ $country.appendChild($option);
+ }
+ }
}
function parseData(json) {
for (i = 0; i < json.length; i += 1) {
var entry = json[i];
global[entry.q] = (global[entry.q] || 0) + 1;
- if (global[entry.q] > biggestNum) {
- biggestNum = global[entry.q];
- }
-
if (!countries.hasOwnProperty(entry.country)) {
countries[entry.country] = {};
}
- countries[entry.country] = (countries[entry.country][entry.q] || 0) + 1;
+ countries[entry.country][entry.q] = (countries[entry.country][entry.q] || 0) + 1;
}
}
@@ -52,15 +81,18 @@ function progress(word) {
function loadLayout() {
$progress.style.display = "block";
+ $cloud.innerHTML = '';
+
var fontSize = d3.scale.log().range([10, 100]);
+
d3.layout.cloud().size([WIDTH, HEIGHT])
.words(words)
.timeInterval(10)
.rotate(function(d) { return ~~(Math.random() * 5) * 30 - 60; })
.font("Impact")
.fontSize(function(d) { return fontSize(+d.size); })
/*.fontSize(function(d) {
- var size = d.size * (d.size/biggestNum) * 14;
+ var size = 62 * (d.size/biggestNum);
if (size < 7) {
size = 7;
}
@@ -74,7 +106,8 @@ function loadLayout() {
function draw(words) {
$progress.style.display = "none";
- d3.select("body").append("svg")
+
+ d3.select(".cloud").append("svg")
.attr("width", WIDTH)
.attr("height", HEIGHT)
.append("g")
@@ -118,8 +151,47 @@ function getData(callback) {
xhr.send();
}
-getData(function(json) {
- parseData(json);
- extractWords(global);
+function getCountryFromUrl() {
+ var matches = location.href.match('country=(.*)');
+ if (matches && matches.length === 2 && countries.hasOwnProperty(matches[1])) {
+ return matches[1];
+ }
+}
+
+function run() {
+ var map;
+ var selectedCountry = getCountryFromUrl();
+ progressCounter = 0;
+ words = [];
+
+ if (!hasLoaded) {
+ getData(function(json) {
+ hasLoaded = true;
+ parseData(json);
+ setupCountryChooser();
+ run();
+ });
+ return;
+ }
+
+ if (selectedCountry) {
+ map = countries[selectedCountry];
+ } else {
+ map = global;
+ }
+
+ extractWords(map);
loadLayout();
+}
+
+window.addEventListener('popstate', function(event) {
+ // Chrome throws an initial popState, http://dropshado.ws/post/15251622664/ignore-initial-popstate
+ var isChrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
+ if (isChrome && !initialPopStateHasRun) {
+ initialPopStateHasRun = true;
+ return;
+ }
+ run();
});
+
+run();

0 comments on commit 595ae67

Please sign in to comment.