U.S. Energy Information Administration Independent Statistics & Analysis Creating Highly Interactive Websites for the Dissemination of Statistics MSIS2012 Mark Elbert, U.S. Energy Information Administration

Why this paper? 2 Mark Elbert MSIS2012 Culmination of an 18-month paradigm shift Started with simple jQuery slide panels Added interactive charting with Highcharts Web server coding web browser coding Jan 2012: tasked to create a new dissemination platform for EIA’s electricity statistics in 10 weeks! The results of this project surprised me and I want to share what we learned

Backing up a step… 3 Mark Elbert MSIS2012 Google launched the second browser war and Chrome set the pace Everyone had to keep up (IE9 is 10x faster than IE8) Open Source code libraries sprouted like mushrooms in this new computing environment, allowing desired effects and functionality to be quickly to a project speed + standardization + open source = new Internet

EIA’s Electricity Data Browser 4 Mark Elbert MSIS2012 Programmed by two developers from conception to launch in 10 weeks: query 50,000 electricity aggregate time series with drill down to 70,000 electricity generation plant time series select monthly, quarterly, or annual views advanced grouping and filtering maps and user controlled charting innovative help system That’s a lot of functionality for a 10 week project!

Open-source libraries were 61% of code base: 5 Mark Elbert MSIS2012 NameDescriptionLicenseVersionSizeFirst publishedDependencies jQueryhelper library; simplifies JavaScript coding open-sourcev kBJan jQuery UIuser interface controlopen-sourcev kBSep 2007jQuery Highstockscharting librarycommercial ($80)v kBOct 2011jQuery jVector Mapmap infographics libopen-sourcev0.123kBFeb 2012jQuery USA map definition open-sourcev0.147kBFeb 2012jVector Map, jQuery SlickGridfast, scalable grid componentopen-sourcev2.012kBMar 2009jQuery, jQuery.event. drag JQuery Event Dragextends jQuery; used by Slickopen-sourcev2.05.1kBjQuery jQuery mousewheelsimplifies mousewheel programmingopen-sourcev kBApr 2007jQuery Loadmaskcreates wait screen effectsopen-sourcev0.44.1kBJun 2009jQuery qTipshelp tipsopen-sourcev1.022kBApr 2010jQuery Curlloads library as neededopen-sourcev kBJan Classyobjectoriented extension for JavaScriptopen-sourcev kBApr 2010jQuery Crossroadspattern matching frameworkopen-sourcev0.7.15kBApr Hasherurl hash managementopen-sourcev1.12.8kBAug Mustachelogic-less template systemopen-sourcev0.514kBOct SimpleModalcreates modal panel (greys rest of screen) open-sourcev kBOct 2007jQuery JSON2provides JSON support for obsolete browsers open-sourcev1.05kBNov PureMVCmodel-view-controller frameworkopen-sourcev1.17kBNov js-Signalsevent frameworkopen-sourcev kBNov Kizzycross-browser localStorage APIopen-sourcev1.04.6kBFeb Many of these libraries did not exist even 2 years ago 2. jQuery is the standard help library

Electricity Data Browser demo: 6 Mark Elbert MSIS2012

7 Mark Elbert MSIS2012

Pros and Cons of this dissemination paradigm Advantages Faster development cycles. Data layers can be republished as an Application Programming Interfaces (API) Solve problems; don’t build plumbing Third-party libraries are free or very low-cost Reduce publishing costs if large numbers of files and web products are replaced with fewer web applications Improve the findability of statistics by offering a single interface to browse, filter, and find information that would otherwise be spread out among multiple publications Create the highly interactive, rich user experiences web users are coming to expect Disadvantages Significantly higher developer skill sets Too many third-party libraries can make maintenance a challenge Third-party libraries without strong developer communities may be buggy or lack solid documentation. Versioning and updating libraries Cross-browser support 8 Mark Elbert MSIS2012

Getting started creating highly interactive websites 9 Mark Elbert MSIS2012 Start simple and build skills Master jQuery Pick an interactive charting library Share

URLs Mark Elbert MSIS U.S. Energy Information Administration home page | Beta test pages | Autochart | For more information and code, contact : Mark Elbert