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
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
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
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
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
6. OpenStack Grizzly Report Alvaro del Castillo (Bitergia) VizGrimoireJS: A framework for Metrics Visualization in JavascriptLGM 2013 6 / 16
7. Metrics Browser Alvaro del Castillo (Bitergia) VizGrimoireJS: A framework for Metrics Visualization in JavascriptLGM 2013 7 / 16
8. Metrics Dashboard Alvaro del Castillo (Bitergia) VizGrimoireJS: A framework for Metrics Visualization in JavascriptLGM 2013 8 / 16
9. Open Source Grimoire Platform Alvaro del Castillo (Bitergia) VizGrimoireJS: A framework for Metrics Visualization in JavascriptLGM 2013 9 / 16
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
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
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
13. Using VizGrimoireJS Include vizgrimoire.min.js Build HTML pages and include the Markups needed to do the Viz <div style="float:left;"> <div id="scm-top"></div> <div id="its-top"></div> <div id="mls-top"></div> </div> <div style="float:left;"> <div id="scm-commits-flotr2"></div> <div id="scm-authors-flotr2"></div> </div> <div class="scm-flotr2-metrics-repo" data-metrics="commits" data-legend="false"></div> Alvaro del Castillo (Bitergia) VizGrimoireJS: A framework for Metrics Visualization in Javascript LGM 2013 13 / 16
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
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
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