VizGrimoireJS

A framework for Metrics Visualization in Javascript

Transcript

1. VizGrimoireJS: A framework for Metrics Visualization in
   Javascript
   Alvaro del Castillo San F´
   elix
   acs@bitergia.com
   http://acsblog.es http://twitter.com/acstw
   Bitergia
   Medialab-Prado (Madrid, Spain), April 11th 2013
   Alvaro del Castillo (Bitergia) VizGrimoireJS: A framework for Metrics Visualization in JavascriptLGM 2013 1 / 16
   

   View Slide

2. c 2013 Bitergia
   Some rights reserved. This presentation is distributed under the
   “Attribution-ShareAlike 3.0” license, by Creative Commons, available at
   http://creativecommons.org/licenses/by-sa/3.0/
   Blog post about this presentation (including link to slides)
   http://blog.bitergia.com/
   Alvaro del Castillo (Bitergia) VizGrimoireJS: A framework for Metrics Visualization in JavascriptLGM 2013 2 / 16
   

   View Slide

3. A successful development model
   Free (open source) software
   has shown to be a great success
   ...but there is room for improvement
   ...and (a lot of) interest in improving
   Who is interested?
   Large & small free software communities
   ...including thousands of large & small companies,
   public administrations, foundations
   Alvaro del Castillo (Bitergia) VizGrimoireJS: A framework for Metrics Visualization in JavascriptLGM 2013 3 / 16
   

   View Slide

4. Improving free software development
   Why?
   Free software is more and more important for IT users,
   producers, integrators
   It is different, yet transparent
   and it can be improved
   Information about code, community, development
   can be retrieved, organized, analyzed
   Alvaro del Castillo (Bitergia) VizGrimoireJS: A framework for Metrics Visualization in JavascriptLGM 2013 4 / 16
   

   View Slide

5. Improving free software development
   You cannot improve what you cannot measure
   Bitergia’s proposal:
   Analytics-guided software
   development
   Get advantage of the availability of detailed information
   Facts, not opinions
   Software & specialized services needed
   Alvaro del Castillo (Bitergia) VizGrimoireJS: A framework for Metrics Visualization in JavascriptLGM 2013 5 / 16
   

   View Slide

6. OpenStack Grizzly Report
   Alvaro del Castillo (Bitergia) VizGrimoireJS: A framework for Metrics Visualization in JavascriptLGM 2013 6 / 16
   

   View Slide

7. Metrics Browser
   Alvaro del Castillo (Bitergia) VizGrimoireJS: A framework for Metrics Visualization in JavascriptLGM 2013 7 / 16
   

   View Slide

8. Metrics Dashboard
   Alvaro del Castillo (Bitergia) VizGrimoireJS: A framework for Metrics Visualization in JavascriptLGM 2013 8 / 16
   

   View Slide

9. Open Source Grimoire Platform
   Alvaro del Castillo (Bitergia) VizGrimoireJS: A framework for Metrics Visualization in JavascriptLGM 2013 9 / 16
   

   View Slide

10. The Metrics Grimoire approach
    Set of tools specialized in retrieving information from
    different kinds of repositories. Among them:
    CVSAnalY: source code management (CVS,
    Subversion, git, etc.)
    Bicho: issue tracking systems (Bugzilla, Jira,
    SourceForge, Allura, Launchpad, Google Code, Gerrit
    etc.)
    MLStats: mailing lists (mbox files, Mailman archives,
    etc.)
    Store all the information in SQL databases with similar
    structure
    http://metricsgrimoire.github.com
    https://github.com/MetricsGrimoire
    Alvaro del Castillo (Bitergia) VizGrimoireJS: A framework for Metrics Visualization in Javascript
    LGM 2013 10 / 16
    

    View Slide

11. VizGrimoire
    Set of tools specialized in visualizing metrics information
    VizGrimoireR: Metrics extraction from data gathered
    from projects
    VizGrimoireJS: Metrics viz using HTML5 technologies
    (Canvas and SVG mainly)
    http://vizgrimoire.bitergia.com
    https://github.com/VizGrimoire
    Alvaro del Castillo (Bitergia) VizGrimoireJS: A framework for Metrics Visualization in Javascript
    LGM 2013 11 / 16
    

    View Slide

12. VizGrimoireJS: Main Libraries
    Loader: Load all JSON files and build a information architecture
    Report, Dashboard: Parse HTML files and change Markup API with
    its implementation
    DataSource (ITS, MLS, SCM
    Viz, EnvisioReport: Flotr2, Envision viz libraries (Canvas and SVG)
    jQuery, Gridster, D3, envision: Supporting libraries
    Alvaro del Castillo (Bitergia) VizGrimoireJS: A framework for Metrics Visualization in Javascript
    LGM 2013 12 / 16
    

    View Slide

13. Using VizGrimoireJS
    Include vizgrimoire.min.js
    Build HTML pages and include the Markups needed to do the Viz
    
    
    
    
    
    
    
    
    
    data-metrics="commits" data-legend="false">
    Alvaro del Castillo (Bitergia) VizGrimoireJS: A framework for Metrics Visualization in Javascript
    LGM 2013 13 / 16
    

    View Slide

14. viz Challenges
    ¿Canvas or SVG? SVG reuses all HTML tech: CSS, DOM, DOM
    Events ...
    Loading and accessing the data. From JSON static to Dynamic REST
    Alvaro del Castillo (Bitergia) VizGrimoireJS: A framework for Metrics Visualization in Javascript
    LGM 2013 14 / 16
    

    View Slide

15. Bitergia: an spin-off
    Started operations in July 2012
    Builds on the experience of LibreSoft R&D group
    Offering professional products and services
    Focused on:
    Metrics about software development
    (including community metrics)
    Specialized support for development forges
    (including metrics for projects)
    http://bitergia.com
    Alvaro del Castillo (Bitergia) VizGrimoireJS: A framework for Metrics Visualization in Javascript
    LGM 2013 15 / 16
    

    View Slide

16. This is the end
    Comments? Questions?
    acs@bitergia.com
    Alvaro del Castillo (Bitergia) VizGrimoireJS: A framework for Metrics Visualization in Javascript
    LGM 2013 16 / 16
    

    View Slide