Saneef Ansari, Designer & Photographer

Zen

Saneef — Mon, 16 Aug 2010 20:10:10 +0000

Canon EOS Kiss Digital X | Sigma 70-300mm F4-5.6 | 1/80 s | f7.1 | ISO100

“Conversations” – Sourcecode

Saneef — Sun, 08 Aug 2010 13:31:27 +0000

For the recent, IxDA Bengaluru Student Chapter Launch the collateral and signage are designed by friend Jonathan, triangulated graphs as design elements depicting – ‘Catalyst for conversations’. I made the animation of the triangulated graph using Processing, for projection during the event. I’m releasing the the source-code here (Conversations-100808a.zip) under MIT License.

The code is based on Processing PVector Class. People who are starting with Processing, this would be helpful.

Abandoned Stone Quarry

Saneef — Sun, 11 Jul 2010 17:31:57 +0000

Canon EOS Kiss Digital X | Canon EF-S 18-55mm f/3.5-5.6 USM | HDR

M S Palya Stone Quarry, Vidyaranyapura, Bangalore

Daikanransha

Saneef — Wed, 09 Jun 2010 13:05:14 +0000

Canon EOS Kiss Digital X | Canon EF-S 18-55mm f/3.5-5.6 USM | 1/40 s | f3.5 | ISO400

Palette Town in Odaiba, Japan.

New Dwellers

Saneef — Tue, 11 May 2010 19:26:39 +0000

Canon EOS Kiss Digital X | Canon EF-S 18-55mm f/3.5-5.6 USM | 1/50 s | f10 | ISO200

Oval Maidan

Saneef — Wed, 05 May 2010 13:48:11 +0000

Canon EOS Kiss Digital X | Canon EF 50mm f/1.8 II | 1/250 s | f13 | ISO100

Chaos

Saneef — Wed, 05 May 2010 13:44:01 +0000

20″ x 10″ graphic composition as part our Graphic Design course. The composition started with making ink impressions using a nylon net. Then the impressions were scanned and interesting forms where selected later enlarged. The form on the right was made from the parts of the those forms. Finally the form together with the typographic grid laid out.

Old space

Saneef — Wed, 05 May 2010 13:33:55 +0000

Previously I had posted my photographs on my photoblog named Phoogler. I’ve decided to wrap it up and to post all my works here at Saneef.com. From now on you can check this space for my photographs.

Visualization Tutorial: Number of living languages

Saneef — Mon, 15 Mar 2010 08:56:07 +0000

This was my ‘Hello World’ program to data visualization. I started looking for some interesting data to visualize. After many days of lazy search, I decided start with small set of data. Finally locked on showing number of languages alive (Currently spoken) in each country. I’ll take you through the steps I followed. If you find something wrong in my steps, please give me suggestions to improve.

Step 1: Data Collection

Data. That’s free on net! Five minutes of search lead me to Ethnologue; where all of the world’s 6,909 known living languages are cataloged. I don’t need the whole data, only took the name of the country, ISO code for the country and count of the languages alive, and made into an Excel Sheet. You can download it from here.

Step 2: Method for Visualization

I googled for a easier way to represent this data. Went through Processing.js, Google Visualization APIs, Open source flash maps. I finally settled with Google Visualization API’s Geomap. Main reason, its is damn simple to visualize tabular data.

It’s a javascript API, so we can easily fed data by the help of a few lines of code.

Step 3: Setting up the data as a ‘Data source’ for the Google Visualization API

As you can see in the example, we can supply data using hardcoded values. But in my case there is lots of values, which I can’t hard code. So, I decided on passing the data to the API through JSON/XML. I exported the data sheet into as CSV file. Then imported CVS into a MySQL table (How-to put CVS into MySQL), where I can access using PHP to generate JSON or XML if required.

With this piece of PHP code I generated JSON from the table:


$username="database_user";
$password="database_password";
$database="database_name";
 
