Skip to content

Commit

Permalink
Hide solar and update exchange triangles to be centered in (0,0)
Browse files Browse the repository at this point in the history
  • Loading branch information
@corradio
corradio committed Jun 17, 2016
1 parent 748476d commit efee6bd
Show file tree
Hide file tree
Showing 2 changed files with 46 additions and 33 deletions.
48 changes: 26 additions & 22 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@
<body>
<svg class="map sea"></svg>
<canvas class="map wind"></canvas>
<canvas class="map solar"></canvas>
<!--<canvas class="map solar"></canvas>-->
<svg class="co2-colorbar"></svg>
<svg class="wind-colorbar"></svg>
<div class="panel-container">
Expand Down Expand Up @@ -142,7 +142,9 @@
solarCanvas.attr('height', height);
solarCanvas.attr('width', width);

var ctx = d3.select('.solar').node().getContext('2d');
if (solarCanvas.node()) {
var ctx = solarCanvas.node().getContext('2d');
}

// Prepare data
var countries = {};
Expand Down Expand Up @@ -200,26 +202,28 @@

console.log('solar', solar);

// Interpolates between two solar forecasts
var Nx = solar.forecasts[0].DLWRF.length;
var Ny = solar.forecasts[0].DLWRF[0].length;
var t_before = d3.time.format.iso.parse(solar.forecasts[0].horizon).getTime();
var t_after = d3.time.format.iso.parse(solar.forecasts[1].horizon).getTime();
var now = (new Date()).getTime();
var k = (now - t_before)/(t_after - t_before);
for (var i of d3.range(Nx)) {
for (var j of d3.range(Ny)) {
var n = i * Ny + j;
var lon = solar.forecasts[0].lonlats[0][n];
var lat = solar.forecasts[0].lonlats[1][n];
var val = d3.interpolate(solar.forecasts[0].DLWRF[i][j], solar.forecasts[1].DLWRF[i][j])(k);
var p = countryMap.projection([lon, lat]);
if (isNaN(p[0]) || isNaN(p[1]))
continue;
ctx.beginPath();
ctx.arc(p[0], p[1], 2, 0, 2 * Math.PI);
ctx.fillStyle = solarColor(val);
ctx.fill();
if (ctx) {
// Interpolates between two solar forecasts
var Nx = solar.forecasts[0].DLWRF.length;
var Ny = solar.forecasts[0].DLWRF[0].length;
var t_before = d3.time.format.iso.parse(solar.forecasts[0].horizon).getTime();
var t_after = d3.time.format.iso.parse(solar.forecasts[1].horizon).getTime();
var now = (new Date()).getTime();
var k = (now - t_before)/(t_after - t_before);
for (var i of d3.range(Nx)) {
for (var j of d3.range(Ny)) {
var n = i * Ny + j;
var lon = solar.forecasts[0].lonlats[0][n];
var lat = solar.forecasts[0].lonlats[1][n];
var val = d3.interpolate(solar.forecasts[0].DLWRF[i][j], solar.forecasts[1].DLWRF[i][j])(k);
var p = countryMap.projection([lon, lat]);
if (isNaN(p[0]) || isNaN(p[1]))
continue;
ctx.beginPath();
ctx.arc(p[0], p[1], 2, 0, 2 * Math.PI);
ctx.fillStyle = solarColor(val);
ctx.fill();
}
}
}

Expand Down
31 changes: 20 additions & 11 deletions scripts/exchangelayer.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
function ExchangeLayer(selector, projection) {
this.TRIANGLE_HEIGHT = 1;
this.TRIANGLE_HEIGHT = 1.0;
this.GRADIENT_ANIMATION_MIDDLE_WIDTH_COEFFICIENT = 0.2;
this.EXCHANGE_ANIMATION_DURATION = 1000;
this.exchangeAnimationDurationScale = d3.scale.pow()
.exponent(2)
.domain([500, 4000])
Expand All @@ -15,10 +16,17 @@ function ExchangeLayer(selector, projection) {
this.exchangeGradientsContainer = this.root.append('g');

this.trianglePath = function() {
var w = this.TRIANGLE_HEIGHT;
return 'M 0 0 L ' + w + ' ' + this.TRIANGLE_HEIGHT + ' L -' + w + ' ' + this.TRIANGLE_HEIGHT + ' Z ' +
'M 0 -' + this.TRIANGLE_HEIGHT + ' L ' + w + ' 0 L -' + w + ' 0 Z ' +
'M 0 -' + this.TRIANGLE_HEIGHT * 2.0 + ' L ' + w + ' -' + this.TRIANGLE_HEIGHT + ' L -' + w + ' -' + this.TRIANGLE_HEIGHT + ' Z'
var hh = this.TRIANGLE_HEIGHT / 2.0; // half-height
var hb = this.TRIANGLE_HEIGHT; // half-base with base = 0.5 * height
return 'M -' + hb + ' -' + hh + ' ' +
'L 0 ' + hh + ' ' +
'L ' + hb + ' -' + hh + ' Z ' +
'M -' + hb + ' ' + hh + ' ' +
'L 0 ' + (3.0 * hh) + ' ' +
'L ' + hb + ' ' + hh + ' Z ' +
'M -' + hb + ' -' + (3.0 * hh) + ' ' +
'L 0 -' + hh + ' ' +
'L ' + hb + ' -' + (3.0 * hh) + ' Z';
};

var that = this;
Expand All @@ -27,7 +35,7 @@ function ExchangeLayer(selector, projection) {
.data([
{offset: 0, color: color},
{offset: 0, color: color},
{offset: 0, color: d3.rgb(color).brighter(0.8)},
{offset: 0, color: d3.rgb(color).brighter(2.0)},
{offset: 0, color: color},
{offset: 1, color: color},
]);
Expand All @@ -44,7 +52,7 @@ function ExchangeLayer(selector, projection) {
return function (t) { return d.offset };
else {
return function (t) {
return 1 - t + (i - 2) * that.GRADIENT_ANIMATION_MIDDLE_WIDTH_COEFFICIENT;
return t + (i - 2) * that.GRADIENT_ANIMATION_MIDDLE_WIDTH_COEFFICIENT;
};
}
})
Expand Down Expand Up @@ -78,16 +86,16 @@ ExchangeLayer.prototype.data = function(arg) {
return that.trianglePath();
})
.attr('transform', function (d) {;
var rotation = d.rotation + (d.netFlow < 0 ? 180 : 0);
var rotation = d.rotation + (d.netFlow > 0 ? 180 : 0);
var scale = that.exchangeArrowScale(Math.abs(d.netFlow));
return 'translate(' + d.center[0] + ',' + d.center[1] + '),' +
'scale(' + that.exchangeArrowScale(Math.abs(d.netFlow)) + '),' +
'rotate(' + rotation + ')';
'rotate(' + rotation + '), scale(' + scale + ')';
})
.attr('fill', function (d, i) { return 'url(#exchange-gradient-' + i + ')' })
.attr('stroke', 'black')
.attr('stroke-width', 0.1)
.on('click', function (d) {
console.log(d, that.exchangeAnimationDurationScale(Math.abs(d.netFlow)));
console.log(d);
})
.each(function (d, i) {
if (!d.netFlow) return;
Expand All @@ -96,6 +104,7 @@ ExchangeLayer.prototype.data = function(arg) {
d3.select('#exchange-gradient-' + i),
co2 ? co2color(co2) : 'grey',
that.exchangeAnimationDurationScale(Math.abs(d.netFlow))
//that.EXCHANGE_ANIMATION_DURATION
);
});
}
Expand Down

0 comments on commit efee6bd

Please sign in to comment.