blog
Hey friends! I gave in and finally integrated <canvas> support into JSViz, and just in time for the Safari 3 Beta (which I'm really digging so far)! Note: To render with canvas, you'll need Firefox 1.5, Safari 2.0, or Opera 9. Continue reading "Viva la Canvas" » I get lot's of e-mails from JSViz users that want to know how to integrate tooltips into their graphs. Yeah, that's super easy and everyone is always asking. So I had a moment and here it is: Continue reading "Everybody wants tooltips" » In the process of integrating vector graphics into JSViz, we developed svg2vml, a library that provides a common interface for scripting vector graphics in browsers that support either SVG or VML. The library lives in the Google Code project hosting site at Howdy friends, I've just uploaded another patch to 0.3.3. Improved SVG Rendering Performance See the discussion here. Added configurations for "type-driven" Force Directed Graph attributes See discussion here.
JavaScript Garden
Although JavaScript deals fine with the syntax of two matching curly braces for blocks, it does not support block scope; hence, all that is left in the language is function scope. function test() { // a scope for(var i = 0; i < 10; i++) { // not a scope // count } console.log(i); // 10} There are also no distinct namespaces in JavaScript, which means that everything gets defined in one globally shared namespace. Each time a variable is referenced, JavaScript will traverse upwards through all the scopes until it finds it. The Bane of Global Variables // script Afoo = '42'; // script Bvar foo = '42' The above two scripts do not have the same effect. Again, that is not at all the same effect: not using var can have major implications. // global scopevar foo = 42;function test() { // local scope foo = 21;}test();foo; // 21 Leaving out the var statement inside the function test will override the value of foo. // global scopevar items = [/* some list */];for(var i = 0; i < 10; i++) { subLoop();}
Cytoscape.js
This is how easy it is to get started with Cytoscape.js (this code creates the instance you see on the bottom-right: About Cytoscape.js is an open-source graph theory library written in JavaScript. You can use Cytoscape.js for graph analysis and visualisation. Cytoscape.js allows you to easily display and manipulate rich, interactive graphs. Cytoscape.js also has graph analysis in mind: The library contains a slew of useful functions in graph theory. Cytoscape.js is an open-source project, and anyone is free to contribute. The library was developed at the Donnelly Centre at the University of Toronto. Cytoscape.js & Cytoscape Though Cytoscape.js shares its name with Cytoscape, Cytoscape.js is not Cytoscape. Cytoscape.js is a JavaScript library: It gives you a reusable graph widget that you can integrate with the rest of your webapp with your own JavaScript code. Funding Funding for Cytoscape.js and Cytoscape is provided by NRNB (U.S. Architecture & API Notation Position Elements JSON Background
A JavaScript Module Pattern
Eric Miraglia (@miraglia) is an engineering manager for the YUI project at Yahoo. Eric has been at Yahoo since 2003, working on projects ranging from Yahoo Sports to YUI. For the past several years, Eric and his colleagues on the YUI team have worked to establish YUI as the foundation for Yahoo’s frontend engineering work while open-sourcing the project and sharing it with the world under a liberal BSD license. Eric is an editor and frequent contributor to YUIBlog; his personal blog is at ericmiraglia.com. Prior to working at Yahoo, Eric taught writing at Stanford and elsewhere and led frontend engineering teams at several startups. Global variables are evil. Douglas Crockford has been teaching a useful singleton pattern for achieving this discipline, and I thought his pattern might be of interest to those of you building on top of YUI. 1. YAHOO.namespace("myProject"); This assigns an empty object myProject as a member of YAHOO (but doesn’t overwrite myProject if it already exists). 2.
Data Visualization Software Lab - Data visualization JavasScript library for adding interactive touch-screen driven charts and graphs to your web site (Javascript and HTML5 SDK)
Flare | Data Visualization for the Web
Graphviz | Graphviz - Graph Visualization Software
Graph
Graph Description In mathematics and computer science, graph theory studies networks of connected nodes and their properties. A graph can be used to visualize related data, or to find the shortest path from one node to another node for example. Central concepts in graph theory are: Node: a block of information in the network.Edge: a connection between two nodes (can have a direction and a weight).Centrality: determining the relative importance of a node.Clustering: partitioning nodes into groups. The NodeBox Graph library includes algorithms from NetworkX for betweenness centrality and eigenvector centrality, Connelly Barnes' implementation of Dijksta shortest paths (here) and the spring layout for JavaScript by Aslak Hellesoy and Dave Hoover (here). For those of you looking for the old Graph library built on Boost, it can still be found here. Download Documentation The library has a cool example of a visual browser for WordNet. How to get the library up and running graph = ximport("graph")
Demos - JavaScript InfoVis Toolkit
JavaScript InfoVis Toolkit Create Interactive Data Visualizations for the Web Home ● Download ● Builder ● Donate Area, Bar and Pie Charts Sunburst Icicle ForceDirected TreeMap SpaceTree RGraph HyperTree Advanced/Other copyright © 2013 SenchaLabs - Author: Nicolas Garcia Belmonte
jquery - Graph visualization code in JavaScript
arbor.js
