9

Summary

Using JavaScriptA language that can run in the browser to make websites interactive. classes to create customized bar charts based on the supplied dataset.

Overview

PurposeCreate JavaScriptA language that can run in the browser to make websites interactive. classes to generate graphs using given datasets.
Goals
TechnologyJavaScriptA language that can run in the browser to make websites interactive., JasmineA library used to automate unit testing of Javascript code.
ResourcesUdacity - JavaScriptA language that can run in the browser to make websites interactive. Testing, Developing Apps with Confidence (free course)

Implementation

  1. Create Dataset Directory

    The Datasets folder was created under the root folder (not the public folder) to hold the json file to be used supply data to the graphs in the Visualization and Dataset view pages.

    • Dataset/001_Hospital_Contact_Network - Holds the first publicly available dataset to be analyzed on the site.
    • Dataset/TestSample - Holds sample data used to illustrate graphs in the Visualization pages.

  2. Modify Database Objects

    • FACT_CONTENT - Add Script Text column to Content table.
    • CONTENT_UPSERT - Modify Content upsert procedure to handle the new Script column.
    • LKP_CONTENT_TYPE - Add Dataset and Visualization records to the Content Type table.

  3. Modify Content Model Class

    App/Models/Content.php - Modify Content model to include Script text.

  4. Modify Controller Classes

    • App/Core/Controller.php - Modify the core controller superclass to include a function that returns the content of a specified file in the Dataset folder. This function is to be called asynchronously via Javascript in order to retrieve the datasets used to generate graphs.
    • App/Controller/Editor.php - Modify the Content EditorDevelopment of the code to support the editing of the site's content via an Editor page. to handle editing the new Script column.
    • App/Controller/Dataset.php and App/Controller/Visualization.php - Create new controllers to manage the display of the subject area index and individual entries

  5. Create / Modify View Files

    • App/Views/Dataset and App/Views/Visualization - Add Dataset and Visualization pages.
    • App/Views/base.html - Add Dataset and Visualization links to the menu.
    • App/Views/Editor - Add Script textbox to Editor.

  6. Create Visualization Directory & Files

    Create the Visualization folder in the root directory.

  7. Create / Modify CSS Files

    • public/css/tbd-base.css - Modify CSS to handle new subject area layouts.
    • public/css/tbd-chart.css - Create new CSS file to apply formatting to SVG shape elements in charts.

Related Content