Raphaël - Vector Graphics using JavaScript

Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.

Using the library you can easily create Gauges or any other JavaScript Visualization you like.

If you are a developer you will be happy to know its under MIT license and basically Free!

Sample using Raphael:

Visualize Tweets Using Raphael

More Info about Raphaël 

The State of JavaScript

Brendan Eich reviews the history of JavaScript, then introduces and demonstrates some of the new features coming in ES6

Click here to watch!

Kartograph - Interactive JS map without Google Maps.

Google Maps is amazing service but lately the guys from Google decided to charge us for the free mapping stuff we were dependent on of the last few years.

Many companies stated to search for alternatives for Google and found some useful services like Open Street Map etc.

Kartograph is a new Java Script framework for building interactive map applications without Google Maps or any other mapping service. It was created with the needs of designers and data journalists in mind.

Kartograph.js is a JavaScript library for rendering SVG maps. It is built on top of jQuery and Raphaël.

More Info:
http://kartograph.org/

JustGage - Gauge Library in JavaScript

The JS world is booming with new stuff and almost every day I can see more and more visualization libraries, one of them is JustGage which allows you to create half circular gauges in no time.

JustGage  is a simple yet beautiful Gauge visualization that allows you create elements using jacascript and Raphael.js

It is based on Raphaël library for vector drawing, so it’s completely resolution independent and self-adjusting.

Using the library is simple, just load the libraries: 

• <script src="raphael.2.1.0.min.js"></script>
• <script src="justgage1.0.min.js"></script>

Create your Gauge div:

<div id="gauge" class="200x160px"></div>

Run some simple JS code to apply on the Div:

• 
  
• var g = new JustGage({
• id: "gauge",
• value: 67,
• min: 0,
• max: 100,
• title: "Visitors"
• });

I hope they will extent there library with some more cool Gauges soon!

More info & Download:
http://www.justgage.com/ 

Libaries for JavaScript Visualization Development

Another good list of JavaScript Visualization components:

• Arbor.js – (MIT license) Force-directed graph layout
• ArcGIS JavaScript API - High performance mapping/GIS applications
• amCharts – Charts, charts, charts
• Chroma.js – (GPL) Color conversions
• Cubism.js – (Apache) Time-series visualization, based on D3.js
• D3.js – (BSD) General visualization library
• Dance.js – (MIT) Visualization framework based on Backbone, Data.js & D3.js
• Data.js – (MIT) Not a visualization framework per se, but rather a data representation framework to facilitate visualization
• Envision.js – (MIT) Time series visualizations
• Google Chart Tools – (Google/Free) The name says it all – Charts
• Google Maps API – Google maps
• HightCharts – (Creative Commons & Commercial) Rich interactive charts
• InfoVis Toolkit – (MIT) Data visualization toolkit
• Kartograph – (AGPL) Render existing or custom Python-generated maps
• Kendo UI DataViz – (Commercial) Rich Cross-device data visualization
• Leaflet - (BSD) Lightweight map drawing libary
• MapQuest JavaScript API – MapQuest maps generation
• Miso Dataset – (MIT, GPL2) Libary for data transformation and management
• Modest Maps - (BSD) Tile-based maps
• Paper.js – (MIT) Vector graphics scripting
• Polymaps – (BSD) Tile-based maps
• Processing.js – (MIT) Drawing & data visualization library
• Protovis – (BSD) No longer under development – they recommend switching to D3.js
• Rafael – (MIT) Simplified vector graphics
• RGraph – (Free for non-commercial) Charts and custom widgets
• Rickshaw – (MIT) Interactive time series, based on D3.js
• Sencha Touch Charts - (Commercial) Rich interactive mobile-optimized charts
• Sigma.js – (MIT) Interactive & static graphs
• Tangle – (MIT) Build data reactive documents
• Timeline – (GPL) Timelines

Source:

http://blattchat.com/2012/05/14/javascript-actionscript-visualization-libaries-toolkits/

10 Awesome Data Visualization Tools for the Web

Just wanted to point you to a cool post about JavaScript visualizations, some of the items are already covered in my older posts.


Check it out here

Have a Visual day!

Ripple - JS Mobile Simulator!

Creating your amazing JS application is not enough , now it's time to get it ready for the real world - Mobile.

Debugging mobile apps can be a pain in the neck, you have multiple platforms, multiple versions etc, for example developing for iOS requires you to own a Mac, android development has many packages to download and not so easy.

Wondering the web you probably find Sencha and jQueryMobile as the leading JS web developments.I started with  Sencha, downloaded the editor but learning curve was to long for my needs. (More on Sencha in a future post)

I was searching for alternatives and found a nice web tool called Tiggzi, it was simple and intuitive but not powerful for most of my needs. In any case all IDEs had major issues trying to debug them.

Looking for the best bread solution I found Ripple (which was bought by RIM). Ripple is a Chrome plugin allows you to set and test any mobile configuration: GPS, Acceleration, Contacts etc., You can choose between platforms (IOS, Android, HTC and more), the actual device (iPhone, iPad) and even its orientation.

Basically you can enable Ripple for any website, below you can see this blog over iPhone.

Installation is quite easy and took me less then a minute, once you up and running you can set every website into Mobile environment with in a single click!

Ripple mobile addin wraps the website you currently visit and allows you to set the platform, location on the map, acceleration, dev platform (PhoneGap, MobileWeb) And even contact list so you can test real world scenarios.

Debugging is easy thanks to Chrome ( Ctrl+Shift+J ) great debugger!

Note: you should disable any popup blocker before trying to run anything!!!

Things I would add to Ripple:

• Ability to test camera and photos library
• Add images and details to dummy contacts
• Fix annoying bug where page is not loading due to ripple.js cannot be found

You can get Ripple here:
http://ripple.tinyhippos.com/

Happy testing!

Leaflet - JavaScript Library for Interactive Maps

Recently I started playing with some JS mapping capabilities, the first step was to start with Google Maps.

Well Google has many resources and been around forever, maps are loading super fast and it is free. Until recently... Well Google decided its time to earn some money and added some limitation to the maps usage.

So Google maps is out of the question for many new start-ups which generates some nice traffic but has no revenue.

Well I was on a quest to look for a different solution plus I needed mobile capabilities.

My search was done when I found Leaflet, a light JS library that takes advantage of Open Street Map and Cloudmade and makes the magic with very few lines on code.

I managed to create my mobile mapping experience within less then one hour and the best thing is that it can help you  generate revenue of you want to add ads on top of your maps.

Have a legendary week!

Cubism.js - Visualizing time series

A Great new way to visualize data is Cubism, its a library using D3 for visualizing time series.

Its very useful for real time analysis and might be used on LCD screens no helpdesks, or monitor rooms where every second counts.

More details can be found here:

http://square.github.com/cubism/

JavaScript PSD Layers & Preview

Web designers use Photoshop for most of Web sites UI elements. this code allows you to use java script to load PSD file, preview it and see its layers.

http://meltingice.github.com/psd.js/layers.html

My Test:

Possible use cases:

1. Designer can load PSD files to a webserver which loads the data automatically into the website.
2. PSD Editor

Happy Scripting.