Creating My Website with Mathematica

This item was originally posted on the Wolfram Research blog at http://blog.wolfram.com/2007/11/21/creating-my-website-with-mathematica/

As readers of this blog might know, I have an unhealthy interest in the chemical elements. And Mathematica. The combination means that all my element-related projects are created using almost no tools other than Mathematica. It's not that I use it because I feel like I should---I certainly use other programs when appropriate (Photoshop, for example). It's just that Mathematica is the best available tool for many of the things I want to do. Really.

My latest project is the website periodictable.com. Let me say right off the bat that this is a fabulous domain name. It took me months of convincing and no small amount of cash to acquire it. It really deserves to host the definitive online periodic table reference website, not just another run-of-the-mill online periodic table, of which there are thousands.

Take a quick look at it here.

OK, now that you're back, you probably noticed that it does not look a whole lot like it came from Mathematica; it's not something you get directly from Export["index.html", mydata], though Mathematica's automatic HTML export features were used in some crucial places.

For the most part, the site is created by fairly low-level string concatenation, building up HTML code one tag at a time. The advantage of Mathematica here is just that it's a very nice, convenient programming language.

Another advantage of making the site in Mathematica is the handling of descriptive texts. The site contains descriptions of countless individual element samples, and all those descriptions are written and stored in a couple of large notebook files. The notebooks provide a convenient editing environment and, because they can be loaded into Mathematica and processed as data with absolutely no fuss, I spend a minimal amount of code to get the source material into a form that can be processed into HTML.

Basically I'm using the notebook like a database, but one where editing the text entries is as convenient as using any word processor. I use the same sort of technique for the back side of my periodic table placemats. The file is created automatically by a Mathematica program, which assembles text taken from a notebook containing the samples' database. That same notebook is also the source of the blurbs that you see when you move the mouse over any element on the front page of periodictable.com.

Another place Mathematica really stands out is in the technical data pages---for example, the page on the properties of titanium. All the data on this and the 117 other pages like it comes from the ElementData and ChemicalData functions. Without them I would have had to spend weeks or months gathering reliable data (which is of course precisely what we did to create the functions). It's quite wonderful to get a nice, interesting plot like this in no time:

(I should add that while these two data functions are what I need for this site, Mathematica has data functions on a wide and growing array of subjects, from geography to finance to knots: see here and here for more about them.)

On The Wolfram Demonstrations Project site I have a more elaborate variation of this example, which allows you to choose any of several dozen elemental properties and make various plots. This "Properties of the Elements" Demonstration and its source code can be downloaded from the site, along with the free Mathematica Player if you don't have Mathematica.

Another Mathematica interface I've made is this one (and I promise we'll connect back to the website creation subject matter shortly) that allows you to browse the decay chains of all the known isotopes of the elements (you'll need Mathematica to open it---or you can see the snapshot below). It relies on the IsotopeData paclet I discussed in a previous post, as well as the highly sophisticated LayeredGraphPlot function for the automatic layout of the decay network.

The connection with website creation is that these interfaces were written as the first steps in designing features for periodictable.com. Mathematica is a tremendously efficient environment for prototyping and exploring. The effort that went into creating these two examples was concentrated almost 100% in the subject matter---not in any overhead for creating an interactive program, where to get the data from, etc.

Once the basic idea was worked out, I could then think about how to translate it into a website. To see how isotope decay chains ended up on the site, take a look at this decay chain for U-235.

Navigation is by clicking on links rather than buttons, but other than that the site is quite similar to the in-product Mathematica version.

How did I go from the Mathematica version to the website, which superficially looks nothing like it? By taking the core content code (the Mathematica program that generates the decay chain images) and inserting it into the HTML-generating code for the rest of the site.

There's a tricky point where Mathematica's built-in web export features really came in handy. In both the Mathematica and web versions you can click on any isotope in the decay-chain image and have it jump to the data and decay chain for that isotope. In the Mathematica version this is done very simply by wrapping a Button object around each node of the decay network. The LayeredGraphPlot function that beautifully lays out these networks is flexible enough, and the graphical display system in the Mathematica front end is sophisticated enough, that putting buttons into automatically laid-out networks is no problem.

But what about the HTML version? To make this work in a web browser you have to create an "image map" tag that associates links with certain rectangular pixel coordinates in the image. Doing this is completely automatic using Export. Instead of wrapping Button objects around each node I wrap them with Hyperlink objects, then export the image expression to HTML. Export automatically recognizes the presence of Hyperlink objects in the expression and generates a corresponding imagemap with coordinates that match the JPEG image it generated. That's really nice.

A highly technical website like periodictable.com requires putting together data (text, numerical facts, pictures) from many different sources, and managing its deployment to a complex, highly structured layout of HTML files. I know of no other program that can handle the full spectrum of tasks required to do this, from supplying the technical data to processing the images to generating the final HTML.

Creating this website using other tools is certainly possible, but not in the amount of time I would have available for the task. By making the process orders of magnitude faster, Mathematica can take credit for the existence of the site. Well, Mathematica and the five years I've spent compulsively photographing element samples.