Solo team formed by Stewart Taylor.

Team Members

Launch Site

Energy Planet

🌎 ⚡ World renewable energy usage visualized with WebGL .

V800 replace

Description

Energy planet is a visualization of the Earth which shows each countries use of renewable energy. The more smoke that appears over a country means that country is less reliant on renewable energy.

The data for the renewable usage by country comes from World bank (https://data.worldbank.org/indicator/EG.FEC.RNEW.ZS?year_high_desc=false). This data set contains renewable energy usage for most countries from 1990 up to 2014.

The visualization makes use of Node.js to create the image maps of renewable energy for each year. Three.js, WebGL with fragment and vertex shaders provide the smoke overlay.

Instructions

Simply go to the website and view the visualization. Using the mouse you can move around to get a better a view of certain countries. You can also use the slider to see the data for a specific year.

Browser Requirements: - Requires a WebGL enabled browser.

Built With

List of sources

World Renewable energy data source: https://data.worldbank.org/indicator/EG.FEC.RNEW.ZS?year_high_desc=false Star skybox: https://forum.unity.com/threads/space-skybox.99258 WebGL noise: https://github.com/ashima/webgl-noise Earth: http://learningthreejs.com/blog/2013/09/16/how-to-make-the-earth-in-webgl ThreeJS: https://threejs.org https://github.com/mattdesl/three-orbit-controls

Maintained sources list: https://energyplanet.herokuapp.com/sources

NPM Packages used: "blend": "^1.2.0", "body-parser": "^1.17.2", "cookie-parser": "^1.4.3", "csv-parse": "^2.0.0", "debug": "^2.6.0", "ejs": "^2.5.5", "express": "^4.14.0", "jimp": "^0.2.28", "morgan": "^1.7.0", "node-sass-middleware": "^0.11.0", "serve-favicon": "^2.3.2", "winston": "^2.3.1" "babelify": "^7.3.0", "browserify": "^13.3.0", "eslint": "^3.13.1", "eslint-config-airbnb": "^14.0.0", "eslint-plugin-import": "^2.2.0", "eslint-plugin-jsx-a11y": "^3.0.2", "eslint-plugin-react": "^6.9.0", "glob": "^7.1.1", "gulp": "^3.9.1", "gulp-concat": "^2.6.1", "gulp-eslint": "^3.0.1", "gulp-live-server": "0.0.30", "gulp-sourcemaps": "^2.4.0", "gulp-util": "^3.0.8", "vinyl-buffer": "^1.0.0", "vinyl-source-stream": "^1.1.0"

Other Packages used: - Jquery - Foundation - Three.js

Feedback / Ratings (7)

All Feedback