You are currently browsing the tag archive for the ‘diagram’ tag.


Guest post by my son, after a wee bit of prompting from dad to make a diagram and work it out :




The other day I was really enjoying some Anatomy Physiology lectures on YouTube by Professor Marian Diamond, who is in her 80s and still fired up with plenty of passion for the topic.

I made some handwritten notes as I followed along with the lectures, but wanted to try out some other ways to visualise things.

3D anatomy in the browser

To get a feel for the placement of everything, I found it very handy to see things in 3D.  The only serious web based anatomy browser I could find is .. its pretty impressive running in chrome or firefox.  You can hide parts by anatomical system and drill down..  so you see only what your interested in.  Then there is a way to generate a public link,  to effectively save that view.

As an example, here is a 3D scene showing the heart, which you can rotate in 3D :

One of the things that works in these youtube lectures above is the simplified schematic diagrams she uses to show the essentials of whats going on.  When you look at real anatomy, there is so much detail you cant parse it all until you know the ‘lay of the land’.

SVG for lecture notes [ and interactive lessons ] ?

I’ve also been experimenting with SVG as a way to create notes with diagrams.. here is a diagram showing the two pumps of the heart [ click image for svg file ]:

This diagram took a bit long as I was being too picky about how it looks – I used Inkscape on Linux, which is reasonably feature rich and stable these days.  I also tried the web based editor svg-edit … its getting there, but the alpha was a bit unstable and the stable version didn’t have a spline tool as far as I could see.

For making ‘high-yield’ succinct summary notes it would be really nice to have a nested text tree widget – so you can make bullet points that are indented several levels [ click to hide/expand would be handy too, for review].

These tools are getting pretty close to something that you can use for science or medicine lecture notes where you need text and diagrams in a web-friendly open format – something a bit more diagrammatic / visual than a wiki.  SVG support is really improving with latest Android, and I think it was well supported previously on iPad/iPhone.

I think there’s a lot of scope to use SVG for interactive lessons – it plays well with javascript, so at minimum you can do things like step thru a sequence of diagrams to show a metabolic pathway or process.   This would be a good way to augment notes – you can hide labels of parts of the anatomy and even compare the answer and make a score for each review lesson.

Here’s a great example from

Viewing Molecules in the Browser

The other web based tool I have been really impressed with is the ChemDoodle web component that shows molecules in 3D using webGL in browser – proteins, amino acids etc – which you can manipulate with the mouse.  I found it more responsive than jMol, which is the most well known molecule viewer, implemented in Java.

Protein Ribbon Viewer demo

Molecule Viewer demo

Javascript, dammit!

These things should be done in Javascript from now on – its fast enough, theres good [ but not perfect] browser API support, and its a much nicer language.   The recent effort with GeoGebra in Javascript works well enough already to illustrate my point, and will be a great for teaching geometry and maths to a new generation of kids.