How to Master Data Visualization

Strategy & Tools for Data Visualization

Data Visualization

Data visualization is the study of the visual representation of data, meaning “information which has been abstracted in some schematic form, including attributes or variables for the units of information”.  According to Friedman (2008) the “main goal of data visualization is to communicate information clearly and effectively through graphical means. It doesn’t mean that data visualization needs to look boring to be functional or extremely sophisticated to look beautiful.

Data Visualization Strategy

Edward Tufte @EdwardTufte delivered a great presentation about data visualization strategy for the star studded Tech@State event audience.   Tech@State ( @techATstate ) connects tech innovators and those interested in diplomacy and development to enable 21st century statecraft by improving education, health and welfare of the world’s population.   The Edward Tufte: Beautiful Evidence (Highlights) video is available here. Edward Tufte’s complete data visualization strategy presentation video is available here, his presentation begins at 14:24.

If your display isn’t worth 1000 words, to hell with it – @EdwardTufte

Data Visualization Tools & Services

Google Data Visualization Services

Google Data Visualization Service provides a variety of charts that are optimized to address your data visualization needs. These charts are based on pure HTML5/SVG technology (adopting VML for old IE versions), so no plugins are required.

Sencha ExtJS Data Visualization Tools

It has always been hard to draw things in web applications. HTML is really not cut out for creating charts and other richly interactive imagery, but Sencha ExtJS 4 supports data visualizations HTML applications. Typically this need has been met with Adobe Flash, but this gave Sencha two problems: most people like writing code in JavaScript, and Flash isn’t available on all devices. The ExtJS 4 solution to these problems is a pure-JavaScript drawing library that can create incredibly rich charting and graphics. It works everywhere – from IE6 to iOS – and will also be available as an add-on for Sencha Touch (mobile).

Highcharts Data Visualization Tools

Highcharts is a charting library written in pure JavaScript, offering intuitive, interactive charts to your web site or web application. Highcharts currently supports line, spline, area, areaspline, column, bar, pie and scatter chart types.  You can also you create stock or general timeline charts in pure JavaScript, including sophisticated navigation options like a small navigator series, preset date ranges, date picker, scrolling and panning with Highstock.

Current Data Visualization Twitter Game Board

Diversity fuels innovation. Sports fanatics have their fantasy football teams. This is my fantasy innovation team. This Data Visualization twitter game board represents people focused on sharing ideas about how to make data make sense.

[twitterusers @edwardtufte @NoelDickover @JohnFMoore @SuzKPH @techATstate @StateDept @lovisatalk @visualisingdata @noahi ]

How to Master the Mobile Market

Mobile Developer’s Guide to the Galaxy

The Ultimate Strategy & Development Guide to Mobile Markets

This beautiful and comprehensive guide created by the amazing people at “Enough Software” is a spectacular piece of work!  You will be astonished by how incredibly fast you can establish your presence in the mobile market with the simple steps explained in this PDF guide for all things mobile.

Mobile Developer's Guide to the Galaxy

Mastering the Mobile Market

Here are just a few things you will quickly learn in the “Mobile Developer’s Guide to the Galaxy”.

Mobile Developers Guide

  • Programming Android Apps
  • Programming bada Apps
  • Programming Native BlackBerry Apps
  • Programming Flash Apps
  • Programming iOS Apps
  • Programming J2ME / Java ME Apps
  • Programming MeeGo Apps
  • Programming Qt Apps

  • Programming Symbian Apps
  • Programming webOS Apps
  • Programming Windows Phone Apps
  • Programming Mobile Widgets
  • Programming With Cross-Platform Tools
  • Creating Mobile Websites
  • Implementing Rich Media
  • Implementing Location-Based Services
  • Implementing Near Field Communication (NFC)
  • Testing Your Application
  • Monetization
  • Appstores

Thanks to the creative crew at Enough Software for creating the most beautiful and comprehensive guide in the galaxy for mobile development! Thanks to @rickmans, @roonaan, and @peterpeerdeman for sharing this on Twitter.

Mobile Market Strategy

A mobile market strategy should be a foundational part of Social Business Models.  I hope this encourages others to share their ideas about Social Business Strategy and their thoughts about Mobile Markets.

 

 

 

 

 

How to Install Zend Framework

What are Frameworks?

A Framework is a collection of reusable items or steps in a repeatable process.  A software application framework is a well-defined Application programming interface (API) that serves as abstraction layers that separate business logic from application logic.  Application frameworks usually leverage object-oriented programming techniques to extend the current purpose to serve custom needs.  Combining server-side frameworks with client-side frameworks improves development time and reduces cost while supporting the concepts of Rapid Application Development (RAD).  A popular framework architectural pattern is Model-View-Controller (MVC).  The MVC architectural pattern increases application flexibility and reduces the complexity in architectural design by decoupling models and views.

What is Zend Framework?

