background preloader

Cytoscape.js

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. 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. ISB | UCSD | MSKCC | Pasteur | Agilent | UCSF | Unilever | Toronto | NCIBI | NRNB Architecture & API Notation Position Data Related:  Code tricks

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) anvaka/VivaGraphJS Flare | Data Visualization for the Web HTML5 canvas - an introduction to it by Richard Heyes, RGraph author Introduction <canvas> is a new HTML tag which is part of the HTML5 standard. The <canvas> tag uses a "fire and forget" drawing methodology - there is no DOM that is maintained, so if you want to alter something you'll probably (but not necessarily) have to redraw the entire canvas. Other uses for <canvas> include providing a control panel to your users and using it to create games. History of the tag HTML5 canvas was originally introduced by Apple in 2004 for use in Mac OS X WebKit to power dashboard applications and their Safari web browser. A usage example The example to the right is a very simple example of drawing a few primitives on the canvas. The <canvas> tag itself is defined with just width, height and id attributes. <canvas id="cvs" width="600" height="250" style="border: 1px solid gray">[No canvas support]<canvas> The content in between the tags is not shown if the browser supports canvas, and is if the browser doesn't. Javascript & web charts

Graphviz | Graphviz - Graph Visualization Software Introducción al NDK de Android El NDK de Android es un conjunto de herramientas que permiten embeber código máquina nativo compilado en lenguajes C y/o C++, hoy veremos cómo crear un ejemplo en el NDK de Android. Conceptos básicos del NDK La Máquina Virtual de Android (VM) permite que el código de la aplicación (escrito en Java) llame a métodos implementados en código nativo a través de JNI. En una nutshell, lo cual quiere decir que: El código fuente de la aplicación declarará uno o más métodos con la palabra reservada native para indicar que dicho método está implementado en código nativo. native byte[] loadFile(String filePath); Es necesario proporcionar una biblioteca compartida nativa que contenga la implentación de dichos métodos, que será empaquetada en el .apk de la aplicación. static { System.loadLibrary("FileLoader");} No hay que scribir el prefijo “lib” ni el sufijo “.so”. Primer ejemplo en el NDK Android – Hola Mundo En el ndk existe un directorio que contiene varios ejemplos, importamos a eclipse el HelloJni.

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")

arbor.js » introduction about arbor Arbor is a graph visualization library built with web workers and jQuery. Rather than trying to be an all-encompassing framework, arbor provides an efficient, force-directed layout algorithm plus abstractions for graph organization and screen refresh handling. It leaves the actual screen-drawing to you. This means you can use it with canvas, SVG, or even positioned HTML elements; whatever display approach is appropriate for your project and your performance needs. As a result, the code you write with it can be focused on the things that make your project unique – the graph data and your visual style – rather than spending time on the physics math that makes the layouts possible. installation To use the particle system, get jQuery and add the file at lib/arbor.js to your path somewhere and include them in your HTML: getting started The source distribution contains a sample project that demonstrates some of the basic idioms for working with the library to build a visualization. name

Processing.js Demos below! As a sort-of reverse birthday present I’ve decided to release one of my largest projects, in recent memory. This is the project that I’ve been alluding to for quite some time now: I’ve ported the Processing visualization language to JavaScript, using the Canvas element. I’ve been working on this project, off-and-on now, for the past 7 months – it’s been a fun, and quite rewarding, challenge. The Processing Language The first portion of the project was writing a parser to dynamically convert code written in the Processing language, to JavaScript. It works “fairly well” (in that it’s able to handle anything that the processing.org web site throws at it) but I’m sure its total scope is limited (until a proper parser is involved). The language includes a number of interesting aspects, many of which are covered in the basic demos. Note: There’s one feature of Processing that’s pretty much impossible to support: variable name overloading. The Processing API Download How to Use Demos

Html5 node graph jquery - Graph visualization code in JavaScript

Related: