Gekko - Market Visualizer

Gekko is a market share visualization app written using D3's Treemap, Highstocks, & AngularJS. It allows you to see the size of market sectors and how they change through time.

The subsectors are clickable! When you click on one, a dialog with each related subsector and their prices will appear. Within this same dialog you can compare non-related sectors to each other.

Backend

The data for the treemap as well as the Highstock comparison is being served by an API written in Node.js. The code for that API can be found here: gekko-backend.

Development

After installing client libraries go into the highcharts directory and change highcharts.src.js to highstock.src.js under main. Then make sure that the appropiate files are loaded in index.

Deploy

You can generate a production ready version of Gekko by using the grunt build command. Note: you will need to manually copy the fonts from bower_components/components-font-awesome/fonts folder into dist/fonts as well as copy select2-spinner.gif & select2.png from bower_components/select2 into dist/styles

Libraries

• D3

• Highstocks

• highcharts-ng

• AngularJS

• AngularUI

• Bootstrap

• D3 Tip

• Font Awesome

• Brick Fonts

Screenshots