Thursday 26 November 2015

SVG with RaphaelJS - Conclusion

So we have reached the end. The bulk of this series was written after I had an accident in January and had to learn how to walk again in February. Writing this series took my mind off the pain. I pulled through okay and was back on my feet again.

I have covered what I know with Scalable Vector Graphics (SVG). I wish I knew more but this covers the limits of my knowledge.

There is so much I didn't cover. On where to go from here, please check out Snap.svg as its the latest library from the creator of RaphaelJS.

Today is Black Friday 34 days from now we will be in a new year. Thank you for sticking with me through this series.

 I wish you health, wealth and happiness in this great gift called life.

Tuesday 17 November 2015

SVG with RaphaelJS - Creating Interactive Maps Part 2

Welcome to a new month.

Its been a while since I last posted anything on this blog. This month, I intend to bring this series to a close. We ended with a pathfile for the interactive map for Liberia.

This month, we bring this to an end. Before we start, you can view all our files from our repository. In looking at our repository, we have obtained our path.js file.

Our task now is to parse the path.js file and display our interactive map. The code to do this is shown below:

$(function(){ var r = Raphael('map', 500, 500),
    attributes = {
      fill: '#fff',
      stroke: '#3899E6',
      'stroke-width': 1,
      'stroke-linejoin': 'round'
    },
    arr = new Array();

  for (var region in paths) {
    var obj = r.path(paths[region].path);
    obj.attr(attributes);
    arr[obj.id] = region;

    obj
    .hover(function(){
      this.animate({
        fill: '#1669AD'
      }, 300);
    }, function(){
      this.animate({
      fill: '#FFFFFF'
      }, 300);
    });

    $(obj.node).qtip({
      content: { text: 'Name: ' + paths[arr[obj.id]].name },
      style: {
        background: '#000000',
        color: '#ffffff',
        border: { width: 6, radius: 3, color: '#ff0000' }
       },
      position: {
        my: 'left center',
        at: 'bottom center',
        target: 'mouse',
        adjust: { x: 20, y: 25 }
      }
    });
  }
 
r.setViewBox(0, 0, 1000, 1000, true);
});

In total, we have 44 lines of code. I will walk you through it. On line 1 we instantiate jQuery. jQuery is an excellent way to get access to the DOM elements of a webpage.

Next we declare our paper as a variable r. The code snippet to do this is shown below:

var r = Raphael('map', 500, 500),

attributes = { fill: '#fff',
stroke: '#3899E6',
'stroke-width': 1,
'stroke-linejoin': 'round'
},
arr = new Array();
Next we loop through the paths array. The for loop iterates through each and every object that makes up the interactive map.

obj .hover(function(){
this.animate({
fill: '#1669AD'
}, 300);
}, function(){
this.animate({
fill: '#FFFFFF'
}, 300);
});

The above block of code makes the particular object in the map change colour when the mouse is placed over it.
$(obj.node).qtip({ content: { text: 'Name: ' + paths[arr[obj.id]].name },
style: {
background: '#000000',
color: '#ffffff',
border: { width: 6, radius: 3, color: '#ff0000' }
},
position: {
my: 'left center',
at: 'bottom center',
target: 'mouse',
adjust: { x: 20, y: 25 }
}
});
}

The above code uses the Qtip library to place a tooltip on the object on mouse over.

Finally, we resize the map on the paper by reducting its size. The code to do this is shown below:

r.setViewBox(0, 0, 1000, 1000, true);

At the end, we have an interactive map of Liberia. You can view it here. So we have reached the end.

Wednesday 15 July 2015

SVG with RaphaelJS - Creating Interactive Maps Part 1

Welcome to this section of the weekly series SVG with RaphaelJS. This week we will be going into the creation of interactive maps.

My country of focus for this will be Liberia. Liberia has suffered from the scourge of the Ebola virus and has been in the news. To this end, I have decided to do this tutorial with a focus on Liberia. The principles here can be extended to any country of your choice.

First Things First

You must understand the process of creating an interactive map of a country is classed under Data Visualization. As a result, I will use the process of creating Data Visualization to explain what I am doing.

The process of Data Visualization is listed below:

  1. Acquire
  2. Parse
  3. Filter
  4. Mine
  5. Represent
  6. Refine
  7. Interact
Acquire

We start the process of Data Visualization by obtaining the data we want to visualize. In our case, we what to visualize Counties in Liberia. This is a lot like saying State in Nigeria or Regions in Ghana. To do this, we must do a Google search for SVG map of the Counties in Liberia.


Fortunately, the first result is what I am looking for. You click on the link and you should see this page.


It contains a link to all the SVG files for the 15 Counties in Liberia. So what you need to do is open each of the maps in a new tab. I prefer to do this because the SVG maps are coloured and their counties are named. I prefer to do this because the SVG maps are coloured and as a result you could quickly look at the markup and find which county fits which by looking at the SVG file.
Please remember that SVG is an image file represented by text. So by studying the styling of the maps, you can guess which one belongs to a particular county.
When you open any of the tabs for the maps, you should see the following:

So click on the download link and select full resolution from the popup displayed.

Once you have all 15 county maps on your machine, the hardwork starts. Do remember that your files must be in the SVG format. Please read up on the SVG format if you don't understand it.

Parse
Here the goal is to provide some structure into the data's meaning and order it into categories. For our purposes, parsing will be done manually. Open all the 15 SVG files using your text editor and view the source code that generates the images.

Personally this is the hard part. You want to look at all the 15 files and try to isolate their commonalities. What you really want to watch out for is the style attribute. In each of the maps, one county is red. The goal is to understand the structure of the SVG file.

In order to extract a path, we need to get the values of each path for the county. To do this, use the browser window to extract the source of the SVG image by clicking on the map.


Of particular interest in unraveling the secret of this map is to look for the attribute for a path. This is shown below:

Copy your d value for the county in question and save it in a file called path.js. Use the following format.
pathNumber:{
name: "",
path: ""
}

Filter
The goal is to remove all but the data of interest. For our map, we intend to isolate only the paths that will give us the counties. This is where the data is unique to this project. Find the path value for the red outlined SVG shape and select it. Note that each path belongs to a County in Liberia. So note the County name and associate it with the path it belongs to.
Follow the format given above for all the 15 counties in Liberia. In the end, we have a path file which has the paths for all the Counties in Liberia. With this file, we will create the map of Liberia. Next time, we will look at making the map interactive.
The complete path file for Liberia is available at the GitHub repository for this course. You can download it from there.
Next week, we will use this file to create an interactive map of Liberia.

Conclusion
So we have come to the end of this week's section of the SVG with RaphaelJS series. We have learned how to extract the paths the administrative divisions of a country.
My challenge to you is to use this knowledge and create the path file for your country. 

Have a great week.