Scalable Vector Graphics: SVG zone

This chart and graph demonstration shows how SVG manages and displays data, generating SVG code from data entered by the user. The demo integrates related technologies, such as ECMA/JavaScript, HTML, and the Document Object Model (DOM).

There are three sections to this application: the bar chart, the pie chart, and the graph. In each section, a user enters two-component data: for a chart, a label and a value, and for plotting in a line graph, an x and y value pair. As the user enters data, SVG elements are generated and added to the SVG document. The bar chart and pie chart share the same data points.

This building search demonstration shows a considerable advance from your typical phone directory application. This building is the Adobe headquarters in San Jose, California, and the demo allows you to search for a person, view building floor plans, plan routes, and print crystal clear maps.

Because the Adobe floor plans were available as PDF documents, the designer was able to use them as a template for the project. While compiling tracings of all of the floor plans into a single Adobe® Illustrator® document, the designer was able to determine what graphic elements were shared between floors and what elements were different. These differences became overlays on a template floor plan that would be switched on and off via scripts created by the developer on the project. The Illustrator Layers palette enabled the designer to set IDs on individual elements and groups and preview showing and hiding elements for each floor.

This Chemical Markup Language (CML) demonstration shows how chemical data for 2D and 3D molecules (adrenalin, caffeine, cortisone, ethanol, and melatonin) can be visualized using SVG. It shows the true versatility of SVG by demonstrating how data originally in one XML-related language can be manipulated by another language to create SVG that you can interact with.

The molecular data is originally stored in CML, which is another XML-related markup language. Then an Extensible Stylesheet Language Transformations (XSLT) language document automatically converts each CML file to an SVG file. With some additional JavaScript, the SVG representation of the molecule is ready for viewing.