Scuba Diving dashboard using Google Data Studio

As a scuba diver, I log all my dives in a dive log. For most divers, this is just a simple notebook, but some years ago, I started to also enter my dive in a simple Google Sheet.

After playing a bit with charts and the “Explore” feature of Google sheet to answer questions like “max depth” or “number of dives per regions”, I decided to create a dashboard to better showcase some dive stats and visualizations. While you can put some charts and numbers on a new sheet in Google sheet, I think it is not really designed for this. I preferred to keep Sheet as a database and to pull this data from  somewhere else.

Using Google Data Studio, I could add my dive log sheet as a data source and then put interesting visualizations and stats on a new canvas. Here is what I think make Data Studio a great tool:

  1. It’s free. I would not have paid to build a hobby dashboard.
  2. Custom themes and colors
  3. Filters: I added interaction by allowing visitors to filter by date, location, dive center…
  4. The tool makes it very easy to position things on a 2D canvas.

See my dive dashboard and log built on Google Data Studio

The tool has its limit and will not replace a real dive log. Building a better dive log and dashboard would definitely require some code (a long time ago I started but never finished).

Diving project: icons

The diving project is progressing well, I suspect a first release for you to test in the coming days.

I need icons for the dive types and locations, it’s a call for participation.


  • altitude
  • cave
  • deep
  • drift
  • ice
  • night
  • search
  • wreck


  • sea and ocean
  • lake
  • cave
  • river
  • quarry

Anne accepted to give me a little help on this. If you want to participate, let us know in the comments. We would like to hear your suggestions too.

Its possible that the Open Clipart library can help. But I would like a consistent design across all icons.

I don’t know yet if they should be symbols (silhouettes), simple drawings or colored complex drawings. I think it will be hard to find symbols that differentiate them well, and they might be hard to understand.

They will be 72 x 72 px. They will be on a white background.

The Chrome Store or Android or Tango icon guidelines are a great resources to understand what makes a great icon.

They have to share the same palette and the same global shape. They can be build with the same background to add coherence.

It would be nice if they were done using the .svg file format (using Inkscape for example).

Call Wikipedia API using jQuery

I decided to directly use the data from Wikipedia. Many pages contain a structured “Infobox” that I will use to gather information I need.

There is a Wikipedia API (more precisely, MediaWiki, the engine of Wikipedia, has an API). I invite you to read the documentation.

