merge from master

lioman · Jul 9, 2015 · 83f8a58 · 83f8a58
1 parent 395dc66
commit 83f8a58
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 49 deletions.
diff --git a/build/eu.json b/build/eu.json
diff --git a/index.html b/index.html
@@ -1,16 +1,17 @@
 <!DOCTYPE html>
 <meta charset="utf-8">
-<link rel="stylesheet" type="text/css" href="main.css">
 <link rel="stylesheet" type="text/css"
       href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css">
 
+<link rel="stylesheet" type="text/css" href="main.css">
+
 <link rel="stylesheet" type="text/css"
       href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css">
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"> </script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/vendor/modernizr.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js"></script>
 <script src="main.js"></script>
 <title>Drawing a map with D3.js and show data on it</title>
@@ -25,7 +26,7 @@ <h1><a href="#">MapStats</a></h1>
 </div>
 
 <div class="row">
-<h1>Passengers carried in Europe in 2013</h1>
+    <h1>Passengers carried in Europe in the years 2004 - 2014</h1>
 
     <div class="panel column large-10">
 <p>Passengers carried are:
@@ -35,10 +36,22 @@ <h1>Passengers carried in Europe in 2013</h1>
     <li>Excludes direct transit passengers.</li>
 </ul>
 </p>
+
+            <div class="small-10 medium-11 columns">
+                <div id='yearSlider' class="range-slider round" data-slider="2014"
+                     data-options="start: 2004; end: 2014; display_selector: #sliderOutput;">
+                    <span class="range-slider-handle" role="slider" tabindex="0"></span>
+                    <span class="range-slider-active-segment"></span>
+                </div>
+
+            <div class="label small-2 medium-1 columns">
+                <span id="sliderOutput"></span>
+            </div>
+</div>
 <p class="map" id="map">
 
         <p class="label secondary round">Data Source: <a href="http://ec.europa.eu/eurostat">eurostat</a></p>
-<script>drawMap();</script>
+
     </div>
 
     <div class="column large-1 icon-bar large-vertical one-up">
@@ -49,3 +62,14 @@ <h1>Passengers carried in Europe in 2013</h1>
     </div>
 </div>
 </body>
+<script>
+    $(document).ready(function () {
+        $(document).foundation();
+        drawMap(2014);
+
+        $('[data-slider]').on('change.fndtn.slider', function (e) {
+            setYear(e);
+            return false;
+        });
+    })
+</script>
diff --git a/main.css b/main.css
@@ -110,6 +110,19 @@
     fill: rgba(130, 221, 167, 0.52);
 }
 
+.subunit.HR {
+    fill: rgba(130, 221, 167, 0.52);
+}
+
+.subunit.YF,
+.subunit.BA,
+.subunit.MK,
+.subunit.ME,
+.subunit.AL
+{
+    fill: rgba(143, 143, 143, 0.42);
+}
+
 .subunit-label {
     fill: #000000;
     fill-opacity: .9;

diff --git a/main.js b/main.js
@@ -1,4 +1,7 @@
-function drawMap() {
+function drawMap(year) {
+    $('.map').empty();
+
+    var paxYear = 'pax' + year;
 
     var width = 900,
         height = 600;
@@ -12,88 +15,94 @@ function drawMap() {
         .projection(projection)
         .pointRadius(2);
 
-    var svg = d3.select(".map").append("svg")
-        .attr("width", width)
-        .attr("height", height);
+    var svg = d3.select('.map').append('svg')
+        .attr('width', width)
+        .attr('height', height);
 
     var radius = d3.scale.sqrt()
         .domain([0, 300000000])
         .range([0, 30]);
 
-    var formatNumber = d3.format(">-,");
+    var formatNumber = d3.format('>-,');
 
-    d3.json("build/eu.json", function (error, eu) {
+    d3.json('build/eu.json', function (error, eu) {
         if (error) return console.error(error);
 
-        svg.append("path")
+        svg.append('path')
             .datum(topojson.feature(eu, eu.objects.subunits))
-            .attr("d", path);
+            .attr('d', path);
 
         //add classes
-        svg.selectAll(".subunit")
+        svg.selectAll('.subunit')
             .data(topojson.feature(eu, eu.objects.subunits).features)
-            .enter().append("path")
-            .attr("class", function (d) {
-                return "subunit " + d.id;
+            .enter().append('path')
+            .attr('class', function (d) {
+                return 'subunit ' + d.id;
             })
-            .attr("d", path);
+            .attr('d', path);
 
         // Add Labels
-        svg.selectAll(".subunit-label")
+        svg.selectAll('.subunit-label')
             .data(topojson.feature(eu, eu.objects.subunits).features)
-            .enter().append("text")
-            .attr("class", function (d) {
-                return "subunit-label " + d.id;
+            .enter().append('text')
+            .attr('class', function (d) {
+                return 'subunit-label ' + d.id;
             })
-            .attr("transform", function (d) {
-                return "translate(" + path.centroid(d) + ")";
+            .attr('transform', function (d) {
+                return 'translate(' + path.centroid(d) + ')';
             })
-            .attr("dy", ".35em")
+            .attr('dy', '.35em')
             .text(function (d) {
                 return d.properties.name;
             });
 
 
-        svg.append("g")
-            .attr("class", "bubble")
-            .selectAll("circle")
+        svg.append('g')
+            .attr('class', 'bubble')
+            .selectAll('circle')
             .data(topojson.feature(eu, eu.objects.subunits).features
                 .sort(function (a, b) {
-                    return b.properties.pax2013 - a.properties.pax2013;
+                    return b.properties[paxYear] - a.properties[paxYear];
                 }))
-            .enter().append("circle")
-            .attr("transform", function (d) {
-                return "translate(" + path.centroid(d) + ")";
+            .enter().append('circle')
+            .attr('transform', function (d) {
+                return 'translate(' + path.centroid(d) + ')';
             })
-            .attr("r", function (d) {
-                return radius(d.properties.pax2013);
+            .attr('r', function (d) {
+                return radius(d.properties[paxYear]);
             })
-            .append("title")
+            .append('title')
             .text(function (d) {
                 return d.properties.name
-                    + "\nPax in 2013:  " + formatNumber(d.properties.pax2013);
-            }).attr("class", "bubbletext");
+                    + '\nPax in ' + year + ':  ' + formatNumber(d.properties[paxYear]);
+            }).attr('class', 'bubbletext');
 
 
-        var legend = svg.append("g")
-            .attr("class", "legend")
-            .attr("transform", "translate(" + (width - 50) + "," + (height - 20) + ")")
-            .selectAll("g")
+        var legend = svg.append('g')
+            .attr('class', 'legend')
+            .attr('transform', 'translate(' + (width - 50) + ',' + (height - 20) + ')')
+            .selectAll('g')
             .data([3000000, 30000000, 300000000])
-            .enter().append("g");
+            .enter().append('g');
 
-        legend.append("circle")
-            .attr("cy", function (d) {
+        legend.append('circle')
+            .attr('cy', function (d) {
                 return -radius(d);
             })
-            .attr("r", radius);
+            .attr('r', radius);
 
-        legend.append("text")
-            .attr("y", function (d) {
+        legend.append('text')
+            .attr('y', function (d) {
                 return -2 * radius(d);
             })
-            .attr("dy", "1.3em")
-            .text(d3.format(".1s"));
+            .attr('dy', '1.3em')
+            .text(d3.format('.1s'));
 
     });
+}
+
+
+
+function setYear(){
+    drawMap($('#yearSlider').attr('data-slider'));
 }