add-memberalign-toparrow-leftarrow-rightbellblockcalendarcamerachatchevron-leftchevron-rightchevron-small-downchevron-upcircle-with-crosscomposecrossfacebookflagfolderglobegoogleimagesinstagramkeylocation-pinmedalmoremuplabelShape 3 + Rectangle 1pagepersonpluspollsImported LayersImported LayersImported LayersshieldstartwitterwinbackClosewinbackCompletewinbackDiscountyahoo

Graphical JavaScript: Raphael, SVG, 3D visualization and HTML5

This is a must-see for graphics nerds. We're gonna be all up in the SVG and HTML5 canvas!

Atomistic visualization of complex molecules in JavaScript - Monica Berrondo

3D visualization of complex molecules has traditionally been a desktop problem with very few solutions for embedding anything beyond a static image in a web page.  One technique used to view the molecules on a web page is through java applets which require users to have the necessary plugin installed.

Using HTML5's canvas element, I have created a purely JavaScript version of a molecular viewer that allows you to view, rotate, and scale molecules in different renderings.  Atoms that are bonded are represented by the lines that connect them.  For complex biomolecules, there is an element beyond 3D visualization of the atom points and bond lines.  Traces of the overall structure of such biomolecules are rendered using splines to show connections.  The 3D effects are achieved through lighting and coloring, as well as the ability to rotate and see how these aspects change.

Raphael + Backbone + Traer - Nick Gauthier

Raphael.js is a cool vector graphic drawing library for javascript. It uses SVG (VML on IE) to draw just about anything, and provides lots of easy helper methods. The coolest thing about SVG is that since it's XML it can be inserted directly into the dom, so every element has its own dom node.

One of my favorite things about Backbone.js is that the only assumption it makes about Views is that they will have a dom element, el. So, I thought it would be really cool if you used a Backbone.js view to render Raphael objects.

6:00 - Social time (meet some peeps)

6:15 - Lightning Talk - Contact Jonathan or Shea to speak!

6:30 - Atomistic visualization of complex molecules in JavaScript - Monica Berrondo

7:00 - QA & Break

7:15 - Raphael + Backbone + Traer - Nick Gauthier

7:45 - QA

8:00 - Ping pong, etc


Food will be provided - exact type TBD. Some cold beverages as well.

Lightning Talks

Do you have something you'd like to share? A new library, a cool project, or just need a soapbox to rant from? We're making time for multiple 5-minute lightning talks at the beginning of every meetup. Email the organizers and we'll add you to the schedule.

Location: in Tide Point has offered their space to us for our meetups, it's located in Tide Point in the Ivory Building.

If you bike over, feel free to bring your bike inside, or lock up on one of the outdoor racks. You can also take the water taxi over from Fells Point (landing #8) to landing #10.


If you drive, park in one of the Green or Purple areas:

Green is designated visitor spaces, they are also marked "visitor" on the pavement. Do not park in 'reserved' or 'handicap' (unless you have a permit). Purple is the employee lot which is also available for us.

The Blue marker is the entrance to the meeting space on Haubert St.

View AOL Meetup Location in a larger map

Join or login to comment.

  • George H

    I really enjoyed the protein modeling application. It was a great real-life example using Canvas. The Raphael and SVG implementation was more proof-of-concept but still somewhat interesting.

    April 20, 2012

  • A former member
    A former member

    I appreciated the expert knowledge in the house.

    April 19, 2012

  • Nick G.

    that would be pretty funny. Quick, rename the talk to "Javascript Visualization Kung Fu".

    March 11, 2012

  • Shea Frederick (.

    Can you demonstrate that at the meetup as well?

    March 11, 2012

  • Nick G.

    Fun fact: Monica and I used to try to kick each other in the face at Tae Kwon Do practices :-P

    March 11, 2012

Our Sponsors

  • AOL/


  • Message Systems


People in this
Meetup are also in:

Sign up

Meetup members, Log in

By clicking "Sign up" or "Sign up using Facebook", you confirm that you accept our Terms of Service & Privacy Policy