Here are some examples of what can be done using the javascript library jQuery:

  • get the source of a page (API doc):
    $.getJSON("", {titles:pageName, prop: "revisions", rvprop:"content"}, wikipediaPageResult);
  • get the image names of a page (API doc):
    $.getJSON("", {titles:pageName, prop: "images"}, wikipediaImageResult
  • get the HTML formatted content of a page (API doc) (does not follow redirects)
    $.getJSON("", {page:pageName, prop:"text"}, wikipediaHTMLResult);

It is important to note the needed “&callback=?” in the query (it will tell jQuery to use JSONP, a way to do cross-site javascript call), thanks to stackoverflow for this tip.

Note that to get the HTML content of a wiki page using javascript from the browser, I cannot use the “action=render” parameter of index.php because of the Same Origin Policy. I had to use the API to do it client side. I think I will rewrite my system to do this call server-side.

In the end, check my gist on github to get the full code of how to import a Wikipedia Page in javascript.

My fish database

For my diving project, I will need a small fish database.

  • I don’t want an exhaustive database (most common fishes will be OK).
  • I don’t want to replicate an existing database, if it exists, then I should pull data from it.
  • If my database is built collaboratively, I don’t want this process to be hard to do.
  • I’m a Wikipedia enthusiast, and I want people to contribute to Wikipedia.
  • My website is internationalized, however, I want a fishes to be shared between languages.

So I think a great system would be:

  1. Is the fish in my database ? If yes, use it.
  2. If no, look for its wikipedia page. If you find it, then create the fish in my database using this Wikipedia URL, and go to 1.
  3. If the wikipedia page doesn’t exist, create it, then go to 2.

Let’s analyse this system:


  • enrich Wikipedia
  • do not duplicate the information
  • a lot of data already exists


  • Wikipedia pages are text and do not provide an easily callable API for entity properties (but fish pages contain a Taxobox, which would facilitate the parsing)

So far, I have to investigate:

  • Wikipedia: how to get the page content ?
  • Freebase: is it not too much ?
  • dbpedia: API ? fishes ?
  • : license ? API ?

And if I use a third party website (such as Freebase, dbpedia), then a problem is that I would have to wait for their database to be updated.

Open Divers: How is it done?

It all starts with some drawings: first the a few screens of what the website should roughly look like. And then the data model, to get an overview of all the entities of the website, and their relations. Have a look, you will see that objects are very linked:

Current Data Model of the website

I’m developping using Play! framework. It is a very efficient Java web framework, where you focus on getting things done. I can assure you it’s not traditional Java (servlets and all) and that when you start feeling comfortable with it, you can build a clean website very quickly. If you are a web developer who wants to try something refreshing, you should give it a try. (I think you can compare it to RoR, Jango or Symfony)

I first start by defining the objects (Models) of the platform, and relations between them. The framework uses JPA to automatically create the underlining database.

Then I define actions in Controllers to display and edit this data: “show dives”, “explore”, “login” are example of actions.

Finally, I create the different pages (the Views) using HTML and the templating engine. I first used some code from HTML5 boilerplate to start building on something clean. I use some Javascript (with the jQuery library) to perform dynamic actions on the client side (messages that disappear, pop-up layers for login…). I also use jQuery UI for some widgets (a date picker, an accordion for the dive edition page) and the Google Maps Javascript API to display satellite maps. (I really needed satellite imagery, so I cannot use OpenStreetMap data).

I did not found the time to write unit tests, functional tests or front end tests, this is very bad. It will be the first thing I do when I start working on the project again.

There is still a lot to do, it’s a first version, let’s add on top of it. Check out the screenshots from yesterday’s post.

Open Divers: first screen

After a few days of work, I now have a first version of the project. Here are some screen captures:

Basically I’ve got the dive and spot system working. Other entities (such as trips, divers, diving centers) are here but we cannot interact with them yet.

I’m very sorry but you cannot try it yet, the structure may evolve and you would be disappointed if all your data were lost.

I spent time talking with divers and gathering feedback from you, readers. Thanks again.

As I said before, I will now pause this project for a week, to focus on Beansight. A post with technical details is coming.

First project: Open Divers

I’m back from a week on the red sea in Marsa Shagra, Egypt. We did mostly scuba diving (2 or 3 per day). Check my pictures on flickr. And with this first project, I decided to stay a little longer in the scuba diving world.

Let’s start this diving project!

The idea

I am a passionate diver with around 70 dives. Since my first dive, I’ve been writting them  down in a paper dive log. Every diver is doing so. Last summer, I was wondering what it could look like if it was a digital dive log.

Basically, I wanted an online place to put my personal dives.

Of course, if we put together all these dives of the many divers around the world, it could lead to a large amount of data about diving spots. (what can be seen at a particular location, what diving center to contact, difficulty of the dive…) And thus be a huge knowledge base.

Moreover, I want to stay in touch with other divers I met, I want to explore where they have been diving in the world, I want to connect with diving centers before my trip. It will thus have social functions. A social networks of divers, of sea lovers.

Done 100 times

Of course, I was sure this had been done by others. I started looking at existing solutions. My conclusion is simple: there are many online dive logs, but many of them suffer from a bad user experience, and none succeeded in attracting me. They do not merge data to create something larger. There are also many dive spot encyclopedia, and none of them is open data, most of them do not offer a pleasant way to browse spots…

I didn’t find the experience I have in mind. That’s why I will build it.

Let’s do it

My plan is to build something in a 2 weeks timeframe, starting today. I will post regular updates on this blog and more frequent updates on twitter (@sterenlabs).

How can you help ?

If you are a beginner or experienced diver or not at all, I would love to hear what you think about the project in the comments of this post. What would you expect in such a platform? Your ideas and suggestions are welcomed.

If you know and use an existing website that does the same, please let me know.

I’m also still looking for a name. It’s hard because many domain names mixing diving words are already taken (“dive”, “log”, “wiki”, “bubble”) and we tend to forget them because they are not original. I really want something people will remember easily. I like quite well “opendivers“, but I’m not convinced (and the .com is selling at 1200$). I wanted also “globglob” (if you get the reference), but the .com is taken.


Here is what will drive my work in the next weeks:

  • Adding an entry should be pleasant: basic parameters (location, depth, time and date) but also strong emphasis on what has been seen, on who I dove with.
  • Fishes and things I’ve seen could be added by drag and dropping icons from a library (I do draw on my dive log, I think it’s important to visualize things).
  • No need to be too technical. Users will be able to fill in technical details, but they are optional (the track of the dive from my computer…)
  • I can upload photos of my dive and tag things in them.
  • It is not a social network of friends, it is a network of divers. I am linked to you because we dove together once or we met at a diving center.
  • I can group a set of entries into a “trip”.
  • On my profile page, I enter my info. (my levels, my gears), it is public.
  • On my profile page, there are nice statistics : map of the world where I dove, badges if I’ve seen many manta, if I’ve done many wreak dives…
  • I can print a nice dive log of my dives.
  • I can always export all my data in many formats.
  • Content is gathered and dive spots can be browsed (from a map or by country).
  • On a dive spot page, we can see fishes people have seen the most, there are pictures of dives + info can be added (comments, a drawn map of the spot).
  • Diving centers could have their pages, and be linked to dive spots, to my dives and levels…
  • non-personal data is licensed under a permissive license such as CC-BY-SA
  • I can add an entry, even if I’m not online (need to build offline mobile apps that synchronize with the service)