San Bei Ji » science

SVG and MathML in HTML5

Joe — Wed, 08 Dec 2010 04:51:09 +0000

The next article in the Developing with HTML5 series.

Pick a flower on Earth and you move the farthest star.

—Paul Dirac

Scalable Vector Graphics (SVG) and MathML are XML applications that are widely used in scientific contexts. SVG is used to draw vector graphics, and is frequently found in visualization libraries such as ProtoVis. MathML is used to describe the presentation and meaning of mathematical formulæ. They are very easy to work with in a programmatic sense, because they are XML-based and therefore just text, and yet they are capable of rendering beautiful information in supporting web browsers.

Paul Dirac, who loved the maths.

The idea behind XHTML was to move the web toward extensibility (the X in XHTML), where a web browser markup language could be seeded with bits of other XML applications by declaring a namespace and letting things coexist. The problem with that plan was that XML parsers were required to be extremely fussy, to the point that if a problem was detected the browser should render an error message. Browsers don’t work that way. Instead, they forgive your human or computer errors and render the page as best as their little hearts can.

In the beginning of the process, HTML5 was not extensible, and to this day it remains opposed to the whole namespace idea. But SVG and MathML are highly popular and useful XML applications that deserve a place within the HTML5 spec. And so shall it be: and are the opening volleys in inserting SVG and MathML into your HTML5 document tree. Any elements that are children of the SVG and MathML specs are valid and functional child elements of the and elements respectively. No need to declare a namespace. You’re done. Thank you. Now this is not to say that the idea of inserting these XML applications within the HTML5 spec is not without some controversy. What about other XML applications and XHTML extensions such as RDFa, CML, and MML? CML (Chemical Markup Language) and MML (Music Markup Language) are indeed common, but within specific application contexts. They are not supported yet by any web browser (whereas MathML and SVG are well supported.) RDFa on the other hand is a more political issue: More on that whole mess in a later post… So in short, SVG and MathML are supported objects within HTML5 because they are widely deployed in existing web browsers, and they are very useful – particularly to those of us in the science industry charged with representing scientific information on the web. Let’s look at how to get started. First, an SVG example – simply start your SVG block using the element and drop your SVG markup within: The Sun in SVG

`The Sun in SVG`

Here’s a live example that will work in browsers that support SVG and MathML in HTML5. (Try it in the Firefox 4 beta.) Or if you aren’t one of those early-adopting browser users that are used to living dangerously, then please refer to the perfectly safe reference image below:

Reference rendering of the sun in SVG.

To learn more about SVG, check out the w3schools SVG tutorial for starters. While SVG is supported in basic forms in Chrome, Safari, and Firefox, only Firefox 4 (currently in beta) supports embedding SVG natively in HTML5. But Chrome will follow soon, followed by IE9, Safari, and eventually (hopefully) Opera. MathML is equally straightforward, using the element as the opener:




  
  The Dirac δ-function


  The Dirac δ-function
   $\int_{- \infty}^{\infty} f δ = f (0)$

Compare to the reference rendering below, or check out the live example.

The Dirac delta function rendered from MathML in Firefox 4 beta

Again, currently Firefox 4 beta is the only close-to-shipping browser that supports this. But it is expected to come to all major modern browsers in 2010/2011, including IE9, Safari, Opera, and Google Chrome. To learn more about how to construct MathML, check out Mathematica’s MathML tutorial.

In short, it’s an easy trip to embed SVG and MathML in HTML5. No namespaces are required. The trade-off is less extensibility, but if you need extensibility back there’s an XML flavor of HTML5, appropriately titled XHTML5. In the meantime, start looking for ways to leverage SVG and MathML in the coming months as capable browsers start coming online! While this is indeed a bit on the bleeding-edge side of things, web browsers are beginning to implement these features and I expect over the next year or two the practice of embedding SVG and MathML markup in HTML5 web pages will become entirely commonplace within the scientific community.

Create the change you want to see in the world, one environment at a time

Joe — Wed, 30 Sep 2009 18:31:14 +0000

Today I came across this article from Peter Bregman on the HarvardBusiness.org site, titled: The Easiest Way to Change People’s Behavior. It’s an excellent read and highly recommended.

What Peter discusses in this article is that one of the most important motivational factors in our lives is environment. If you put the right things in front of you, you’ll tend to use them more. Move them away, and they’ll get used less.

This goes for good things as well as bad things. On the positive side, consider proximity of the things that are beneficial: The gym is only a block away, so you go regularly. If the gym is far, you don’t go. Some examples based on the article:

Use a bigger spoon or plate, and you eat more. Use smaller ones and you eat less.
Live near a liquor store or a Burger King and people tend to drink more and eat more junk food. Place yourselves farther away from those and you tend not to indulge in such sins.
For musicians, keep your instrument and music in an area where you’ll most likely use it. Designate a practice area and have your instrument either out of it’s case or put the case in an easily accessible area. Music on the stand. Metronome on the desk. Ready to go. (I personally have found having a tuner (iStrobeSoft) and metronome (Dr Betotte TC) on my iPhone to be one of the biggest music practice productivity boosts yet. No searching for gadgets…)
Want kids to do their homework? Give them a clean, organized place to do it and make sure the homework is there and not floating around the house in some random place. (I know this from experience…)

In a Web 2.0 context, this equates to the usability of your software. Make it easy for your users to get things done, and they’ll do it without a hitch. Throw up roadblocks, and they’ll get stuck. It doesn’t matter how small the roadblock is or whether or not the construct was well intentioned or not – if it impedes usability, then it will impede usability.

In a greater sense, there’s a lesson for the nation or the world: If you want people to change the way they are doing things, make them want to do it. Make it easy for them. Remove any and all barriers to getting things done. You want people to vote? Put voting booths in more neighborhoods or promote the option to vote by mail. Need people to get immunized? Set up neighborhood clinics. Want your employees to be more productive? Find out what is it about your office environment that is getting in the way or not helping promote the results you want to see. For kids, for employees, for citizens, provide the right environment and make it a place they want to be.

Doctor Atomic

Joe — Sat, 22 Oct 2005 04:04:34 +0000

I saw the San Francisco Opera perform Doctor Atomic last night. My opinion: It was amazing, and this is one for the ages.

Now first off, let’s get the criticism out of the way: There were a couple of spots that just dragged on nebulously, and I started to just get plain old bored. It is very hard to get me bored at an opera �� I love opera performances, and especially this one for me had given me a lot of anticipation. Specifically, I’m referring to Scene II, and just a little bit from Scene III.

However, this is a relatively minor critique in light of the overall composition, production, and performance.

Kristine Jepson as Kitty Oppenheimer was absolutely amazing. Her impressive vocal execution of some incredibly difficult passages was my favorite part of the vocal component of this opera. All the vocal performances were great, including the chorus, and I really enjoyed it.

The production, especially the set design and choreography, made a real impression on me. The visual sight of a mother and child alone on a dark stage, with an enormous bomb hanging right over their heads, while sounds of everyday conversation was looped via tape. The choreography was spectacular in the way it depicted the concepts of everyday work juxtaposed with the horror of war, all underlined by the physics of the atom.

Segments of the text were direct copies of things I recognized, from the letter by Leo Slizard to initiate the Manhattan Project, to Oppenheimer’s recitals of ancient Sanskrit from the Bhagavad Gita. (I may have missed it, but I don’t think that they worked in his famous and ominous recitation of the phrase from chapter 11 of the Bhagavad Gita before the Trinity test: I have become Death, Destroyer of Worlds.)

This was an opera about deep personal conflict, revolving around the genius Oppenheimer and his colleagues as they proceeded to build the greatest weapon of mass destruction ever conceived. To invent a conventional weapon is one thing. But to invent a weapon that is capable of erasing the lives of hundreds of thousands of people in one instant, that is something that generates feelings of unimaginable horror, extreme guilt, and even inescapable fascination. What really left me after seeing this opera was the take on the issues involved: The conflict, the humanity, the despair, the fear, and the human curiosity and determination that saw it all through in the face of everything.

The opera ended with the test blast at the Trinity site, with everyone’s heads propped up from their positions of shelter in fascination and awe. As the rumble subsided, a Japanese woman’s voice can be heard repeating over and over again a simple request for a drink of water. This is an ominous reminder of the horrible aftermath of what happened in Hiroshima and Nagasaki, where the water was heavily tainted so that those that drank the water suffered and died from radiation poisoning, while those that did not drink suffered and died from thirst �� and more importantly �� a reminder that war’s greatest tragedy is how it affects the innocent.

I am especially glad that I got to see this opera in it’s premiere. I can tell that this one will go down in history as one of the top operatic works of our era. It is a work of genius, and I do not use that word lightly.

I think that this opera goes right on up there with Minard’s chart of Napoleon’s campaign in Russia as some of the most effective anti-war propaganda ever created.