Category Archives: enterprise

US Census Browser v2.0

I am happy to announce the US Census Browser version 2.0!  Back in December of 2011, I released the US Census Browser as an open source application intended to demonstrate principles for enterprise-class data visualization and applications developed with web standards.  This version has some fairly substantial changes – See the video below to check out features in the latest version:

Version 2.0 is currently available for:

Version 2.0 of the US Census Browser has some substantial changes, including:

  • Completely new & redesigned UI layer, using app-UI.  app-UI is an open source framework for application view-navigators that mimic native mobile applications.   Using the app-UI SplitViewNavigator, the US Census Browser now supports both landscape and portrait orientations.
  • Switched from Google Maps to Open Street Map using OpenLayers.  Users of the Census Browser maxed out my Google Maps account!  That is 25,000 map loads within a 24 hour period! WOW! I switched to the free Open Street Maps solution, which doesn’t have any usage/bandwidth limitations.  With this change I was also able to add interactive maps.
  • Updated to Twitter Bootstrap 2.0.  The app is now using new UI styles and components which are now available in Twitter Bootstrap version 2.0

The source code for the US Census Browser has also been updated on github: https://github.com/triceam/US-Census-Browser

To learn more about app-UI, check out my page here: http://www.tricedesigns.com/2012/04/24/introducing-app-ui/

Enjoy!

Introducing the US Census Browser Application

I’d like to take this opportunity to introduce you to a new project I’ve been working on to showcase enterprise-class data visualization in HTML-based applications.   The US Census Browser is an open source application for browsing data from the 2010 US Census.

The app is completely written using HTML and JavaScript, even for the charting/data visualization components. You can check it out in several application ecosystems today:

Apple iTunes: http://itunes.apple.com/us/app/census-browser/id483201717
Google Android: https://market.android.com/details?id=com.tricedesigns.CensusBrowser
BlackBerry App World: http://appworld.blackberry.com/webstore/content/69236?lang=en
Amazon App Store: http://www.amazon.com/Andrew-Trice-US-Census-Browser/dp/B006JDATOY/ref=sr_1_1?ie=UTF8&s=mobile-apps&qid=1323874245&sr=1-1 (this includes support for Kindle Fire)

Support for additional platforms is planned for future development. Future targets include BlackBerry Playbook as well as Android 2.x devices, including the Amazon Kindle Fire and Barnes & Noble Nook Color – Android 2.x does not support SVG graphics in-browser, so I am working on some alternative features.

Update: Kindle Fire and Playbook have been approved, and are now supported. See links above.

You can also view the US Census Browser application in your desktop or mobile browser at: http://tricedesigns.com/census/

Please keep in mind that this application was designed for mobile devices.  Internet Explorer in particular does not work well with the Census Browser – use at your own risk.   The browser-based application has been tested and works properly in the latest versions of Chrome, Safari, Firefox, and Opera.   The US Census Browser application also does not work in Android 2.x and below, due to the fact that these versions of Android do not support SVG graphics in the mobile browser.

Full application source code for the HTML/JS interface and ColdFusion backend system are available at https://github.com/triceam/US-Census-Browser under the terms of the “Modified BSD License”. Be sure to review the README if you want to get this running on your own.

APPLICATION OVERVIEW
The application is essentially a single-page web site, which asynchronously loads data from the backend upon request, and displays that data to the user. The main application file is index.html, which loads the UI and appropriate client-side scripts. The main presentation logic is applied via CSS stylesheets, and the application control is handled by the ApplicationController class, inside of application.js. The ApplicationController class handles state changes within the application and updates the UI accordingly. The main data visualization and data formatting logic is all contained within the censusVisualizer class, which the ApplicationController class uses to render content. All DOM manipulation, event handling, and AJAX requests are performed using jQuery.

The data visualization is implemented 100% client-side, using the Highcharts JavaScript library. Highcharts renders vector graphics client-side, based upon the data that is passed into it. Check out the examples at: http://www.highcharts.com/demo/ for a sample of what it is capable of.

The fluid scrolling and swiping between views is implemented using the iScroll JavaScript library. Note: I’m using iScroll-lite.js. This is a great resource for any HTML-mobile, or mobile-web applications.

PHONEGAP USAGE
The client-side runtime does not have any dependencies for access to device-specific functionality. However, PhoneGap is being used as an application container so that the application can be distributed through various mobile “app stores”.

SERVER-SIDE
The back-end of this application is written using ColdFusion. Yep, that’s right. I used CF. In fact, the server side is ridiculously simple. It is only a single ColdFusion Component (CFC), with three remotely exposed methods for accessing data, and relies upon CF’s built in functionality to serialize JSON. CF is incredibly powerful, and made this project very simple and quick to develop.

Feel free to check it out on github: https://github.com/triceam/US-Census-Browser
You can also check out more technical details at: http://www.tricedesigns.com/2010-census/

Visualizing Complex Enterprise Data in a Tablet World

My recent Developer Deep Dive webinar “Visualizing Complex Enterprise Data in a Tablet World” is now available on the Adobe Enterprise Developers Portal.   In this webinar, I walk through the fundamentals of a rich, enterprise-data driven mobile experience, powered by Flex, AIR, LCDS, & LCCS.

Take a look at this short clip to get a feel for what’s covered in this webinar…

(Mobile Maps powered by ESRI)

Now, go view the webinar in its entirety to check out how this experience was built:
http://enterprise-dev.adobe.com/edev/en/webinars/archive.html#mobile

Grab the source code here:
https://github.com/triceam/Enterprise-Tablet-Visualization