Group 37
Overview Requirements Development Prototype Testing Logs Meta
Overview:
Overview
Our Project
Version Control
Requirements:
Requirements
MoSCoW
Use Cases
Development:
Background Research
Technical Research
Architecture Research
Developing Solution
User Interface
Prototype:
Design Guide
Form Renderer
Dashboard
Visual Report
Testing
Logs:
Design Guide
Form Renderer
Dashboard
Visual Report
Meta:
Project Management
Bi-weekly Reports
Plans for Term 2
Updated: 21/11/2016

Technical Research: D3.js

D3.js was written by Mike Bostock while working at Stanford Visualisation Group. It stands for Data Driven Documents. Essentially, D3 allows for easy integration of dynamic and interactive data visualisation. It achieves this by attaching data to Document Object Model (DOM) elements, then CSS3, HTML and or SVG can be used to showcase the data. Interactivity can be implemented through D3.js data-driven transformations and transitions.[1]


Key Features

  • Binds data to Document Object Model
  • Allows CSS3, HTML and or SVG to showcase data
  • Interactivity through D3 data-driven transformations
  • Dynamic data visualisation
  • Reusable JavaScript code allows for custom functions


    • Usage

    Our client and professional advisors recommended D3 to us for creating the front end data visualisation. Other teams on the Peach project will generate the requested data on the backend and feed these data to the front end where we will use D3 to represent parts of the data. These data will generally include patient information and medical history where diagrams and graphs can be greatly beneficial for doctors to make quick and accurate diagnostics.


    Advantages

  • Open Source
  • Many powerful features which are missing from its competitors. For example:
  • Transformations and transitions
  • “Enter and Exit”
  • Similar syntax to jQuery[2]
  • Used by trustworthy sites such as NYTimes and Weather.com


    • Disadvantages

  • Does not support legacy web browsers such as Internet Explorer 8 (IE8)
  • May require additional plugins such as “aight plugin” for manual support


    • Alternatives

    Below are some popular alternative javascript charting libraries. Some of which will also be explored in our research.

  • Google Charts
  • ChartJS
  • N3-charts


    • References

    [1] Bostock, M. (2016). D3.js - Data-Driven Documents. [online] D3js.org. Available at: https://d3js.org/ [Accessed 21 Nov. 2016].
    [2] SitePoint. (2016). The 15 Best JavaScript Charting Libraries. [online] Available at: https://www.sitepoint.com/15-best-javascript-charting libraries/ [Accessed 21 Nov. 2016].