Project Dashboard loc view - GenusDev/genie-portal GitHub Wiki

SPRINT GOAL - “The purpose of the dashboard is to navigate the website. Each circle is “clickable.” Each circle is clustered by locale. Later we will have the data organized around time series data.

Design

Inputs

At this initial stage are only using revenues, earnings and location for providing context for navigating the projects presented. While this will be the default presentation, a toggle will be integrated eventually that will allow for analysis on various dimensions. Further other tokens on other portals and potentially even platforms can be compared if they follow the same token structure.

  • Earnings will pull from the cashflows. The earnings is the average yearly positive inflow at year 3.5 - midway through the 7 years of projections requested.

d3 Force Dashboard

The dashboard is build using D3’s force functionality. It creates a draggable interactive interface. The nodes for the locations are of increasing size, with continent being super small. Give that we would like to place extra emphasis on municipalities, we are organizing projects around cities primarily, by-passing the nation-state as an indicator. In the future we may provide functionality for the developer to scope out their project location based hierarchy as they wish, potentially providing neighborhood specificity. All names should only show on hover. These project points open up to project modules with more info about each. The projects are colored in order of development (proposed, in development, operating).

Inspiration: http://biodiversity.melbourne.vic.gov.au/insects/index.html# Useful examples: https://bl.ocks.org/mbostock/1062288 http://bl.ocks.org/FrissAnalytics/e9ce129a11dad7441eecacbbb6bad95c https://bl.ocks.org/mbostock/1212215 https://bl.ocks.org/mbostock/1212197 http://www.puzzlr.org/basics-of-d3-force-directed-graphs/

Future Implementations:

  • (2 hrs) Create toggle legend
  • (2 hrs) Have dashboard share x axis with token dashboard intensity of color indicating how close the pitched project is to developed - used color gradient icons representing locations
  • Allow for concentrating by locale
  • Create time series data
  • Integrate data on other projects for a larger comparison
  • Dynamic visualization of each project as shown as physical real estate properties
    • Houses, skyscrapers, etc…
    • Map that is traversable and has clickable properties that toggle their relevant data
    • Create an after-effects animation to demonstrate how cash flows from thing
  • Toggle in data from other portals
⚠️ **GitHub.com Fallback** ⚠️