Webpack !

.editorconfig

@@ -0,0 +1,7 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true

README.md

@@ -118,6 +118,8 @@ You can also see a list of missing informations displayed as warnings in the dev
 
 To get started, clone or [fork](https://help.github.com/articles/fork-a-repo/) the repository, and install [Docker](https://docs.docker.com/engine/installation/). then you just run `docker-compose up`. Head over to [http://localhost:8000/](http://localhost:8000/) and you should see the map!
 
+You can then start editing the code. If you edit the frontend it will need compiling. You should run `docker-compose run web npm run watch` in order to compile your modifications on the fly.
+
 Once you're done doing your changes, submit a [pull request](https://help.github.com/articles/using-pull-requests/) to get them integrated.
 
 ## Troubleshooting

docker-compose.yml

@@ -1,7 +1,7 @@
 version: '2'
 services:
-  api:
-    build: api
+  web:
+    build: web
     command: ./node_modules/.bin/nodemon server.js
     depends_on: [mongo, memcached]
     environment:
@@ -10,8 +10,12 @@ services:
       - 'MONGO_URL=mongodb://mongo:27017/electricity'
     ports: ['8000:8000']
     volumes:
-      - './api/static:/home/static'
-      - './api/server.js:/home/server.js'
+      - './web/app:/home/app'
+      - './web/index.html:/home/index.html'
+      - './web/package.json:/home/package.json'
+      - './web/public:/home/public'
+      - './web/server.js:/home/server.js'
+      - './web/webpack.config.js:/home/webpack.config.js'
   feeder:
     build: feeder
     depends_on: [mongo]

production.yaml

@@ -1,22 +1,6 @@
 version: '2'
 services:
-  api:
-    depends_on: [mongo, memcached]
-    env_file: [./mailgun.env, ./secrets.env]
-    environment:
-      - ENV=production
-      - HTTPS_METHOD=noredirect
-      - [email protected]
-      - LETSENCRYPT_HOST=electricitymap-api.tmrow.co
-      - MEMCACHED_HOST=memcached
-      - MONGO_URL=mongodb://mongo:27017/electricity
-      - PROMETHEUS_HOST=prometheus.infrastructure_default
-      - VIRTUAL_HOST=electricitymap-api.tmrow.co
-    image: corradio/electricitymap_api:production
-    mem_limit: 200M
-    networks: [default, infrastructure] # required to be able to com' with statsd & nginx
-    restart: unless-stopped
-  api-secure:
+  web:
     depends_on: [mongo, memcached]
     env_file: [./mailgun.env, ./secrets.env]
     environment:
@@ -28,7 +12,7 @@ services:
       - MONGO_URL=mongodb://mongo:27017/electricity
       - PROMETHEUS_HOST=prometheus.infrastructure_default
       - VIRTUAL_HOST=electricitymap.tmrow.co
-    image: corradio/electricitymap_api:production
+    image: corradio/electricitymap_web:production
     mem_limit: 200M
     networks: [default, infrastructure] # required to be able to com' with statsd & nginx
     restart: unless-stopped

api/static/app/countryconfig.js → web/app/countryconfig.js

@@ -1,4 +1,6 @@
-function addCountriesConfiguration(countries) {
+var module = module.exports = {};
+
+module.addCountriesConfiguration = function(countries) {
     // Names
     countries['AT'].fullname = 'Austria';
     countries['BE'].fullname = 'Belgium';

api/static/app/countrymap.js → web/app/countrymap.js

@@ -129,3 +129,5 @@ CountryMap.prototype.data = function(data) {
     }
     return this;
 };
+
+module.exports = CountryMap;

api/static/app/countrytable.js → web/app/countrytable.js

@@ -1,3 +1,6 @@
+var co2lib = require('./co2eq');
+var moment = require('moment');
+
 function CountryTable(selector, co2Color) {
     this.root = d3.select(selector);
     this.co2Color = co2Color;
@@ -168,7 +171,7 @@ CountryTable.prototype.data = function(arg) {
         // Construct a list having each production in the same order as
         // `this.PRODUCTION_MODES`
         var sortedProductionData = this.PRODUCTION_MODES.map(function (d) {
-            var footprint = co2eqCalculator.footprintOf(d, that._data.countryCode);
+            var footprint = co2lib.footprintOf(d, that._data.countryCode);
             var production = arg.production ? arg.production[d] : undefined;
             return {
                 production: production,
@@ -278,7 +281,7 @@ CountryTable.prototype.data = function(arg) {
                 .transition()
                 .attr('fill', function (d) {
                     // color by Co2 Intensity
-                    // return that.co2Color(co2eqCalculator.footprintOf(d.mode, that._data.countryCode));
+                    // return that.co2Color(co2lib.footprintOf(d.mode, that._data.countryCode));
                     // color by production mode
                     return that.PRODUCTION_COLORS[d.mode];
                 })
@@ -332,7 +335,7 @@ CountryTable.prototype.data = function(arg) {
             });
         selection.select('image')
             .attr('xlink:href', function (d) {
-                return 'libs/flag-icon-css/flags/4x3/' + d.key.toLowerCase() + '.svg';
+                return 'flag-icon-css/flags/4x3/' + d.key.toLowerCase() + '.svg';
             })
         function getExchangeCo2eq(d) {
             return d.value > 0 ? 
@@ -391,3 +394,5 @@ CountryTable.prototype.data = function(arg) {
     }
     return this;
 };
+
+module.exports = CountryTable;

api/static/app/exchangeconfig.js → web/app/exchangeconfig.js

@@ -1,4 +1,6 @@
-function addExchangesConfiguration(exchanges) {
+var exports = module.exports = {};
+
+exports.addExchangesConfiguration = function(exchanges) {
     // AL
     exchanges['AL->GR'] = {
         lonlat: [20.689872, 40.198219],

api/static/app/exchangelayer.js → web/app/exchangelayer.js

@@ -1,11 +1,12 @@
-function ExchangeLayer(selector) {
+function ExchangeLayer(selector, co2Color) {
     this.TRIANGLE_HEIGHT = 1.0;
     this.GRADIENT_ANIMATION_MIDDLE_WIDTH_COEFFICIENT = 0.2;
     this.STROKE_CO2_THRESHOLD = 550;
     this.exchangeAnimationDurationScale = d3.scale.pow()
         .exponent(2)
         .domain([500, 6000])
         .range([2000, 10]);
+    this.co2Color = co2Color;
 
     this.root = d3.select(selector);
     this.exchangeArrowsContainer = this.root.append('g');
@@ -25,6 +26,10 @@ function ExchangeLayer(selector) {
         'L ' + hb + ' -' + (3.0 * hh) + ' Z';
     };
 
+    function isMobile() {
+        return (/android|blackberry|iemobile|ipad|iphone|ipod|opera mini|webos/i).test(navigator.userAgent);
+    }
+
     var that = this;
     this.animateGradient = function(selector, colorAccessor, durationAccessor) {
         var color = colorAccessor();
@@ -125,7 +130,7 @@ ExchangeLayer.prototype.render = function() {
                     function() {
                         var d = that.data()[i];
                         if (!d.co2intensity || !d.netFlow) return 'gray';
-                        return co2color(d.co2intensity);
+                        return that.co2Color(d.co2intensity);
                     },
                     function() {
                         if (!d.netFlow) return 2000; // we have to return a duration
@@ -177,3 +182,5 @@ ExchangeLayer.prototype.data = function(arg) {
     }
     return this;
 };
+
+module.exports = ExchangeLayer;

api/static/app/horizontalcolorbar.js → web/app/horizontalcolorbar.js

@@ -176,3 +176,5 @@ HorizontalColorbar.prototype.markerColor = function(arg) {
         .style('stroke', arg);
     return this;
 }
+
+module.exports = HorizontalColorbar;

api/static/app/main.js → web/app/main.js

@@ -1,3 +1,19 @@
+// Libraries
+var d3 = require('d3');
+var moment = require('moment');
+var queue = require('d3-queue').queue;
+
+// Modules
+var co2lib = require('./co2eq');
+var CountryConfig = require('./countryconfig');
+var CountryMap = require('./countrymap');
+var CountryTable = require('./countrytable');
+var CountryTopos = require('./countrytopos');
+var ExchangeConfig = require('./exchangeconfig');
+var ExchangeLayer = require('./exchangelayer');
+var HorizontalColorbar = require('./horizontalcolorbar');
+var Windy = require('./windy');
+
 // Constants
 var REFRESH_TIME_MINUTES = 5;
 
@@ -9,6 +25,19 @@ var windEnabled = true;
 var solarEnabled = false;
 var isLocalhost = window.location.href.indexOf('//electricitymap') == -1;
 
+// Error handling
+var opbeat = window._opbeat || function() {
+    if (!isLocalhost)
+        (window._opbeat.q = window._opbeat.q || []).push(arguments)
+};
+function catchError(e) {
+    console.error(e);
+    if (!isLocalhost) {
+        opbeat('captureException', e);
+        trackAnalyticsEvent('error', e.stack);
+    }
+}
+
 (function readQueryString() {
     args = location.search.replace('\?','').split('&');
     args.forEach(function(arg) {
@@ -34,13 +63,6 @@ function isSmallScreen() {
     return screen.width < 600;
 }
 
-function catchError(e) {
-    console.error(e);
-    if (!isLocalhost) {
-        _opbeat('captureException', e);
-        trackAnalyticsEvent('error', e.stack);
-    }
-}
 function trackAnalyticsEvent(eventName, paramObj) {
     if (!isLocalhost) {
         try {
@@ -92,7 +114,7 @@ var solarColor = d3.scale.linear()
 
 // Set up objects
 var countryMap = new CountryMap('.map', co2color);
-var exchangeLayer = new ExchangeLayer('.map');
+var exchangeLayer = new ExchangeLayer('.map', co2color);
 var countryTable = new CountryTable('.country-table', co2color);
 var windLayer = new Windy({ canvas: d3.select('.wind').node() });
 
@@ -103,8 +125,6 @@ var windColorbar = new HorizontalColorbar('.wind-colorbar', windColor)
 var solarColorbar = new HorizontalColorbar('.solar-colorbar', solarColor)
     .markerColor('black');
 
-var co2eqCalculator = new Co2eqCalculator();
-
 var tableDisplayEmissions = countryTable.displayByEmissions();
 
 function toogleSource() {
@@ -136,16 +156,16 @@ if (solarCanvas.node()) {
 }
 
 // Prepare data
-var countries = getCountryTopos(countries);
-addCountriesConfiguration(countries);
+var countries = CountryTopos.getCountryTopos(countries);
+CountryConfig.addCountriesConfiguration(countries);
 d3.entries(countries).forEach(function (o) {
     var country = o.value;
     country.maxCapacity =
         d3.max(d3.values(country.capacity));
     country.countryCode = o.key;
 });
 var exchanges = {};
-addExchangesConfiguration(exchanges);
+ExchangeConfig.addExchangesConfiguration(exchanges);
 d3.entries(exchanges).forEach(function(entry) {
     entry.value.countryCodes = entry.key.split('->').sort();
     if (entry.key.split('->')[0] != entry.value.countryCodes[0])
@@ -238,7 +258,7 @@ if (isSmallScreen()) {
             co2Colorbar.currentMarker(undefined);
         })
         .onProductionMouseOver(function (d, countryCode) {
-            var co2 = co2eqCalculator.footprintOf(d.mode, countryCode);
+            var co2 = co2lib.footprintOf(d.mode, countryCode);
             co2Colorbar.currentMarker(co2);
         })
         .onProductionMouseOut(function (d) {

api/static/libs/wind-js/windy.js → web/app/windy.js

@@ -1,4 +1,4 @@
-// This file was taken from https://github.com/esri/wind-js.
+// This file was taken from https://github.com/esri/wind-js, and slightly modified
 
 /*  Global class for simulating the movement of particle through a 1km wind grid
 
@@ -504,3 +504,4 @@ window.requestAnimationFrame = (function(){
           };
 })();
 
+module.exports = Windy;

api/static/index.html → web/index.html

@@ -19,29 +19,16 @@
 
         <title>Electricity Map | Live CO2 emissions of the European electricity production</title>
 
-        <link rel="stylesheet" type="text/css" href="style.css">
-        <link rel="stylesheet" type="text/css" href="libs/flag-icon-css/css/flag-icon.min.css">
-        <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
+        <link rel="stylesheet" type="text/css" href="css/styles.css">
+        <link rel="stylesheet" type="text/css" href="flag-icon-css/css/flag-icon.min.css">
+        <link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
 
-        <script src="libs/opbeat.min.js"
+        <script src="https://d3tvtfb6518e3e.cloudfront.net/3/opbeat.min.js"
             data-org-id="093c53b0da9d43c4976cd0737fe0f2b1"
-            data-app-id="c36849e44e">
+            data-app-id="c36849e44e"
+            async>
         </script>
-        <script src="libs/d3.v3.min.js"></script>
-        <script src="libs/d3.geo.projection.v0.min.js"></script>
-        <script src="libs/queue.v1.min.js"></script>
-        <script src="libs/topojson.v0.min.js"></script>
-        <script src="libs/moment.min.js"></script>
-        <script src="libs/wind-js/windy.js"></script>
-
-        <script src="app/co2eq.js"></script>
-        <script src="app/countrymap.js"></script>
-        <script src="app/countryconfig.js"></script>
-        <script src="app/countrytopos.js"></script>
-        <script src="app/exchangeconfig.js"></script>
-        <script src="app/horizontalcolorbar.js"></script>
-        <script src="app/exchangelayer.js"></script>
-        <script src="app/countrytable.js"></script>
+        <script defer src="dist/bundle.js"></script>
 
         <!-- start GA -->
         <script>
@@ -188,7 +175,7 @@ <h1>
             <div class="footer">
                 <div class="watermark">
                     <a class="tomorrow-link" href="http://www.tmrow.co" target="_blank">
-                        <img src="tomorrow_logo_open_source.svg" style="width:160px"/>
+                        <img src="images/tomorrow_logo_open_source.svg" style="width:160px"/>
                     </a><br />
                     <!-- Facebook follow -->
                     <div class="fb-like" 
@@ -221,6 +208,4 @@ <h1>
             <i id="from"></i> <span id="from"></span> → <i id="to"></i> <span id="to"></span>: <span id="flow"></span> MW
         </div>
     </body>
-
-    <script src="app/main.js"></script>
 </html>

api/package.json → web/package.json

@@ -5,20 +5,28 @@
   "dependencies": {
     "async": "^2.0.1",
     "compression": "^1.6.2",
-    "d3": "^4.2.3",
+    "d3": "^3.5.17",
+    "d3-queue": "^3.0.3",
     "express": "^4.10.2",
     "mathjs": "^3.5.1",
     "memcached": "^2.2.2",
     "moment": "^2.15.2",
     "mongodb": "^2.2.9",
-    "node-statsd": "^0.1.1",
     "opbeat": "^3.21.0",
-    "snappy": "^5.0.5"
+    "snappy": "^5.0.5",
+    "topojson": "^2.2.0"
   },
   "devDependencies": {
-    "nodemon": "^1.10.2"
+    "nodemon": "^1.10.2",
+    "webpack": "^1.13.3"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/corradio/electricitymap.git"
   },
   "scripts": {
-    "dev": "nodemon server.js"
+    "build": "webpack",
+    "dev": "nodemon server.js",
+    "watch": "webpack --watch"
   }
 }

api/static/style.css → web/public/css/styles.css

@@ -61,7 +61,7 @@ html, body {
     position: absolute;
     top: 0px;
     opacity: 0.7;
-    background: black url('libs/loading.svg') no-repeat center center;
+    background: black url('../images/loading.svg') no-repeat center center;
 }
 .map {
     width: 100%;