Data Visualization Analysis – Syria at Night

Background

This is very high level visual map of Syria at night (credit to @nytgraphics for the image) . The left part of image is just before the civil war began, the right part of the image shows the current state of the civil war in Syria.

The visual aims to draw a comparison between life before the civil war and the current state of Syria. It also highlights the impact that the civil war has had on the inhabitants of Syria. The difference is evident when the right side shows reduced human activity at night.

Embedded image permalink

Syria at Night

Qualities

1. Robustness – 50-50/Maybe.

In terms of understanding the context of the users, the visual assumes that people know about the civil war and the conflict in Syria. So it may not be as “self-explanatory” for someone that has no context of the Syrian civil war.

To experiment this, I performed an interview with a middle-aged couple in regards to this visual. This couple was unaware of the Syrian conflict, so they fit my profile very well. Here is a quick paraphrase of said interview:

Couple: “It looks like there is a clear difference in human activity in Syria between March 2012 and December 2014.”

Me: “What about the visual makes you say that?”

Couple: “Well, there are less lights on the December 2014 side of the map than the March 2012 side.”

Me: “Why do you think there are less ‘lights’ in the after map?”

Couple: “Well, it’s because people no longer could be living there. There could have been issues with electricity. People could have died.”

Me: “What could have caused the absence of so many people?”

Couple: “There could have been several causes. There could have been a natural calamity. There could have been war.”

So, it looks like the interview served its purpose. If people dig a little deeper and do something like the 5 why’s analysis (which is what I did in the interview above – well maybe 3 why’s :D) – they could arrive at the conclusion themselves.

2. Type of Visual – Yes

A map of Syria is a very good visual to use, since the author is attempting to explain the difference in residency before and after the Syrian civil war.

3. Getting rid of Clutter – Yes

There is virtually no clutter. All the image is satellite image at night of Syria, which effectively represents a data map of all the human activity still in the country.

4. Drawing Attention – Yes

It definitely draws the attention of the user. If the user already knows about Syrian Civil War, they will understand the gravity of the impact that it has had on the inhabitants of Syria in just a year and a half. If the user is unaware of the conflict, it will pique their curiosity on why the human activity has reduced so drastically in such a short period of time.

5. Story – 50-50/Maybe

It gets across one thing really well. Something happened that drastically reduced the human population in Syria in just a matter of 21 months. But it doesn’t exactly say what that something is.

Exploratory or Explanatory

The visual is both exploratory and explanatory. It is explanatory in that it attempts to visualize activity of inhabitants using a map of Syria. But it also is exploratory as it guides the user to question “Why?” or “What is the root cause?”, especially if they are unaware of the Syrian conflict.

In conclusion, I would suggest an enhancement to the image to completely tell the story. At the top of the image, replacing “Syria at night” with “Syria at night before the civil war (March 2012) and now (December 2014)” would tell the complete story of the image.

First Real Post

Well, it’s about time huh? This is my first real post, and guess what it is about? Code. As much as I hate it (not really), it is about code.

I have a <div> that pops up for selection. I will update this with an image later.

What I wanted to do was if I clicked anywhere outside of that <div>, I want to be able to close the div.

To do this, in my showDiv function, I did a quick bind to the click event for the entire page (‘html).

$('html').click(function() {
//Hide the div
$("#myDiv").hide();
});

Then following that code, I used a little bit of jQuery magic to stop the event from occurring if I clicked within that <div>.

$('#myDiv').click(function(event){
    event.stopPropagation();
});

The solution looks like this. Try it out and let me know what you think!

Credit to @Eran Galperin for the solution on Stack Overflow.

Introducing!

Hello there! My name is Maanas. If you want to read more about me, please feel free to follow to my about section here.

This is my first blog post and the first of many more to come. I think I have finally made a commitment to join the masses to blog and discuss several topics that include (but are not limited to) computers, development, politics, economics, music, guitars and sports.

Thanks for visiting. I hope you join the revolution by continuing to read, comment and get involved!