Giter Site home page Giter Site 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

opentripplanner icon opentripplanner

An open source multi-modal trip planner. See README of master branch for directory of what's here.

otp-odrunner icon otp-odrunner

A hacked version of OTP to run O/D pairs and return a basic set of metrics, a cheap version of "Analyst".

otp-react-redux icon otp-react-redux

A library for writing modern OpenTripPlanner-compatible multimodal journey planning applications using React and Redux.

protobuf icon protobuf

Protocol Buffers - Google's data interchange format

protobuf-java-format icon protobuf-java-format

Provide serialization and de-serialization of different formats based on Google’s protobuf Message. Enables overriding the default (byte array) output to text based formats such as XML, JSON and HTML.

rails_admin icon rails_admin

RailsAdmin is a Rails engine that provides an easy-to-use interface for managing your data

ransack icon ransack

Object-based searching. With maintenance by @radar and @jonatack!

reporting icon reporting

A basic and generic database querying and exporting engine.

simple_form icon simple_form

Forms made easy for Rails! It's tied to a simple DSL, with no opinion on markup.

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.