You are currently browsing the monthly archive for June 2012.


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.

Counting with coffee Beans on grid paper

When I started teaching my son maths we did a lot of counting coffee beans.  We would arrange 12 beans in groups of 3 and groups of 4… The idea was to start building up intuition and then segway into multiplication.

Don’t ask me why coffee beans.. I must be a bad parent!  The beans just happened to be handy, being dark they were easily visible when put on 5mm math grid paper and fit nicely in the squares.  You can use small buttons or raisins even.  Its pretty tactile, so works okay for young kids [ as long as they are old enough not to swallow small things ]

Abstracting to Multiplication

Later we drew the ‘beans’ in the squares and then just drawing a circle in the box instead of placing a bean.  This gradually led to  tracing out the rectangle outlines of the groups and let the squares on paper take the place of actual beans.. so it abstracts really well in a fairly natural and unforced way.

There are some nice ‘tricks’ you can do on squared paper that grow out of this approach –

  • every rectangle is a multiplication product, so you can use it to figure out any times table question
  • you can work out all the times-tables and write them in the top right square before reciting them
  • introduce distributive property (a+b)*c = a*c + b*c by showing the rectangles add up
  • ask.. are there any numbers that cant be made by a rectangle product? [ numbers]
  • show square numbers – 1,4,9,16 …
  • you can show how to add 2n+1 to n squared to get the next square number
  • you can introduce series – 1+3+5+7+ … and show how they sum to make the square numbers
  • make a stepped-triangle 1+2+3+4+5+6 and show how two of these can be put together to make a rectangle, which leads to sum 1 to n = n(n+1)/2

So this approach leads very naturally into some really nice mathematics.  Along the way it reinforces the rote learning of times tables (auditory repetition) with visual intuition.

The web app – introducing Doctor X

I thought there was probably an App or web page to do this kind of thing interactively.  I googled around and found lots of times table grids, math systems but nothing that seemed to take the grid-paper-rectangles-and-counting-beans approach into an interactive medium.

I made notes on what the app might look like, and then spent some time making a quick prototype in Javascript.  I found It needed a way to step through some basic usage notes and examples, so I added a howto box.  Then we came up with a silly name for this thing.

Anyway, here is the current version of the visual grid calculator for kids, which I’m calling :

“The Doctor X Amazing Griddable Multiplication Contraption”

The Doctor X Amazing Griddable Multiplication Contraption

When I get time Ill make some more in-depth tutorials and worksheets on some of the concepts I mentioned above.   Let me know what you’d like to see,