Java Script Visualization

JavaScript Browser Diagramming Component

2013-05-25T22:10:00.002-07:00

mxGraphs

Details:

Visualization is the process of creating a useful visual representation of a graph. The scope of visualization functionality is one of mxGraphs' main strength. mxGraph supports a wide range of features to enable the display of cells to only be limited by the skill of the developer and the platform functionality available. Vertices may be shapes, images, vector drawing, animations, virtually any graphical operations available in browsers. You can also use HTML mark-up in both vertices and edges.

Live Samples:

Example applications for a graph visualization library include: process diagrams, workflow and BPM visualization, flowcharts, traffic or water flow, database and WWW visualization, networks and telecommunications displays, mapping applications and GIS, UML diagrams, electronic circuits, VLSI, CAD, financial and social networks, data mining, biochemistry, ecological cycles, entity and cause-effect relationships and organisational charts.

The JavaScript client of mxGraph may be licensed in two ways:

Under a standard commercial license, the pricing on the web site applies to these commercial licenses.
Under a reasonable use hosted model. This requires a key to access the hosted version, available in the examples in your evaluation download.

http://www.jgraph.com/

Raphaël - Vector Graphics using JavaScript

2012-10-23T06:30:00.000-07:00

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

2012-10-20T00:35:00.001-07:00

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.

2012-08-27T14:00:00.000-07:00

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

2012-08-24T20:24:00.000-07:00

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

2012-05-20T23:55:00.000-07:00

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

2012-05-15T22:12:00.001-07:00

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!

2012-05-10T00:49:00.000-07:00

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

2012-04-26T23:12:00.003-07:00

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

2012-04-26T01:12:00.001-07:00

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

2012-04-26T00:53:00.000-07:00

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:

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

Happy Scripting.