Solo team formed by Stewart Taylor.

Team Members

Launch Site

Energy Planet

🌎 ⚡ World renewable energy usage visualized with WebGL .

V800 replace


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 ( 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.


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: Star skybox: WebGL noise: Earth: ThreeJS:

Maintained sources list:

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