Javascript Library for Building a Timeline of Events

While researching an article for JavaScript based graphing solutions, I happened upon the project page for SIMILE Widgets JavaScript libraries.  SIMILE Widgets has a a number of other interesting libraries (see ‘Runway’, a JavaScript based clone of iTunes ‘Covershow’) but the project that captured my attention was the ”Timeline” library.  As the name suggests, Timeline allows the developer to create an interactive timeline, thus ‘Visualizing Temporal Data’.  Timeline creates an easily accessible, engaging and interactive visualization that immediately had me immersed.

Check out the demo Timeline of the JFK assasination:

I searched high and low and a was unable to find a competing solution that comes close to SIMILE Widgets’ Timeline.  To my knowledge nothing comes close.  Additionally, a independently developed supporting library aptly named TimeMap uses Google, OpenLayers, and Bing in coordination with the SIMILE Timeline library to load one or more datasets in JSON, KML, or GeoRSS onto both a map and a timeline simultaneously.  You can check out the project Timeline library here and the Timemap project on google code here.

 

 

 

Posted in Code Libraries | Leave a comment

Four Javascript Libraries for Dynamic Charts and Interactive Data 2011

A number of maturing JavaScript libraries now allow web developers and designers to create beautiful new visualizations quickly and easily.  With the approach of an HTML5 internet, we can expect these types of tools and their level of interactivity to continue to improve.  Today we are highlighting a few of the best JavaScript libraries available for quickly creating a nice balance between aesthetics and accessible info.

D3.js

The makers of D3.js (previously Protovis) have created an elegant library enabling the developer to bind data to a Document Object Model, and then apply data-driven transformations.  This type of functionality that will become native with HTML5 and the Canvas object and D3.js is poised for the transition with this powerful set of libraries.

D3 Choropleth:

D3 TreeMap:

JavaScript InfoVis Toolkit

Equally compelling and comparible to D3.js is the InfoVis Toolkit.  Created by Nicolas Garcia Belmonte, InfoVis is standards based, fast, beautiful and interactive.  Similarly to D3.js, InfoVis allows you to create a canvas and bind data as objects while providing a powerful library for interactivity.

InfoVis Pie Chart:

InfoVis SunBurst:

InfoVis TreeMap:

HighCharts

Highcharts is a charting library written in pure JavaScript.  Straightforward and intuitive, they currently support line, spline, area, areaspline, column, bar, pie and scatter chart types.  They are perfect for traditional chart types that seamlessly integrating interactive and real time features.  HighCharts has a sister library especially for stock market data called HighStock.

Ajax loaded data with clickable points. If you are familiar with Google Analytics Charts, you will recognize this one. 

HighCharts Pie Chart:

HighCharts Combo Chart:

Dygraphs

dygraphs is an open source JavaScript library that produces produces interactive, zoomable charts of time series. It is designed to display dense data sets and enable users to explore and interpret them.

Comparing two datasets:

U2MRWT3FRYX6

Posted in Code Libraries | Tagged , | Leave a comment

Online Tools to Compare Screen Fonts and CSS

In-browser online tools can be a great way to experiment with typography as you develop your website designs. The most useful allow you to compare different typefaces side-by-side.  Two such tools, Typetester and FontTester, allow you compare three fonts simultaneously.   Both sites allow you to change the color, leading, tracking, size, the latter of which has slightly more options for tweaking the CSS styles of your font.  Both prove to be indispensable tools when brainstorming over which fonts and styles to use for different elements or for compiling font stacks.

TypeTester

 

FontTester

A complimentary site that will help you with your style type-storming is TypeChart.  Browse through existing css styles and fonts to get the creative juices flowing, then copy your selection into Typetester and FontTester to refine your styles and make them your own.

TypeChart

 

 

 

http://www.typechart.com/Type
Posted in Online Tools | Tagged | Leave a comment

Welcome

Posted in Uncategorized | Leave a comment