I made this up so my kids could keep track of where I was at all these conferences. Also a really cool example of just how awesome (and easy) d3.js can be. Simply add: co-ordinates, location name, image, and a brief description. Then repeat as you wish. Something like this:

function myMap() {
    var mapCanvas = document.getElementById("map");
        var mapOptions = {
            center: new google.maps.LatLng(52.2053, 0.1218),
            zoom: 3,
        var map = new google.maps.Map(mapCanvas, mapOptions);

    var myCity = new google.maps.LatLng(LAT, LNG);
    var pinImage = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/icons/blue-dot.png");
    var myCity = new google.maps.Marker({position: myCity, icon: pinImage});
    google.maps.event.addListener(myCity, 'click', function () {
    var myCity_window = new google.maps.InfoWindow({
    content: 'add_image_stuff_here' 'and_text_here'
    myCity_window.open(map, myCity);

The main variables you need to set are:

Then just add your own image and text in the area marked content: to finish off. There are lots of other variables to play around with including type of map and display, icon, and where the map starts off.

I find training, learning, and case progression fascinating. Here I've tried to show how one can explore a surgical logbook to look for trends and development in ones own operative experience. Note: these data are from a random number generator and not real patient data. If you want to drive it with your own data (e.g. from elogbook) I've made a few scripts to help you do this, all available online through my Github. This is also a helpful exercise with the workflow involved in integrating (parsing) spreadsheet data, through Matlab, into a viewer (in this case javascript).


1. Download logbook data (as eg .csv file)

2. Use Matlab to run logbook_d3js.m which parses the logbook data (above) into the appropriate formats (cases by dates sparse matrix saved as data_heatmap.tsv, casetypes, casedates)

3. Add data to logbook.html (casetypes = line 110 & casedates = line 111)

4. Run logbook.html (with data_heatmap.tsv in same folder) - I use WebStorm for this (which I thoroughly recommend) although any browser will do

Many thanks to Mike Bostocks D3.js and Ian YF Chang's 'heatmap' for inspiring this work.


All doctors get the excellent and detailed GMC survey results each year (it's available to the public too). And if you are like me you will spend hours pouring over the data :) I got inspired by these images - a sort of top-trumps-meets-Star-Wars (again made using the awesome d3.js):

So, I set to work trying to do something similar with these data. All the code is available via my github if you want to give it a go.


1. Download GMC data (as eg .csv file)

2. Use Matlab to run gmc_d3js.m which parses the GMC data (above) into the appropriate format (gmc_summary_d3js)

3. Add data from gmc_summary_d3js to gmc_radar.html - you may need to update lines c.118-124 depending on which analysis you wish to do

4. Run gmc_radar.html - I use WebStorm for this (which I thoroughly recommend) although any browser will do

Many thanks to Mike Bostocks D3.js and Wayde Herman's codementor community for inspiring this work.