The Zend Framework extends the art & spirit of PHP, Zend Framework is based on simplicity, object-oriented best practices, corporate friendly licensing, and a rigorously tested agile codebase. Zend Framework is focused on building more secure, reliable, and modern Web 2.0 applications & web services, and consuming widely available APIs from leading vendors like Google, Amazon, Yahoo!, Flickr, as well as API providers and cataloguers like StrikeIron and ProgrammableWeb.

Installing Zend Framework

Connect to your server with a command line tool like PuTTY, Apple Mac users can simply use a Terminal window.  Navigate to a directory that is NOT the Document Root or any directory in the web server’s “include” path.  The Zend Framework installation described here will allow the user to change the version of Zend Framework at will by using a symbolic link for the Zend installation files.  This method will allow developers to change versions “on-the-fly” without the need for restarting web servers.  Learn how to setup a web server at “How to Setup a Virtual Web Server in 10 Minutes“.

Install Zend Framework with Wget

# 1. ) Get file package from site.
wget http://framework.zend.com/releases/ZendFramework-1.11.4/ZendFramework-1.11.4.tar.gz
# 2. ) Decompress the file.
tar -xzvf ZendFramework-1.11.4.tar.gz
# 3. ) Delete the compressed file.
rm ZendFramework-1.11.4.tar.gz
# 4. ) Rename installation directory to "ZendFramework"
mv ZendFramework-1.11.4 ZendFramework

Install Zend Framework with Subversion

# 1. ) Get file package from site.
svn checkout http://framework.zend.com/svn/framework/standard/branches/release-1.11/
# 2. ) Rename installation directory to "ZendFramework"
mv release-1.11 ZendFramework

Zend Framework Web Server Integration

Use the wGet or Subversion method above to get the package files, then integrate the framework into the existing web server with the following steps.

# 1. ) Create a symbolic link named "Zend" to the "ZendFramework" directory.
# This step will allow changing versions of Zend Framework without the need for restarting the web server.
ln -s ZendFramework Zend
# 2. ) Add the Zend library to your PHP include path
cd /{full}/{path}/{to php.ini folder}
vi php.ini
# Search for the "include_path" directive and update it to include full path to "Zend/library"
# include_path = ".:/php/includes:/{replace this with complete path to parent of Zend symbolic link}/Zend/library"
# Save file and quit editor
:wq
# 3. ) Add Zend Tool to the command line by creating an alias in bash_profile
vi ~/.bash_profile
alias zf=/{replace this with complete path to parent of Zend symbolic link}/Zend/bin/zf.sh
# Save file and quit editor
:wq
#Exit and completely close command window
#Open command window and start a new session
# 4. ) Display zend version by entering this at the prompt
#This should return Zend Framework Version: 1.11.4
zf show version
# 5. ) Create a Zend Project
#Navigate to parent directory of Document Root
zf create project quickstart
# 6. ) Automatically write code using Zend Tool
# The following commands will add basic actions to Index
zf create action add index
zf create action edit index
zf create action delete index
# 7. ) Move the project’s “pubic” folder into  Document Root of Web Server as “quickstart”
# Note: Replace "public_html" with the real name of document root folder
mv quickstart/public public_html/quickstart
#Navigate into “public_html/quickstart”
cd public_html/quickstart
# 8. ) Update "APPLICATION_PATH" value in index.php
# This should point to "quickstart/application" in parent of document root.
vi index.php
// Define path to application directory
defined('APPLICATION_PATH') || define('APPLICATION_PATH', realpath(dirname(__FILE__) . '/../../quickstart/application'));
# Save file and quit editor
:wq
#Open a web browser and navigate to http://{replace this with host name}/quickstart

Welcome to the Zend Framework

Open a web browser and navigate to “http://{replace this with real host name}/quickstart” to see the “Welcome to the Zend Framework” message.

Open a web browser and navigate to “http://{replace this with real host name}/quickstart/index/add” to see a simple message from the code that was automatically written from using the Zend Tool in the previous steps.

Additional tips and information is available from Zend’s Quick Start Guide.  Software developers can also use Eclipse for application development with Eclipse plug-ins supporting this framework or Zend Studio.  Adobe Dreamweaver users can support Zend in their IDE as outlined in this article “Using Adobe Dreamweaver to color code modules, zend templates, & other file types“.

Software Integration Summary

  • Improved Security by storing sensitive information such as database user name and password in configuration files outside of document root.
  • Provided Version Control by using a symbolic link to software package.  Software developers not using Subversion can change the version of the software by downloading the required version into a new directory and update the Zend symbolic link to point to the new directory.  Software developers using Subversion can manage the software with simple Subversion  Commands and Scripts.
  • Automatic Code Generation by configuring and using Zend Tool to automatically generate code.
  • Integrated by integrating this software into an existing web server environment, developers can leverage existing IT investments.  This server-side framework can also be integrated with a client-side framework to support AJAX and Web 2.0 Technologies across multiple devices.  Here are 3 AJAX Frameworks that can support Custom Dashboards on Apple iPads.

3 AJAX Frameworks That Can Support Custom Dashboards on Apple iPads

