Ortho > Introduction

Introduction to Ortho

Ortho is a JavaScript library for creating simple 2-D graphics in web browsers

It uses a few primitive objects that are combined to create complex diagrams and graphic displays with relatively modest programming effort. Because these are created programmatically in the browser, rather than as static images on a web server, you can build graphics that respond to user interactions, such as mouse clicks and drags, and to changes in data using AJAX.

There are five classes of objects that form the core of Ortho. Panels represent drawing areas. Rectangles and horizontal and vertical straight Lines are the primary objects from which complex graphics are constructed. Labels allow you to mix text with graphic elements and Images allow you to incorporate arbitrarily complex graphics from other sources. All of these are shown in the Panel below.

Ortho works by manipulating elements in the DOM, with associated CSS styles, and is built on top of the Prototype JavaScript library. Ortho is short for 'Orthogonal' as it can only display Rectangles and Horizontal and Vertical lines. Ortho is not able draw curves or diagonal lines directly. While this may be a major drawback in some applications, there are many where this is not a problem.

By using JavaScript, combined with the Prototype library, Ortho graphics look the same across all major web browsers and when printed will look identical to their screen versions.

The following examples illustrate how these core objects can be combined to produce complex applications:

1: A Representation of a Taxonomy Tree.


2: An Annotated Image.


3: A Simple Graph of Data Points.


4: A Layout of Gene Segments on part of the Human Genome.

 

While these examples are all static, Ortho has been designed with user interaction very much in mind. Those functions are actively under development and will be supplied in separate JavaScript files. Because Ortho graphic elements are DOM elements, they can all be manipulated with functions in both the Prototype and Scriptaculous libraries.

 
Ortho is the work of Robert Jones of Craic Computing LLC and is distributed freely under an MIT-style license. You can download it HERE. It requires the Prototype JavaScript library to operate. That is also freely distributed under the same license.