0.0.30 • Public • Published


    Build Status Code Climate Coverage Status Join the chat at API Doc

    clinical-timeline builds upon the popular d3-timeline library, which displays a collection of timepoints in JSON format as a timeline. It focusses on visualization of clinical data on a timeline and extends the JSON format and the API with some new features and various plugins.

    With the correct configuration one can instantiate a timeline as follows:


    The index.html showcases clinical-timeline's features in an exhuastive way.


    Building the javascript files in clinical-timeline is handled by a Makefile. Makefiles are primarily used for building software on unix, but they are also great task runners. Executing the command make build in the root directory of clinical-timeline generates the distributable version of the timeline clinical-timeline.min.js in the dist/ directory post concatination and minification. Also the command make clean can be used to clean the dist/ directory. JSDoc syntax should be strictly followed for documentation as it is automatically build by doclets.


    Note : Kindly browse over HTTP instead of HTTPS for the rawgit versions.


    Documentation for the library can be found here


    clinical-timeline is being actively developed and any kind of contribution to the repository is highly encouraged. For detailed instructions on contributing, one can use the Contributing Guide.

    Checks before sending a PR:

    • Single commit and No merge commits. Make commits in logical/cohesive units.
    • Make sure your commit messages end with a Signed-off-by string (this line can be automatically added by git if you run the git-commit command with the -s option).
    • Please add a before/after screenshot or gif here with e.g. GifGrabber if there is a new visual feature.
    • Run all tests to assure nothing else was accidentally broken. This is done by running: npm test.
    • Make sure you have added the necessary tests and documentation for your changes.

    clinical-timeline uses code-climate to maintain code quality and coveralls for code-coverage. Please ensure that the repo GPA and code-coverage doesn't falls if not increase post the new commit. Adding new unit tests is most welcomed.





    1. Run make clean build
    2. Copy the repo into frontend/node_modules
    3. Start up the frontend

    Testing in timeline repo

    • Make sure timeline-example.json looks right
    • Make sure you can zoom, trim

    Testing in actual frontend

    Link: http://localhost:3000/patient?studyId=lgg_ucsf_2014&caseId=P17

    • Single click zoom
      • Should zoom in ~ 50%
      • Should not break if you click before the first tick mark
      • Should not break if you click after the last tick mark
      • Should not break if select a trim
    • Click and drag zoom
      • Should show ~ full region you selected
      • Should not break if you click before the first tick mark
      • Should not break if you click after the last tick mark
      • Should have reasonable units
      • Should not break if you select a region that includes a trim
      • Should zoom in more if you select a smaller region
    • General zooming
      • Points and ticks are in the right place (verify by looking at start date)
      • Should not break if you zoom in, zoom out, zoom in
    • Zooming + trimming


    npm i clinical-timeline

    DownloadsWeekly Downloads






    Unpacked Size

    1.02 MB

    Total Files


    Last publish


    • cbioportal