Task/tooltip (electricitymaps#134)

* Fix electricitymaps#115

* Rewriting labels

api/static/app/countrymap.js

@@ -60,6 +60,9 @@ CountryMap.prototype.render = function() {
                 .on('mouseout', function (d, i) {
                     return that.countryMouseOutHandler.call(this, d, i);
                 })
+                .on('mousemove', function (d, i) {
+                    return that.countryMouseMoveHandler.call(this, d, i);
+                })
                 .on('click', function (d, i) {
                     d3.event.stopPropagation(); // To avoid call click on sea
                     if (that.selectedCountry !== undefined) {
@@ -105,6 +108,12 @@ CountryMap.prototype.onCountryMouseOver = function(arg) {
     return this;
 };
 
+CountryMap.prototype.onCountryMouseMove = function(arg) {
+    if (!arg) return this.countryMouseMoveHandler;
+    else this.countryMouseMoveHandler = arg;
+    return this;
+};
+
 CountryMap.prototype.onCountryMouseOut = function(arg) {
     if (!arg) return this.countryMouseOutHandler;
     else this.countryMouseOutHandler = arg;

api/static/app/countrytable.js

@@ -381,7 +381,9 @@ CountryTable.prototype.data = function(arg) {
             .text(Math.round(this._data.co2intensity) || '?');
         d3.select('.country-emission-rect')
             .transition()
-            .style('background-color', that.co2Color(this._data.co2intensity));
+            .style('background-color',
+                this._data.co2intensity ?
+                    that.co2Color(this._data.co2intensity) : 'gray');
 
         this.resize();
     }

api/static/app/exchangelayer.js

@@ -100,6 +100,15 @@ ExchangeLayer.prototype.render = function() {
             .attr('stroke-width', 0.1)
             .attr('transform', getTransform)
             .attr('transform-origin', '0 0')
+            .on('mouseover', function (d, i) {
+                return that.exchangeMouseOverHandler.call(this, d, i);
+            })
+            .on('mouseout', function (d, i) {
+                return that.exchangeMouseOutHandler.call(this, d, i);
+            })
+            .on('mousemove', function (d, i) {
+                return that.exchangeMouseMoveHandler.call(this, d, i);
+            })
             .on('click', function (d) { console.log(d); })
             .each(function (d, i) {
                 // Warning: with this technique, we can add arrows dynamically,
@@ -139,6 +148,25 @@ ExchangeLayer.prototype.render = function() {
     return this;
 }
 
+
+ExchangeLayer.prototype.onExchangeMouseOver = function(arg) {
+    if (!arg) return this.exchangeMouseOverHandler;
+    else this.exchangeMouseOverHandler = arg;
+    return this;
+};
+
+ExchangeLayer.prototype.onExchangeMouseMove = function(arg) {
+    if (!arg) return this.exchangeMouseMoveHandler;
+    else this.exchangeMouseMoveHandler = arg;
+    return this;
+};
+
+ExchangeLayer.prototype.onExchangeMouseOut = function(arg) {
+    if (!arg) return this.exchangeMouseOutHandler;
+    else this.exchangeMouseOutHandler = arg;
+    return this;
+};
+
 ExchangeLayer.prototype.data = function(arg) {
     if (!arg) return this._data;
     else {

api/static/app/main.js

@@ -137,7 +137,7 @@ if (isMobile()) {
     }
 } else {
     d3.select('.panel-container')
-        .style('width', 360);
+        .style('width', 330);
     d3.select('.country-picker')
         .style('display', 'none');
 
@@ -321,13 +321,31 @@ function dataLoaded(err, state, solar, wind) {
                 .style('cursor', 'hand')
             if (d.co2intensity)
                 co2Colorbar.currentMarker(d.co2intensity);
+            d3.select('#country-tooltip')
+                .style('display', 'inline');
+        })
+        .onCountryMouseMove(function (d) {
+            var tooltip = d3.select('#country-tooltip');
+            var w = tooltip.node().getBoundingClientRect().width;
+            var h = tooltip.node().getBoundingClientRect().height;
+            tooltip
+                .style('left', (d3.event.pageX - w - 5) + 'px')
+                .style('top', (d3.event.pageY - h - 5) + 'px');
+            tooltip.select('img.country-flag')
+                .attr('src', 'libs/flag-icon-css/flags/4x3/' + d.countryCode.toLowerCase() + '.svg');
+            tooltip.select('.country-emission-rect')
+                .style('background-color', d.co2intensity ? co2color(d.co2intensity) : 'gray');
+            tooltip.select('.country-emission-intensity')
+                .text(Math.round(d.co2intensity) || '?');
         })
         .onCountryMouseOut(function (d) { 
             d3.select(this)
                 .style('opacity', 1)
                 .style('cursor', 'normal')
             if (d.co2intensity)
                 co2Colorbar.currentMarker(undefined);
+            d3.select('#country-tooltip')
+                .style('display', 'none');
         })
         .render();
 
@@ -339,6 +357,45 @@ function dataLoaded(err, state, solar, wind) {
         exchangeLayer
             .data(d3.values(exchanges))
             .projection(countryMap.projection())
+            .onExchangeMouseOver(function (d) { 
+                d3.select(this)
+                    .style('opacity', 0.8)
+                    .style('cursor', 'hand')
+                if (d.co2intensity)
+                    co2Colorbar.currentMarker(d.co2intensity);
+                d3.select('#exchange-tooltip')
+                    .style('display', 'inline');
+            })
+            .onExchangeMouseMove(function (d) {
+                var tooltip = d3.select('#exchange-tooltip');
+                var w = tooltip.node().getBoundingClientRect().width;
+                var h = tooltip.node().getBoundingClientRect().height;
+                tooltip
+                    .style('left', (d3.event.pageX - w - 5) + 'px')
+                    .style('top', (d3.event.pageY - h - 5) + 'px');
+                tooltip.select('.country-emission-rect')
+                    .style('background-color', d.co2intensity ? co2color(d.co2intensity) : 'gray');
+                var i = d.netFlow > 0 ? 0 : 1;
+                tooltip.select('span.from')
+                    .text(d.countryCodes[i]);
+                tooltip.select('span.to')
+                    .text(d.countryCodes[(i + 1) % 2]);
+                tooltip.select('span.flow')
+                    .text(Math.abs(Math.round(d.netFlow)));
+                tooltip.select('img.from')
+                    .attr('src', 'libs/flag-icon-css/flags/4x3/' + d.countryCodes[i].toLowerCase() + '.svg');
+                tooltip.select('img.to')
+                    .attr('src', 'libs/flag-icon-css/flags/4x3/' + d.countryCodes[(i + 1) % 2].toLowerCase() + '.svg')
+            })
+            .onExchangeMouseOut(function (d) {
+                d3.select(this)
+                    .style('opacity', 1)
+                    .style('cursor', 'normal')
+                if (d.co2intensity)
+                    co2Colorbar.currentMarker(undefined);
+                d3.select('#exchange-tooltip')
+                    .style('display', 'none');
+            })
             .render();
 
     d3.select('.loading')

api/static/index.html

@@ -113,7 +113,7 @@
         <!-- <canvas class="map solar"></canvas> -->
         <div class="legend">
             <div class="co2-legend">
-                <span class="colorbar-unit">GHG intensity (gCO2eq/kWh)</span>
+                <span class="colorbar-unit">Carbon intensity (gCO2eq/kWh)</span>
                 <svg class="co2-colorbar"></svg>
             </div>
             <div class="wind-legend">
@@ -122,7 +122,7 @@
             </div>
         </div>
         <div class="content">
-            <div class="panel-container">
+            <div class="panel panel-container">
                 <h1 style="line-height: 1.3; color: white; font-size: 1.6em; padding-bottom: 15px;
         border-bottom: solid grey 1px; margin-top: 0px;">
                     Real-time CO2 emissions of the European electricity production
@@ -135,18 +135,17 @@
                     <span style="color: darkgray;">
                         (<span class="country-last-update">?</span>) [<a href="https://github.com/corradio/electricitymap#real-time-electricity-data-sources" target="_blank">source</a>]
                         <br />
-                        Emission rate:  <div class="country-emission-rect"></div> <span class="country-emission-intensity"></span> gCO2eq/kWh<br />
+                        Carbon intensity:  <div class="country-emission-rect"></div> <span class="country-emission-intensity"></span> gCO2eq/kWh<br />
                         <span class="country-show-emissions">Electricity production (<a href="javascript:toogleSource();">show emissions</a>) by source:</span>
                         <span class="country-show-electricity" style="display: none;">Emissions (<a href="javascript:toogleSource();">show electricity</a>) by source:</span>
                     </span>
                 </div>
                 <svg class="country-table" style="display: none"></svg>
                 <div class="country-table-initial-text">
-                    This map shows in real-time <span style="color: lightgray">where your electricity comes from</span> and <span style="color: lightgray">how much CO2</span> was emitted to produce it.
+                    This map shows in real-time <span style="color: lightgray">where your electricity comes from</span> and <span style="color: lightgray">how much CO2</span> was emitted to produce it.<br />
+                    It takes into account electricity <span style="color: lightgray">imports and exports</span> of each country.
                     <!--The map also shows renewable resources like wind and sun.--><br />
                     <br />
-                    The <span style="color: lightgray">blinking arrows</span> represent electricity <span style="color: lightgray">imports and exports</span>.<br />
-                    <br />
                     <span style="color: lightgray; font-size: 14px; color: white;"><i>Tip: Click on a country to start exploring ⟶</i></span><br />
                     <div class="country-picker-container" style="text-align: center">
                         <select class="country-picker" onchange="onSelectedCountryChange();"></select>
@@ -179,6 +178,14 @@
             </div>
         </div>
         <div class="loading overlay"></div>
+        <div id="country-tooltip" class="tooltip panel">
+            Carbon intensity:<br />
+            <div class="country-emission-rect"></div> <span class="country-emission-intensity"></span> gCO2eq/kWh
+        </div>
+        <div id="exchange-tooltip" class="tooltip panel">
+            Cross-border export:<br />
+            <img class="from country-flag"></img> <span class="from"></span> → <img class="to country-flag"></img> <span class="to"></span>: <span class="flow"></span> MW
+        </div>
     </body>
 
     <script src="app/main.js"></script>

api/static/style.css

@@ -97,19 +97,22 @@ html, body {
     display: table-footer-group;
     pointer-events: all;
 }
+.panel {
+    font-size: 0.7em;
+    background-color: rgba(70, 70, 70, 0.95);
+    border: 1px solid grey;
+    color: lightgray;
+}
 .panel-container {
     margin: 10px;
     padding: 10px;
-    background-color: rgba(70, 70, 70, 0.95);
-    border: 1px solid grey;
     line-height: 1.7em;
     pointer-events: all;
 }
 .panel-container > svg {
     display: block;
 }
 .panel-container, panel-container.text {
-    font-size: 0.7em;
     color: lightgray;
     fill: lightgray;
 }
@@ -120,7 +123,7 @@ html, body {
     font-size: 1.1em;
     color: darkgrey;
 }
-.country-emission-intensity {
+.country-emission-intensity, #exchange-tooltip .flow {
     font-weight: bold;
 }
 .country-emission-rect {
@@ -135,7 +138,7 @@ html, body {
     overflow: auto;
     display: inline-block;
     height: 100%;
-    width: 70px;
+    width: 80px;
     text-align: right;
     font-size: 1.3em;
 }
@@ -184,3 +187,15 @@ a:hover {
 div.fb-share-button, iframe.twitter-share-button, iframe.__slackin {
     vertical-align: middle
 }
+
+.tooltip {
+    color: darkgrey;
+    display: none;
+    padding: 5px;
+    position: absolute;
+}
+
+.country-flag {
+    width: 12px;
+    height: 9px;
+}