richtestani’s posterous

This clip is from The Changeling - definitely one of the scariest movies ever.

People in Fairfield County, Conn., still talk about Jerry-Jer. Even though his reign of terror on Bridgeport public access is about 10 years in the past, "the Senator" is a hard guy to forget. Connecticut is more known for white picket fences and Martha Stewart than "die lists" or extreme facial piercings. "Warning, the following program is offensive to everyone in the known universe, therefore put your parents to sleep before you pump the volume," the screen warns before Jerry-Jer comes on. Some of the good folk in the Constitution State are still hiding from their TVs as a result.

 What is it?

Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.

Raphaël uses the SVG W3C Recommendation and VML as a base for creating graphics. This means every graphical object you create is also a DOM object, so you can attach JavaScript event handlers or modify them later. Raphaël’s goal is to provide an adapter that will make drawing vector art compatible cross-browser and easy.

Raphaël currently supports Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+.

For more examples take a look at charting plugin: gRaphaël

 How to use it?

Download and include raphael.js into your HTML page, then use it as simple as:

// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);
// Creates circle at x = 50, y = 40, with radius 10
var circle = paper.circle(50, 40, 10);
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");
// Sets the stroke attribute of the circle to white (#fff)
circle.attr("stroke", "#fff");

 Demos

• Raphaël Playground
• Reflection
• Image rotation
• Text rotation
• GitHub-a-like impact chart
• GitHub-a-like punch chart
• GitHub-a-like languages chart
• Raphaël Analytics chart
• Polar Clock
• Dynamic Spinner
• Australian Map
• Dancing Helvetica
• Multichart
• Animation
• Dragon
• Hand
• Interactive Chart
• Diagram
• Custom Fonts
• Animation Easing
• Gradients Example

Seriously cool Vector Javascript library. Will give this a go soon.