1. Sumin Byeon
  2. finance

Commits

Sumin Byeon  committed 3c67eb4

Initial import.

  • Participants
  • Branches default

Comments (0)

Files changed (1)

File map.html

View file
  • Ignore whitespace
+<html>
+  <head>
+    <title></title>
+    <script src="http://vis.stanford.edu/protovis/protovis-r3.2.js" type="text/javascript"></script>
+    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAYZ9eMYFYusxZt-1RKXLI7RQGpXqX26B62_lhdlIUxPTUm0CSORRw1BkwdprB1xQ3Xa8KfbgKAacxlw" type="text/javascript"></script>
+    <script src="data.js" type="text/javascript"></script>
+    <style type="text/css">
+    body {
+      margin: 0;
+    }
+    
+    #map {
+      height: 100%;
+    }
+    
+    #map .canvas {
+      position: absolute;
+    }
+    </style>
+    <script type="text/javascript+protovis">
+
+    var colors = {
+      "Food & Dining": { light: "rgba(217, 0, 0, .8)", dark: "rgb(163, 0, 0)" },
+      "Shopping": { light: "rgba(35, 150, 94, .8)", dark: "rgb(26, 112, 70)" },
+      "Grocery": { light: "rgba(52, 137, 186, .8)", dark: "rgb(39, 103, 139)" },
+      "Telecommunication": { light: "rgba(178, 48, 206, .8)", dark: "rgb(168, 38, 196)" },
+      "Transportation": { light: "rgba(40, 40, 40, .8)", dark: "rgb(30, 30, 30)" },
+      "Entertainment": { light: "rgba(229, 231, 51, .8)", dark: "rgb(219, 221, 21)" },
+      "Housing": { light: "rgba(52, 137, 186, .8)", dark: "rgb(39, 103, 139)" },
+      "Utilities" : { light: "rgba(52, 137, 186, .8)", dark: "rgb(39, 103, 139)" },
+    };
+    
+    function Canvas(data) {
+      this.data = data;
+    }
+    
+    Canvas.prototype = pv.extend(GOverlay);
+    
+    Canvas.prototype.initialize = function(map) {
+      this.map = map;
+      this.canvas = document.createElement("div");
+      this.canvas.setAttribute("class", "canvas");
+      map.getPane(G_MAP_MAP_PANE).parentNode.appendChild(this.canvas);
+    };
+    
+    Canvas.prototype.redraw = function(force) {
+      if (!force) return;
+      var c = this.canvas, m = this.map, r = 20;
+    
+      /* Get the pixel locations of the crimes. */
+      var pixels = this.data.map(function(d) {
+          return m.fromLatLngToDivPixel(new GLatLng(d.lat, d.lng));
+        });
+    
+      /* Update the canvas bounds. Note: may be large. */
+      function x(p) p.x; function y(p) p.y;
+      var x = { min: pv.min(pixels, x) - r, max: pv.max(pixels, x) + r };
+      var y = { min: pv.min(pixels, y) - r, max: pv.max(pixels, y) + r };
+      c.style.width = (x.max - x.min) + "px";
+      c.style.height = (y.max - y.min) + "px";
+      c.style.left = x.min + "px";
+      c.style.top = y.min + "px";
+    
+      /* Render the visualization. */
+      new pv.Panel()
+          .canvas(c)
+          .left(-x.min)
+          .top(-y.min)
+        .add(pv.Panel)
+          .data(this.data)
+        .add(pv.Dot)
+          .left(function() pixels[this.parent.index].x)
+          .top(function() pixels[this.parent.index].y)
+          .strokeStyle(function(x, d) colors[d.category].dark)
+          .fillStyle(function(x, d) colors[d.category].light)
+          .size(function(x, d) Math.abs(d.amount)/5+15)
+        .anchor("center").add(pv.Label)
+          .textStyle("white")
+          .text(function(x, d) d.code)
+        .root.render();
+    };
+    
+    /* Restrict minimum and maximum zoom levels. */
+    G_NORMAL_MAP.getMinimumResolution = function() 11;
+    G_NORMAL_MAP.getMaximumResolution = function() 14;
+    
+    var map = new GMap2(document.getElementById("map"));
+    map.setCenter(new GLatLng(32.237198,-110.926208), 12);
+    map.setUI(map.getDefaultUI());
+    map.addOverlay(new Canvas(data));
+    </script>
+  </head>
+  <body onunload="GUnload()">
+    <div id="map"></div>
+  </body>
+</html>