Category Archives: HTML5

A visual exploration of the Nobel Prize history

After some time in mind, finally I have got some free time to spend creating a web page to show the information related to Nobel Prizes.

After discovering Nobel Prize web site offers an API to query both prizes and laureates from the beginning of the history of the prizes I was thinking in the creating of a kind of dynamic infography to allow explore the information in a useful and simplified way.

A short description of the application

The goal of the application is to show the Nobel Prizes data in useful ways in addition to search laureates by filtering data. The application offers:

  • Colorpleth map: to see the number of laureates depending on the born or died country
  • Line chart, to show the number of prizes and laureates by year
  • Column chart, to show prizes and laureates grouped by category and
  • Column chart, to show how prizes are shared by laureates
  • Table, with laureates information (prize, year, category and motivation)

To filter information and reduce the amount of data in the laureates table, the idea is to go from top to bottom and select on each chart the desired information. This way, each time we select a country in the colorpleth map the rest of the charts and the laureates table are updated to show information related with that country. If we select a year in the line chart, the chart above it are updated to reflect the information for that year.

How was it made?

Once I had the idea I started exploring libraries to create the charts.

Initially I though in D3, which is an awesome and super powerful library, both to create the map and the charts. Unfortunately, D3 is too much low level library for my needs and I require to create my own little chart libraries to reuse components.

For the colorpleth map, after some exercises using D3 (from this nice post) I finally decide to make use of Leaflet, which is tiny JavaScript library specifically designed to make simple maps. Also I found a nice tutorial to create a colorpleth map that was a plus in my decision.

Next was to explore D3 derived chart libraries, like dc.jsnvd3 or morris.js. After some test I discard them because lake of need requirements or documentation to use them properly. The final choice was HighCharts, a really powerful library to create almost any kind of chart. It is really easy to create charts, add tooltips, control selection, etc and has a free license for non commercial apps.

Finally, I was thinking in the bottom laureates table. Initially I code it using a standard HTML table and adding and removing entries using jQuery. But after some headaches I change to DataTables which is a really powerful tool to create tables both from table tag or an external content loaded via AJAX.

Contribute

The Nobel Prize app is a simply exercise to test some different tools and try to produce a useful utility.

As always you can find the code at my GitHub account and contribute with improvements.

Related Posts:

SimplyWrite, a free web distraction writing tool

I like to write and I like programming so the obvious consequence were to write some tool to write. More or less this is the history of SimplyWrite.

SimplyWrite is a free web distraction writing tool that recognizes the lightweight markup language Markdown, an easy-to-read, easy-to-write plain format which allow to enrich the text.

Features

  • Auto show/hide of menus to allow a clean working area.
  • Show working and total timer. Total timer counts the time since you open SimplyWrite. Working timer counts the time you have set active the SimplyWrite page.
  • Count lines, words and characters.
  • Export your writes to a new page, ready to be saved.
  • Allow to configure font family and size.
  • SimplyWrite stores all your writes on the client side. It makes use of the HTML5 local storage feature so no server is required.

Be careful with this feature. You can lost your data if you manually clean the broswer cached data and also browser cleans the local storage area automatically when the space used grown over some value (like 500mb).

The source code of SimplyWrite is available at GitHub under MIT license. Feel free to contribute.

The Design

I would like to specially mention the fact the SimplyWrite design was made by my friend Guillem Sevilla (@gllmsvll) a great minimalism designer !!!

Technology

SimplyWrite has been a nice challenge for me. It gives me the opportunity to work with the next tools:

  • grunt, the awesome JavaScript task runner. It allows, among others, to minimize and concatenate files.
  • grunt-bbb, the grunt Backbone Boilerplate Build extension. Simplifies the work with Backbone framework.
  • backbone, a lightweight MVC framework.
  • backbone.layoutmanager, an extension of backbone to improve the work with views.
  • CodeMirror, an awesome code editor component for the browser.
  • Bootstrap, a front-end framework used for the UIX.

Related Posts:

Awesome clustered markers in Leaflet

Some time ago someone asked at gis.stackexchange.com for nice cluster marker implementation, both for Leaflet or OpenLayers, something similar to Redfin. A couple of weeks ago I discover a great implementation for Leaflet, the Leaflet.markercluster from Dave Leaver. Simply awesome !!!

Features

The Leaflet.markercluster plugin for Leaflet is documented enough on its web page, so I’m not going to repeat it here, but I would like to make a short summary of its features.

Add/remove marker

 We can easily add or remove marker with the methods addLayer and removeLayer. For example:

Events

We have available the events clusterclickclustermouseoverclustermouseout and zoomend to interact with the new layer.

Options

The Leaflet.markercluster plugin has some nice options, which by default they are set as:

  • maxClusterRadius: All the markers within this radius becomes a cluster.
  • iconCreateFunction: Allows to customize the icons for the clusters. (See more here).
  • spiderfyOnMaxZoom: When you click a cluster at the bottom zoom level we spiderfy it so you can see all of its markers.
  • showCoverageOnHover: When you click a cluster we zoom to its bounds.
  • zoomToBoundsOnClick: When you mouse over a cluster it shows the bounds of its markers.
To change the default values simply specify the values when instantiation the cluster group:

A short note

Many posts ago I write about Open Alternatives to Google Maps where I talk about the nice Leaflet project, finishing with the sentence: Believe me, put an eye on this project, it has many more to say. And seems this great marker cluster is one of that thins to say :) In addition, I was seeing lot of activity about the Leaflet project, much more than on OpenLayers.

Do not confuse please, I’m talking about activity related to news where many web pages are changing from Google Maps API to Leaflet. I know the OpenLayers community is make a great job, as always, on the next major release of the project, OpenLayers 3.0, with a great amount of improvements.

At this moment, the comparison between Leaflet and OpenLayers is something like comparing the clothes to go to run or an armor to go to a battle.  What I want to say is OpenLayers is a big and complex project but, because of this, it allows to do almost anything you can need in a GIS application. On the other hand Leaflet is a more agile and lightweight project, designed to to only a bunch of things. While OpenLayers allows to access tile server (TMS or WMTS), WMS, WFS, etc Leaflet is designed to access TMS (like OpenStreetMap, CloudMade tiles, etc).

The summary is Leaflet implements the 10% (to say a number) of things implements OpenLayers but that 10% is the required to do the most common things for a weg application.

Challenge !!!

Who wants to create an awesome cluster implementation for OpenLayers?

Related Posts: