Rails spinoffs - Dec 2007 - Ortho - a library for JavaScript Graphics and Text

I''ve written a JavaScript library called Ortho (http://www.craic.com/
ortho) on top of Prototype for creating ''diagram-style''
graphics in
JavaScript. You can create histograms, graphs, timeline plots,
''maps''
of genomic data, annotated images, tree diagrams, etc.

Unlike Canvas, it seamlessly integrates text with graphics and the
output looks the same across browsers and in *print*. Unlike Flash it
does not require third party software.

It uses associated CSS styles to draw rectangles (divs with a border)
and horizontal or vertical lines (divs with a border on one side). A
bit of a hack? You might say that, but it turns out to be very
effective for the sort of graphics that I need to create on the fly.

It cannot draw curved lines or arbitrary shapes - hence the name
''ortho'' for orthogonal. But for a range of applications it may
offer a
simple solution for creating sophisticated graphics.

It is built on top of the wonderful Prototype library. As a result it
is very amenable to being extended with Prototype and Scriptaculous.

Ortho is released under an MIT-style license.

The initial release only covers ''static'' graphics but
functions for
user interaction and Ajax are under development.

The Ortho project site (http://www.craic.com/ortho) has a number of
examples that show you what you can do with the library.

Please take a look and let me know if and how it works for your
applications.

--Rob Jones

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Ummmmm?

Forbidden
You don''t have permission to access /ortho/ on this server.

Apache/1.3.27 Server at www.craic.com Port 80


On Dec 18, 2:05 pm, Rob Jones
<craiccomput...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
> I''ve written a JavaScript library called Ortho
(http://www.craic.com/
> ortho) on top of Prototype for creating ''diagram-style''
graphics in
> JavaScript. You can create histograms, graphs, timeline plots,
''maps''
> of genomic data, annotated images, tree diagrams, etc.
>
> Unlike Canvas, it seamlessly integrates text with graphics and the
> output looks the same across browsers and in *print*. Unlike Flash it
> does not require third party software.
>
> It uses associated CSS styles to draw rectangles (divs with a border)
> and horizontal or vertical lines (divs with a border on one side). A
> bit of a hack? You might say that, but it turns out to be very
> effective for the sort of graphics that I need to create on the fly.
>
> It cannot draw curved lines or arbitrary shapes - hence the name
> ''ortho'' for orthogonal. But for a range of applications
it may offer a
> simple solution for creating sophisticated graphics.
>
> It is built on top of the wonderful Prototype library. As a result it
> is very amenable to being extended with Prototype and Scriptaculous.
>
> Ortho is released under an MIT-style license.
>
> The initial release only covers ''static'' graphics but
functions for
> user interaction and Ajax are under development.
>
> The Ortho project site (http://www.craic.com/ortho) has a number of
> examples that show you what you can do with the library.
>
> Please take a look and let me know if and how it works for your
> applications.
>
> --Rob Jones
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Sorry! Last minute update to the site... fixed now

On Dec 18, 11:25 am, Diodeus
<diod...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
> Ummmmm?
>
> Forbidden
> You don''t have permission to access /ortho/ on this server.
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

The Tree stuff looks like it could be useful for me.  Thanks for the lib.

On Dec 18, 2007 1:05 PM, Rob Jones
<craiccomputing-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
>
> I''ve written a JavaScript library called Ortho
(http://www.craic.com/
> ortho) on top of Prototype for creating ''diagram-style''
graphics in
> JavaScript. You can create histograms, graphs, timeline plots,
''maps''
> of genomic data, annotated images, tree diagrams, etc.
>
> Unlike Canvas, it seamlessly integrates text with graphics and the
> output looks the same across browsers and in *print*. Unlike Flash it
> does not require third party software.
>
> It uses associated CSS styles to draw rectangles (divs with a border)
> and horizontal or vertical lines (divs with a border on one side). A
> bit of a hack? You might say that, but it turns out to be very
> effective for the sort of graphics that I need to create on the fly.
>
> It cannot draw curved lines or arbitrary shapes - hence the name
> ''ortho'' for orthogonal. But for a range of applications
it may offer a
> simple solution for creating sophisticated graphics.
>
> It is built on top of the wonderful Prototype library. As a result it
> is very amenable to being extended with Prototype and Scriptaculous.
>
> Ortho is released under an MIT-style license.
>
> The initial release only covers ''static'' graphics but
functions for
> user interaction and Ajax are under development.
>
> The Ortho project site (http://www.craic.com/ortho) has a number of
> examples that show you what you can do with the library.
>
> Please take a look and let me know if and how it works for your
> applications.
>
> --Rob Jones
>
> >
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Rob, thanks for submitting to scripteka - seems like a useful
extension to have.
I have just published it.

Best,
kangax
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

On 18/12/2007, Rob Jones
<craiccomputing-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
>
> I''ve written a JavaScript library called Ortho
(http://www.craic.com/
> ortho) on top of Prototype for creating ''diagram-style''
graphics in
> JavaScript. You can create histograms, graphs, timeline plots,
''maps''
> of genomic data, annotated images, tree diagrams, etc.
>
> Unlike Canvas, it seamlessly integrates text with graphics and the
> output looks the same across browsers and in *print*. Unlike Flash it
> does not require third party software.
>
> It uses associated CSS styles to draw rectangles (divs with a border)
> and horizontal or vertical lines (divs with a border on one side). A
> bit of a hack? You might say that, but it turns out to be very
> effective for the sort of graphics that I need to create on the fly.
>
> It cannot draw curved lines or arbitrary shapes - hence the name
> ''ortho'' for orthogonal. But for a range of applications
it may offer a
> simple solution for creating sophisticated graphics.
>
> It is built on top of the wonderful Prototype library. As a result it
> is very amenable to being extended with Prototype and Scriptaculous.
>
> Ortho is released under an MIT-style license.
>
> The initial release only covers ''static'' graphics but
functions for
> user interaction and Ajax are under development.
>
> The Ortho project site (http://www.craic.com/ortho) has a number of
> examples that show you what you can do with the library.
>
> Please take a look and let me know if and how it works for your
> applications.
>
> --Rob Jones
WOW. Looks GREAT!

I have 2 points/questions.

1 - In designing the example which shows the footy teams, did you
manually work out the coordinates? The ability to auto-size a tree
view would be SUPERB. Just imagine all that nested data being
instantly converted into a hierarchical display.

2 - Scaling/zooming breaks the whole image. Whilst I understand the
reasoning for this, a simple fix would be (maybe) to fix the point
size of the text used. That way it stays the same size.

Overall, VERY impressed. I think using this as a base class to support
hierarchical data viewing would be a great addition.

Regards,

Richard.

-- 
-----
Richard Quadling
Zend Certified Engineer : http://zend.com/zce.php?c=ZEND002498&r=213474731
"Standing on the shoulders of some very clever giants!"

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Thanks!
That world cup example was totally static but I''m working on
functions to generate histograms, trees etc where you feed in
the data and a minimal set of parameters. I''ve not really
taken on scaling the graphics yet. ...and I want to really beef
up the docs and examples first...

I''d like to get the next rev. out by the end of January - basic
user interaction stuff like highlighting, scrolling an tooltips.
cheers
--Rob

On Dec 19, 1:37 am, "Richard Quadling"
<rquadl...-gM/Ye1E23mwN+BqQ9rBEUg@public.gmane.org>
wrote:
> WOW. Looks GREAT!
>
> I have 2 points/questions.
>
> 1 - In designing the example which shows the footy teams, did you
> manually work out the coordinates? The ability to auto-size a tree
> view would be SUPERB. Just imagine all that nested data being
> instantly converted into a hierarchical display.
>
> 2 - Scaling/zooming breaks the whole image. Whilst I understand the
> reasoning for this, a simple fix would be (maybe) to fix the point
> size of the text used. That way it stays the same size.
>
> Overall, VERY impressed. I think using this as a base class to support
> hierarchical data viewing would be a great addition.
>
> Regards,
>
> Richard.
>
> --
> -----
> Richard Quadling
> Zend Certified Engineer
:http://zend.com/zce.php?c=ZEND002498&r=213474731
> "Standing on the shoulders of some very clever giants!"
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Hey Rob!
Thanks for your library!
It was the missed part on my last project part about Yanged: the tree
view (you could see a representation at: http://blogs.sistes.net/Garito/659
- see only the image because the text is about other things and is in
spanish)

With your library the representation will be more clear

Thanks again!

On Dec 19, 4:38 pm, Rob Jones
<craiccomput...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
> Thanks!
> That world cup example was totally static but I''m working on
> functions to generate histograms, trees etc where you feed in
> the data and a minimal set of parameters. I''ve not really
> taken on scaling the graphics yet. ...and I want to really beef
> up the docs and examples first...
>
> I''d like to get the next rev. out by the end of January - basic
> user interaction stuff like highlighting, scrolling an tooltips.
> cheers
> --Rob
>
> On Dec 19, 1:37 am, "Richard Quadling"
<rquadl...-gM/Ye1E23mwN+BqQ9rBEUg@public.gmane.org>
> wrote:
>
> > WOW. Looks GREAT!
>
> > I have 2 points/questions.
>
> > 1 - In designing the example which shows the footy teams, did you
> > manually work out the coordinates? The ability to auto-size a tree
> > view would be SUPERB. Just imagine all that nested data being
> > instantly converted into a hierarchical display.
>
> > 2 - Scaling/zooming breaks the whole image. Whilst I understand the
> > reasoning for this, a simple fix would be (maybe) to fix the point
> > size of the text used. That way it stays the same size.
>
> > Overall, VERY impressed. I think using this as a base class to support
> > hierarchical data viewing would be a great addition.
>
> > Regards,
>
> > Richard.
>
> > --
> > -----
> > Richard Quadling
> > Zend Certified Engineer
:http://zend.com/zce.php?c=ZEND002498&r=213474731
> > "Standing on the shoulders of some very clever giants!"
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Richard Quadling wrote:
> 2 - Scaling/zooming breaks the whole image. Whilst I understand the
> reasoning for this, a simple fix would be (maybe) to fix the point
> size of the text used. That way it stays the same size.
You can''t fix point size of text. Any suggestions you make
in CSS or with JG will be ignored in many cases. You can
never rely on a specific point size of text.

-- 
Bertilo Wennergren <http://bertilow.com>

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

It makes my life easier.

Thanks

YNY

On Dec 19, 2007 2:05 AM, Rob Jones
<craiccomputing-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
>
> I''ve written a JavaScript library called Ortho
(http://www.craic.com/
> ortho) on top of Prototype for creating ''diagram-style''
graphics in
> JavaScript. You can create histograms, graphs, timeline plots,
''maps''
> of genomic data, annotated images, tree diagrams, etc.
>
> Unlike Canvas, it seamlessly integrates text with graphics and the
> output looks the same across browsers and in *print*. Unlike Flash it
> does not require third party software.
>
> It uses associated CSS styles to draw rectangles (divs with a border)
> and horizontal or vertical lines (divs with a border on one side). A
> bit of a hack? You might say that, but it turns out to be very
> effective for the sort of graphics that I need to create on the fly.
>
> It cannot draw curved lines or arbitrary shapes - hence the name
> ''ortho'' for orthogonal. But for a range of applications
it may offer a
> simple solution for creating sophisticated graphics.
>
> It is built on top of the wonderful Prototype library. As a result it
> is very amenable to being extended with Prototype and Scriptaculous.
>
> Ortho is released under an MIT-style license.
>
> The initial release only covers ''static'' graphics but
functions for
> user interaction and Ajax are under development.
>
> The Ortho project site (http://www.craic.com/ortho) has a number of
> examples that show you what you can do with the library.
>
> Please take a look and let me know if and how it works for your
> applications.
>
> --Rob Jones
>
> >
>


-- 
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
"Limitless undying love
which shines around me like a million suns
It calls me on and on across the universe...."
Accross The Universe   - The Beatles -
--------------------------------------------
Visit :
http://www.sabukhitam.com/
=====================
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Ortho looks pretty hot!  I look forward to when you get the interactive
examples up.

I don''t like that Ortho obliterates ''main'' from the
global namespace.  Why
not call it OrthoMain?  Or, better yet, how about simply passing the main
function to ortho.init?

    - Scott


On 12/18/07, Rob Jones
<craiccomputing-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
>
>
> I''ve written a JavaScript library called Ortho
(http://www.craic.com/
> ortho) on top of Prototype for creating ''diagram-style''
graphics in
> JavaScript. You can create histograms, graphs, timeline plots,
''maps''
> of genomic data, annotated images, tree diagrams, etc.
>
> Unlike Canvas, it seamlessly integrates text with graphics and the
> output looks the same across browsers and in *print*. Unlike Flash it
> does not require third party software.
>
> It uses associated CSS styles to draw rectangles (divs with a border)
> and horizontal or vertical lines (divs with a border on one side). A
> bit of a hack? You might say that, but it turns out to be very
> effective for the sort of graphics that I need to create on the fly.
>
> It cannot draw curved lines or arbitrary shapes - hence the name
> ''ortho'' for orthogonal. But for a range of applications
it may offer a
> simple solution for creating sophisticated graphics.
>
> It is built on top of the wonderful Prototype library. As a result it
> is very amenable to being extended with Prototype and Scriptaculous.
>
> Ortho is released under an MIT-style license.
>
> The initial release only covers ''static'' graphics but
functions for
> user interaction and Ajax are under development.
>
> The Ortho project site (http://www.craic.com/ortho) has a number of
> examples that show you what you can do with the library.
>
> Please take a look and let me know if and how it works for your
> applications.
>
> --Rob Jones
>
> >
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

On Dec 20, 12:04 am, "Scott Bronson"
<bron...-upR/Dp8kgedBDgjK7y7TUQ@public.gmane.org>
wrote:
> Ortho looks pretty hot!  I look forward to when you get the interactive
> examples up.
>
> I don''t like that Ortho obliterates ''main'' from
the global namespace.  Why
> not call it OrthoMain?  Or, better yet, how about simply passing the main
> function to ortho.init?
You can! ortho.init(my_main_function);
It''s in the docs - I left it out of the ''quick start''
page
to keep that simple

The need for ortho.init() in the first place is to ensure that
images (if you have any) are guaranteed to have loaded prior
to creating orthoImage objects. That was the only way I could
get round problems with Internet Explorer and images... if
you aren''t using any images in the JavaScript then ortho.init
just calls main.

Not a nice solution and perhaps I''ll figure out the right way
to do this but that''s what I''ve got right now.

--Rob


--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---