AJAX Portal Frameworks For Enterprise 2.0 Dashboards

The maturing Enterprise 2.0 landscape is leading us to increasing our focus on User Experience for improving Enterprise 2.0 Adoption.  The need for Enterprise 2.0 Solutions to support multiple devices is growing as move into the future of the “Dispersed Workforce“.  The use of Adobe Flash was a quick way to create a consistent displays across web browsers during the “Browser Wars”, but focusing on Web Standards will allow us to securely share information like never before.  I believe Adobe Flash still has a place in the market, but it has less to do with web standards and dashboards.   Asynchronous JavaScript and XML (AJAX) along with HTML 5 provides a framework for Web 2.0 in the Enterprise and the future of the Internet.  There are plenty of AJAX Frameworks to help you create Rich Internet Applications (RIAs).  Here are a few to help you create customizable dashboards that work across multiple web browsers and in devices like the Apple iPad.

Yahoo Developer Network: AJAX Portal Layout with Widgets

The YUI Library is a set of utilities and controls, written with JavaScript and CSS, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX. YUI is available under a BSD license and is free for all uses.

YUI is proven, scalable, fast, and robust. Built by frontend engineers at Yahoo! and contributors from around the world, it’s an industrial-strength JavaScript library for professionals who love JavaScript.

You can play with the YUI AJAX Portal demo here.  You can review the simple code here.

I like this one, because it scales, supports the concept of the Enterprise App Store, and is truly Open Source.

Picture 20

EXT JS: AJAX Portal Layout with Widgets

Ext JS is a cross-browser JavaScript library for building rich internet applications. Build rich, sustainable web applications faster than ever. It includes:

  • High performance, customizable UI widgets
  • Well designed and extensible Component model
  • An intuitive, easy to use API
  • Commercial and Open Source licenses available

Ext JS is a clean, object oriented framework with development tools, but you will want to check their license before commercial use.

You can play with the Ext JS AJAX Portal demo here.

Picture 22

JPolite: AJAX Portal Layout with Widgets

jPolite (jQuery POrtal Lite) is a pure front-end portal framework based on jQuery & BlueTrip CSS, with a handful of jQuery plugins integrated.
It provides a compact yet powerful foundation for custom AJAX web applications with Netvibes-like user experiences.

You can play with the JPolite AJAX Portal demo here.

ss_jpolite

Happy Fav Five Friday!

Fav Five Places

ZK – Direct RIA

ZK is an open source Web development framework that enables Web applications to have both rich user experiences and low development cost as you did for years in desktop applications. ZK includes an Ajax-based event-driven engine, rich sets of XUL and XHTML components, and a markup language.

Echo Web Framework

Echo is an open-source framework for developing rich web applications. From the developer’s perspective, Echo behaves as a user interface toolkit–like Swing or Eclipse SWT. AJAX technology is employed to deliver a user experience to web clients that approaches that of desktop-based applications.

Drag/Drop Portal Interface with Scriptaculous and Drupal

How to create a drag/drop portal in a few lines of JavaScript code, using the excellent Prototype and Scriptaculous JavaScript libraries.  See the demo here.

qooxdoo AJAX Framework for RIA

qooxdoo (pronounced [’ku:ksdu:]) is a comprehensive and innovative framework for creating desktop-style web applications, often called rich internet applications (RIAs). Leveraging object-oriented JavaScript allows developers to build impressive cross-browser applications.

HTML5: Right Here, Right Now Video

In one of the outstanding sessions of YUIConf 2010, author and standards expert Tantek Çelik ( @t ), formerly of Technorati, discusses the current state of HTML5 specifications and their readiness for use in shipping web applications. (Tantek also joined a special YUIConf panel discussion on the future of frontend engineering.)

Fav Five Faces

Who is on your “Fantasy Innovation Team” this week?

Here are amazing people that have connected me to new friends and new ideas this week. You might be familiar with “Fantasy Football Teams” , well this is my “Fantasy Innovation Team” this week. I recommend following these smart, creative people on Twitter.

t-twitter barcamp bicycler coder css designer evolve gtd hacker html5 independent microformats mozilla openweb optimist pescatarian rock-climber scientist skeptic yoga ux http://twitter.com/t
lovisatalk-twitter Public Diplomacy, Mobile, Gov 2.0, Global Citizenship, Privacy, Use Policies, International Development, Social Media, Virtual Worlds, & Foodie http://twitter.com/lovisatalk
ricardolucas-twitter Formación con simulaciones de empresa y juegos serios (serious games). Marketing, Mundos Virtuales, Redes y Medios Sociales, Web 2.0, IT, Innovación http://twitter.com/ricardolucas
CharityIdeas-twitter Positively passionate 4: #charity, social media, #careers, interesting people, China, new ideas. Eternal Optimist! *good + tech = great* :) #monsterww http://twitter.com/CharityIdeas
marccusters-twitter About internet, social media & online Marketing (websites, portals, seo, ezines, mobile, analytics, strategy) http://twitter.com/marccusters