Giter Club home page Giter Club logo

Demo

http://web.mit.edu/lu16j/www/camsys/visuals.html

Usage

Configure functions/data_loader.js to load data into the schema specified in the file.
Configure default values and metric functions (detailed below) in setup.js.

Area Bar Chart Visualization

  • Black vertical bar: divides historical (left) and projected (right) data.
  • Black pointer: indicates the year currently being displayed in the Sunburst visualization.

Left Y-Axis (weighted % of assets)

  • Colored bars: represent percentage of assets in each type of condition.
  • Green trendline: a linear regression on the historical percentages of "good" assets.
  • Water table threshold line: the "goal", a user-defined threshold for being in "good repair".

Right Y-Axis ($ invested)

  • Black curve: shows the amount invested in past years, and the amount projected to be invested in future years.

Sunburst Visualization

Breakdown of investment in any given year

Each layer outward displays the data in a finer grain. Unzoomed, this corresponds to:

  • Center: total investment in (year).
  • 1st ring: percentage of total divided into each class of asset (vehicle, etc.).
  • 2nd ring: percentage of class divided into each type of asset (vehicle -> bus, light rail, etc.).
  • 3rd ring: percentage of type divided into each individual asset.

Clicking on any segment in a layer will zoom into the segment, with itself expanding to occupy the entire 360 degrees and its sub-divisions in the next layer expanding accordingly. Clicking on the small circle in the center will zoom back out into the previous layer.
Zooming in on a segment will also re-scale the Area Bar Chart to display percentages and investment for the selected sub-group only.
Clicking on the list icon in the upper right reveals a heirarchical legend. Clicking on these items corresponds to clicking on segments in the Sunburst chart.

Calculator

  • Click the "Show Calculator" button to reveal.
  • Enter either field to calculate the result in the other.
  • Ex. Enter "20000000" (20 million) in the first field to get the year backlog will be cleared in the second field.

Default Metrics (in functions/setup.js)

  • Area Bar Chart
    • area_bar_metric
      • Weights each asset LINEARLY with its PRICE and LOGARITHMICALLY with its USAGE, so expensive and highly-used (by commuters) assets are weighted the highest. Usage is currently made-up data loosely related to number of commuters served per day.
    • area_bar_comparator
      • Sorts the yearly replacement priority queue by each asset's RATE OF DECAY, or the slope of its TERM curve at the given year; faster-decaying assets are queued higher up.
    • queue order
      • In models/System.js:
        • var queue = marginal_queue.concat(backlog_queue).concat(bad_queue);
      • Modify the above line of code to change the yearly replacement queue order. As is, the queue order is bad-backlog-marginal (assets needing replacement this year are replaced first, followed by backlog...)
  • Sunburst
    • sunburst_metric: arc angle is proportional to the actual amount invested in each asset at any given year (previously was the amount of investment needed to bring each asset back into good repair).

Current To-dos

Directly read in historical data from the data schema in functions/data_loader.js. Historical data currently generated; rewrite generating function to add in past replacement years for each asset.

Cambridge Systematics's Projects

activitysim icon activitysim

An Open Platform for Activity-Based Travel Modeling

ansible-lib icon ansible-lib

Library like task files to be included from third party ansible roles

ansible-util icon ansible-util

Role for base configuration of Ansible roles developed at Silpion.

barefoot icon barefoot

Java map matching library for integrating the map into software and services with state-of-the-art online and offline map matching that can be used stand-alone and in the cloud.

devise_security_extension icon devise_security_extension

An enterprise security extension for devise, trying to meet industrial standard security demands for web applications.

emat icon emat

Exploratory Modeling and Analysis Tool

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.