1. www.eia.gov 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

2. 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

3. 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

4. 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!

5. Open-source libraries were 61% of code base: 5 Mark Elbert MSIS2012 NameDescriptionLicenseVersionSizeFirst publishedDependencies jQueryhelper library; simplifies JavaScript coding open-sourcev1.7.192kBJan 2006- jQuery UIuser interface controlopen-sourcev1.8.7202kBSep 2007jQuery Highstockscharting librarycommercial ($80)v1.1.4117kBOct 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-sourcev3.0.63.5kBApr 2007jQuery Loadmaskcreates wait screen effectsopen-sourcev0.44.1kBJun 2009jQuery qTipshelp tipsopen-sourcev1.022kBApr 2010jQuery Curlloads library as neededopen-sourcev0.6.114.2kBJan 2011- Classyobjectoriented extension for JavaScriptopen-sourcev1.44.99kBApr 2010jQuery Crossroadspattern matching frameworkopen-sourcev0.7.15kBApr 2011- Hasherurl hash managementopen-sourcev1.12.8kBAug 2011- Mustachelogic-less template systemopen-sourcev0.514kBOct 2009- SimpleModalcreates modal panel (greys rest of screen) open-sourcev1.4.223kBOct 2007jQuery JSON2provides JSON support for obsolete browsers open-sourcev1.05kBNov 2010- PureMVCmodel-view-controller frameworkopen-sourcev1.17kBNov 2010- js-Signalsevent frameworkopen-sourcev0.7.43.1kBNov 2010- Kizzycross-browser localStorage APIopen-sourcev1.04.6kBFeb 2011- 1. Many of these libraries did not exist even 2 years ago 2. jQuery is the standard help library

6. Electricity Data Browser demo: 6 Mark Elbert MSIS2012 http://www.eia.gov/beta/enerdat/#/topic/0?agg=2,0,1&fuel=vvg&geo=g&sec=g&charted=2-3-5-7-8

7. 7 Mark Elbert MSIS2012

8. 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

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

10. URLs Mark Elbert MSIS2012 10 U.S. Energy Information Administration home page | www.eia.govwww.eia.gov Beta test pages | www.eia.gov/betawww.eia.gov/beta Autochart | www.eia.gov/beta/autochart_exampleswww.eia.gov/beta/autochart_examples For more information and code, contact : Mark Elbert mark.elbert@eia.gov