Commits

petraszd committed cb19dda

Start of slider

  • Participants
  • Parent commits 0f77ecc

Comments (0)

Files changed (3)

 </head>
 <body onload="initialize()">
   <div id="everything">
-    <h1>Title</h1>
+    <h1>Bankrotai Lietuvoje</h1>
     <div id="map"></div>
     <div id="canvas"></div>
     <div id="date"></div>
 var CFG = {
-  scatttering: 20.0,
-  fillColor: '#333',
+  scatttering: 40.0,
+  fillColor: '#122F24',
   growAnim: 150,
   opacityAnim: (1000 / 5) * 8,
   stepLength: 1000 / 5,
   initR: 2,
   multR: 1.5,
   w: 600,
-  h: 400
+  h: 420
 };
 
 var map;
 var step;
 var timer = 0;
 var paper;
+var slider;
+var sliderX = 0;
+var pointCache = {};
+var circles = [];
 
 function createMap () {
   var mapOptions = {
-    center: new google.maps.LatLng(55.316643, 23.752441),
+    center: new google.maps.LatLng(55.176643, 23.752441),
     zoom: 7,
+    disableDefaultUI: true,
     mapTypeId: google.maps.MapTypeId.ROADMAP
   };
   var map = new google.maps.Map(document.getElementById("map"), mapOptions);
-
-  var ne = new google.maps.LatLng(54.131868846391754, 26.276549886718726);
-  var sw = new google.maps.LatLng(56.244876034628, 21.695251058593726);
-  var bounds = new google.maps.LatLngBounds(sw, ne);
-  map.panToBounds(bounds);
-  map.fitBounds(bounds);
-
   return map;
 }
 
+function getRadius (nJobless) {
+  return CFG.initR + Math.sqrt(nJobless) * CFG.multR;
+}
+
 function getPixelPoint (x, y) {
   var gMapPoint = new google.maps.LatLng(x, y);
-  var pos = map.getProjection().fromLatLngToPoint(gMapPoint);
 
-  //var pos2 = overlay.getProjection().fromLatLngToDivPixel(gMapPoint);
-  return overlay.getProjection().fromLatLngToContainerPixel(gMapPoint);
+  var pos = overlay.getProjection().fromLatLngToContainerPixel(gMapPoint);
+  //var pos = overlay.getProjection().fromLatLngToDivPixel(gMapPoint);
+  pos.x = pos.x + (Math.random() - 0.5) * CFG.scatttering;
+  pos.y = pos.y + (Math.random() - 0.5) * CFG.scatttering;
+
+  return pos;
 };
 
 function next () {
   var points = data[step];
   step++;
+  slider.attr({x: (step / data.length) * (CFG.w - 32)});
 
   if (!points || !points[1]) {
     clearInterval(timer);
 
   changeText(points[0]);
 
-  var h = 0;
   for (var i = 0, p; p = points[1][i]; ++i) {
-    h += p[2] / 30.0;
-
     var pos = getPixelPoint(p[0], p[1]);
     var radius = p[2];
-    var x = pos.x + (Math.random() - 0.5) * CFG.scatttering;
-    var y = pos.y + (Math.random() - 0.5) * CFG.scatttering;
-    var circle = paper.circle(x, y, 1).attr({fill: CFG.fillColor});
+    var circle = paper.circle(pos.x, pos.y, 1).attr({fill: CFG.fillColor});
     circle.animate({r: CFG.initR + Math.sqrt(p[2]) * CFG.multR}, CFG.growAnim, "<", function () {
       this.animate({opacity: 0.0}, CFG.opacityAnim, ">", function () { this.remove(); });
     });
   overlay = new google.maps.OverlayView();
   overlay.draw = function() {};
   overlay.setMap(map);
-  paper = new Raphael(document.getElementById("canvas"), CFG.w, CFG.h);
+  paper = new Raphael(document.getElementById("canvas"), CFG.w, CFG.h + 20);
+
+  paper.rect(0, CFG.h, CFG.w, 5).attr({'fill': '#05291B'});
+
+  slider = paper.rect(0, CFG.h - 7, 30, 20, 10).attr({'fill': '#05291B'});
+  slider.drag(onSliderMove, onSliderStart);
 
   step = 0;
   timer = setInterval(next, CFG.stepLength);
 function changeText (newText) {
   dateDiv.innerHTML = newText;
 }
+
+function onManualStep() {
+  var points = data[step];
+  changeText(points[0]);
+
+  for (var i = 0, c; c = circles[i]; ++i) {
+    c.remove();
+  }
+
+  generateStaticCircles(points, 1.0);
+  if (step - 1 >= 0)  {
+    generateStaticCircles(data[step - 1], 0.75);
+  }
+  if (step - 2 >= 0)  {
+    generateStaticCircles(data[step - 2], 0.5);
+  }
+  if (step - 3 >= 0)  {
+    generateStaticCircles(data[step - 3], 0.25);
+  }
+  if (step - 4 >= 0)  {
+    generateStaticCircles(data[step - 4], 0.1);
+  }
+}
+
+function generateStaticCircles (points, alpha) {
+  for (var i = 0, p; p = points[1][i]; ++i) {
+    var key = '' + step + ':' + i;
+    var pos;
+
+    if (pointCache[key]) {
+      pos = pointCache[key];
+    } else {
+      pos = getPixelPoint(p[0], p[1]);
+      pointCache[key] = pos;
+    }
+
+    var circle = paper.circle(pos.x, pos.y, getRadius(p[2])).attr({
+      fill: CFG.fillColor,
+      opacity: alpha
+    });
+    circles.push(circle);
+  }
+}
+
+function onSliderStart() {
+  sliderX = slider.attr('x');
+  clearInterval(timer);
+}
+
+function onSliderMove(dx) {
+  var newX = sliderX + dx;
+  step = parseInt((newX / (CFG.w - 30)) * data.length, 10);
+  if (newX >= CFG.w - 30) {
+    newX = CFG.w - 30;
+    step = data.length - 1;
+  }
+  if (newX <= 0) {
+    step = 0;
+    newX = 0;
+  }
+  slider.attr({x: newX});
+  onManualStep();
+}
   height: 100%;
   padding: 0;
   margin: 0;
-  background-color: #fff;
+  background-color: #CEEFE3;
   font-family: Arial,sans-serif;
+  color: #05291B;
+}
+
+body {
+}
+
+h1 {
+  margin: 0;
+  padding: 0;
+  height: 50px;
+  line-height: 50px;
+  font-size: 32px;
+  font-weight: normal;
 }
 
 #map {
   width: 600px;
-  height: 400px;
+  height: 420px;
   z-index: 1;
 }
 
 #canvas {
   position: relative;
-  margin-top: -400px;
   width: 600px;
-  height: 400px;
+  height: 420px;
+  margin-top: -420px;
   z-index: 100;
 }
 
 #date {
   padding: 5px 0 0 0;
   width: 600px;
-  font-size: 32px;
+  font-size: 22px;
   text-align: right;
 }