created by http://livecoding.io

README.md

View this code at http://livecoding.io/5852799

options.json

{
    "libraries": [
        "d3",
        "TopoJSON"
    ],
    "mode": "javascript",
    "layout": "fullscreen mode (vertical)",
    "resolution": "reset"
}

water.css

#container {
  width: 100%;
  background: #000000;
  line-height: 0;
}

canvas {
  background: #FF0000;
  line-height: 0;
  display: block;
}

water.html

<h1>asdf</h1>
<h1>asdf</h1>
<h1>asdf</h1>
<h1>asdf</h1>
<h1 id='message'>asdf</h1>
<div id='container'></div>
<h1>asdf</h1>
<h1>asdf</h1>
<h1>asdf</h1>
<h1>asdf</h1>
<h1>asdf</h1>
<h1>asdf</h1>
<h1>asdf</h1>
<h1>asdf</h1>
<h1>asdf</h1>
<h1>asdf</h1>

water.js

$.ajaxSetup({
  cache: true
});

$.getScript('https://gist.github.com/gabrielflorit/5853528/raw/aceefadb8417f342ceb8124010ae804719f83534/kinetic.js', function() {
  
  var geo = livecoding.json;
  var state = topojson.feature(geo, geo.objects.State);
  var towns = topojson.feature(geo, geo.objects.Towns);
  var path = d3.geo.path().projection(null);
  
  var bounds = path.bounds(towns);
  var originalWidth = Math.ceil(bounds[1][0]);
  var originalHeight = Math.ceil(bounds[1][1]);
  var ratio = originalWidth/originalHeight;
  
  var container = $('#container');
  var width = container.width();
  var height = width/ratio;
  
  var stage = new Kinetic.Stage({container: container.get(0)});
  stage.setWidth(width);
  stage.setHeight(height);
  stage.setScale(width/originalWidth);
  
  var mapLayer = new Kinetic.Layer();
  var topLayer = new Kinetic.Layer();
  
  stage.add(mapLayer);
  stage.add(topLayer);
  
  stage.draw();
  
  var rect = new Kinetic.Rect({
    x: 0,
    y: 0,
    width: width/2,
    height: height,
    fill: 'blue',
    listening: false
  });
  rect.on('touchstart touchmove mousemove', function(evt) {
    $('#message').html(new Date().getTime());
    evt.cancelBubble = true;
    
  });
  mapLayer.add(rect);
  
  /* mapLayer.add(new Kinetic.Path({
  data: path(state),
  stroke: '#FFFFFF',
  strokeWidth: 1,
  name: state.features[0].properties.STATE,
  lineCap: 'round',
  lineJoin: 'round'
}));
 */
  mapLayer.draw();
  
  
  
  
  
});

water.json