Added info modal with documentation and the license, and updated glob…

…e assets.

README.md

@@ -1,17 +1,5 @@
 # Living Globe
 
-**This project is still under development. The following features will be added
-with v2:**
-- **configurable view-to-indicator mappings;**
-- **annually-gathered data, along with a year-slider;**
-- **improved textures.**
-
-**Meanwhile, you can check the [current stable version v1.0.1](https://cdn.rawgit.com/edduarte/living-globe/master/index.html).**
-
-![Screenshot](screenshot.png)
-
-## Description
-
 Living Globe is an application for tri-dimensional worldwide demographical data
 visualization. It allows the simultaneous representation of multiple
 indicators, like total population, density, population-growth, life expectancy,
@@ -23,10 +11,32 @@ represented data is normalized within an adjustable scale. This can be used to
 filter out extremely high or extremely low samples, uniforming the remaining
 data and improving its visibility.
 
-The results from preliminary testing indicate that the data filtering and
-customizable mapping features encourage the fast reading of relational
-information. Moreover, this tool improves on previous state-of-the-art work by
-implementing interaction capabilities like selection, search and filtering.
+**[DEMO](https://cdn.rawgit.com/edduarte/living-globe/master/index.html)**
+<br/>
+
+![Screenshot](screenshot.png)
+
+## Description
+
+Living Globe allows the visual exploration of the following demographics data: population, population density and growth, birth and death rates, life expectancy, migration flow, crude mortality and crude birth rates. It is targeted to users having at least a minimum of computer and statistics literacy. While offering unexperienced users a default mapping of these data variables into visual variables, Living Globe allows more advanced users to select the mapping they intent to use. This means that these users have the possibility of control over an earlier stage of the visualization reference model (Riccardo Mazza. Introduction to information visualization. Springer-Verlag London, 1, 2009) making Living Globe a more flexible tool.
+
+In order to support this feature, three visual variables may be selected to map a data type: i) height of vertical bars (directly proportional to the data value) ii) color of vertical bars (in a color scale ranging from blue to yellow) and iii) color of the countries on the globe (in a scale ranging from red to green). An adequate selection of the data variables and their mapping to the visual variables may help the identification and study of potential relations among data variables. The time interval may be selected using a slider.
+
+Living Globe also offers the following functionality: i) configuration of minimum and maximum data values that should be visualized; ii) textual search, with dynamic suggestion of the countries names; and iii) country selection. The former functionality is important, for instance, to improve the visualization of data in countries with small samples (eg. Portugal) by filtering out countries with large samples (e.g. China).
+
+## Evaluation
+
+The usability of this tool was tested by agnostic individuals, and the results
+indicate that the data filtering and customizable mapping features encourage a
+faster interpretation of relational information. Moreover, this tool improves
+on previous state-of-the-art work by implementing interaction capabilities like
+selection, search and filtering.
+
+## Future Work
+
+- allowing the user configuration of the color scales;
+- remove dependencies on demographic data, making Living Globe a generic API that allows the input of any kind of data.
+
 
 ## License
 

css/base.css

@@ -137,6 +137,13 @@ table.right {
     font-size: 12px;
 }
 
+#infoButtonContainer {
+    position: fixed;
+    margin: 5px;
+    top: 0;
+    right: 0;
+}
+
 #search {
     width: 240px;
     position: fixed;
@@ -255,3 +262,80 @@ table.right {
     display: block;
     border-bottom: 1px solid #000;
 }
+
+#parameters .noUi-handle {
+    border: 1px solid #D9D9D9;
+    border-radius: 3px;
+    background: #FFF;
+    cursor: default;
+    box-shadow: inset 0 0 1px #FFF,
+    inset 0 1px 7px #EBEBEB,
+    0 3px 6px -3px #BBB;
+}
+
+/* SQUARED THREE */
+.customCheckbox {
+    width: 20px;
+    margin: 20px auto;
+    position: relative;
+}
+
+.customCheckbox label {
+    cursor: pointer;
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    top: 0;
+    border-radius: 4px;
+
+    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,.4);
+    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,.4);
+    box-shadow: inset 0 1px 1px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,.4);
+
+    background: -webkit-linear-gradient(top, #fff 0%, #fff 100%);
+    background: -moz-linear-gradient(top, #fff 0%, #fff 100%);
+    background: -o-linear-gradient(top, #fff 0%, #fff 100%);
+    background: -ms-linear-gradient(top, #fff 0%, #fff 100%);
+    background: linear-gradient(top, #fff 0%, #fff 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#fff',GradientType=0 );
+}
+
+.customCheckbox label:after {
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+    filter: alpha(opacity=0);
+    opacity: 0;
+    content: '';
+    position: absolute;
+    width: 9px;
+    height: 5px;
+    background: transparent;
+    top: 4px;
+    left: 4px;
+    border: 3px solid #545551;
+    border-top: none;
+    border-right: none;
+
+    -webkit-transform: rotate(-45deg);
+    -moz-transform: rotate(-45deg);
+    -o-transform: rotate(-45deg);
+    -ms-transform: rotate(-45deg);
+    transform: rotate(-45deg);
+}
+
+.customCheckbox label:hover::after {
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
+    filter: alpha(opacity=90);
+    opacity: 0.9;
+}
+
+.customCheckbox input[type=checkbox]:checked + label:after {
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+    filter: alpha(opacity=100);
+    opacity: 1;
+}
+
+.customCheckboxLabel {
+    cursor: pointer;
+    font-size: 13px;
+    color: #bbb;
+}