Interactive Generic Visualization library for Javascript that is based on d3.js
{
"metadata":{
"names":["Country","Area","GDP","Inflation","Life.expect", "Military","Pop.growth","Unemployment"],
"types":['C', 'N', 'N', 'N', 'N', 'N', 'N','N']
} ,
"data": [
["Austria",83871,41600,3.5,79.91,0.8,0.03,4.2],
["Belgium",30528,37800,3.5,79.65,1.3,0.06,7.2],
["Bulgaria",110879,13800,4.2,73.84,2.6,-0.8,9.6],
["Croatia",56594,18000,2.3,75.99,2.39,-0.09,17.7],
["Czech Republic",78867,27100,1.9,77.38,1.15,-0.13,8.5],
["Denmark",43094,37000,2.8,78.78,1.3,0.24,6.1],
["Estonia",45228,20400,5,73.58,2,-0.65,12.5],
["Finland",338145,36000,3.3,79.41,2,0.07,7.8],
["Germany",357022,38100,2.5,80.19,1.5,-0.2,6],
["Greece",131957,26300,3.3,80.05,4.3,0.06,17.4],
["Hungary",93028,19600,3.9,75.02,1.75,-0.18,10.9],
["Iceland",103000,38100,4,81,0,0.67,7.4],
["Ireland",70273,40800,2.6,80.32,0.9,1.11,14.4],
["Italy",301340,30500,2.9,81.86,1.8,0.38,8.4],
["Latvia",64589,16800,4.4,72.93,1.1,-0.6,12.8]
]
}
| Property | Value | Description |
|---|---|---|
| title | String | Title of the table |
| mode | markers,normal,satellite | type of the map need to be drawn |
| pointColor | 0-(dataset.length-1) | column index which represents the color variable |
| pointSize | 0-(dataset.length-1) | column index for point size variable |
| region | LK,US.. or "ISO 3166-1 alpha-2" | region need to be drawn |
| pointLabel | 0 to (dataset.length-1) | column index of the dataset for text labels |
| width | px | width of the chart |
| height | px | height of the chart |
| chartType | map | Type of the chart |
| padding | px | Padding of the chart |
/******************************************************* Installation of the library ******************************************************/
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="igviz.css">
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type="text/javascript">
google.load('visualization', '1', {
'packages': ['map', 'geochart']
});
</script>
<script src="d3.min.js"> </script>
<script src="igviz.js"> </script>
/********************************************************** Invoking the Library **********************************************************/
<script>
//dataset used to plot charts
var dataTable = {
"metadata":{
"names":["Country","Area","GDP","Inflation","Life.expect","Military","Pop.growth","Unemployment"],
"types":['C', 'N', 'N', 'N', 'N', 'N', 'N','N']
},
"data": [
["Austria",83871,41600,3.5,79.91,0.8,0.03,4.2],
["Belgium",30528,37800,3.5,79.65,1.3,0.06,7.2],
["Bulgaria",110879,13800,4.2,73.84,2.6,-0.8,9.6],
["Croatia",56594,18000,2.3,75.99,2.39,-0.09,17.7],
["Czech Republic",78867,27100,1.9,77.38,1.15,-0.13,8.5],
["Denmark",43094,37000,2.8,78.78,1.3,0.24,6.1],
["Estonia",45228,20400,5,73.58,2,-0.65,12.5],
["Finland",338145,36000,3.3,79.41,2,0.07,7.8],
["Germany",357022,38100,2.5,80.19,1.5,-0.2,6],
["Greece",131957,26300,3.3,80.05,4.3,0.06,17.4],
["Hungary",93028,19600,3.9,75.02,1.75,-0.18,10.9],
["Iceland",103000,38100,4,81,0,0.67,7.4],
["Ireland",70273,40800,2.6,80.32,0.9,1.11,14.4],
["Italy",301340,30500,2.9,81.86,1.8,0.38,8.4],
["Latvia",64589,16800,4.4,72.93,1.1,-0.6,12.8]
]
}
var width = document.getElementById("map").offsetWidth; //canvas width
var height = 270; //canvas height
var mapConfig={
"title": "Map By Country",
"width": width,
"height": height,
"padding": 60,
"pointColor": 3,
"pointSize": 1,
"chartType": "map",
"mapLocation" : 0,
"mode" :"regions", // "markers"| "normal" | "satellite"
"region" : 150 // "LK" | "US" | "GB" ...
}
//draw a map within #map div
igviz.plot("#map",mapConfig,dataTable);
</script>