$link =  mysql_connect("database_host",$username,$password);
if (!$link) {
    die('Could not connect: ' . mysql_error());
}
//echo 'Connected successfully';
 
@mysql_select_db($database) or die( "Unable to select database");
$query = "SELECT * FROM country_list";
 
$result = mysql_query($query);
 
$country_json = array();
 
while($data_item = mysql_fetch_array( $result ))
{
	$country_json[] = array(
		'country_name' =>$data_item['country'],
		'iso_code' => $data_item['iso_code'],
		'speaking' => $data_item['speaking'],
		'total' => $data_item['total'],
		);
} 
//print json_encode($country_json);
 
header('Content-Type: text/javascript; charset=utf8');
$json= '('.json_encode($country_json).');'; //must wrap in parens and end with semicolon
print_r($_GET['callback'].$json); //callback is prepended for json-p
 
mysql_close();
?>

The generated JSON can be seen here.

Step 4: Setting Up the Google Visualization API

Here is the code for the HTML page.

>
>
   type='text/javascript' src='http://www.google.com/jsapi'>>
   type='text/javascript'>
    google.load("jquery", "1.4.2");
    google.load('visualization', '1', {'packages': ['geomap']});
 
    google.setOnLoadCallback(init_map);
 
    function init_map(){
      $.ajax({
        url: 'country_list_json.php',
        success: drawMap
      });      
    }
 
    function drawMap(incomingdata) {
      json_data = eval(incomingdata);
      var data = new google.visualization.DataTable();
 
      data.addRows(json_data.length);
      data.addColumn('string', 'Country');
      data.addColumn('number', 'Number of Languages');
      data.addColumn('string','HOVER', 'Details');
      for(i=0;i;i++){
        data.setValue(i, 0, json_data[i]['iso_code']);
        data.setValue(i, 1, parseInt(json_data[i]['speaking']));
        data.setValue(i, 2, json_data[i]['country_name']);
      }
 
 
      var options = {};
      options['dataMode'] = 'regions';
      //options['width'] = '605px';
      //options['height'] = '362px';
      options['colors'] = [0xffe4da,0xcd3700];
 
      var container = document.getElementById('map_canvas');
      var geomap = new google.visualization.GeoMap(container);
 
			google.visualization.events.addListener(
	      geomap, 'regionClick', function(e) {
	      //alert(e['region']);
	      window.open ("http://www.ethnologue.com/show_country.asp?name="+e['region']); 
	    }); 
 
      geomap.draw(data, options);
  };
  >
>
 
>
   id='map_canvas'>>
>
>

Here, I uses jQuery AJAX [ $.ajax() ] to get the JSON and fed one by one to Data Table of Geomap API [ data.setValue() ]. Once the values are loaded, call the draw function [ geomap.draw() ] . Tada! Here we have an density map of the world based on number of living languages in each country; plus hovering over country gives the number of languages in that country and when clicked will takes us to the country page in Ethnologue.com.

Your browser doesn’t suppor iframes.

Data Source: Lewis, M. Paul (ed.), 2009. Ethnologue: Languages of the World, Sixteenth edition. Dallas, Tex.: SIL International. Online version: http://www.ethnologue.com/.

Comparison of Various Design Prototyping Methods

Saneef — Fri, 11 Dec 2009 12:38:58 +0000

Here, I am trying to compare the various prototyping methods based on their ‘Interactivity / Testability’ vs. ‘Communication of an Idea’.

Comparison of Various Design Prototyping Methods - Interactivity/Testability Vs. Communication of an Idea

By ‘Testability’ I mean, how effectively that prototype can be tested with the users. and by ‘Interactivity’, the extent to which a prototype can relate to the final product in the interaction.

With the ‘Communication of an Idea’, I mean ‘How precisely an idea can be communicated?’.

Based on these factors, we can choose which prototype can be used for pitching or can be used for usability testing etc.