pins

_.md

[ Launch: map1 ] 9392966 by samselikoff

config.json

{"description":"pins","endpoint":"","display":"svg","public":true,"require":[{"name":"d3.geo.tile","url":"https://raw.github.com/d3/d3-plugins/master/geo/tile/tile.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"sensors.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/8YLwCsZ.gif"}

inlet.js

var width = tributary.sw,
height = tributary.sh;

var tiler = d3.geo.tile()
    .size([width, height]);

var center = [-71.07, 42.355];

var projection = d3.geo.mercator()
    .center(center)
    .scale((1 << 22) / 2 / Math.PI)
    .translate([width / 2, height / 2]);

var path = d3.geo.path()
    .projection(projection);

var svg = d3.select('svg')
    .attr('width', width)
    .attr('height', height);

svg.selectAll('g')
    .data(tiler
      .scale(projection.scale() * 2 * Math.PI)
      .translate(projection([0, 0])))
  .enter().append('g')
    .each(function(d) {
      var g = d3.select(this);
      // d3.json('http://' + ['a', 'b', 'c'][(d[0] * 31 + d[1]) % 3] + '.tile.openstreetmap.us/vectiles-water-areas/' + d[2] + '/' + d[0] + '/' + d[1] + '.json', function(error, json) {
      d3.json('http://' + ['a', 'b', 'c'][(d[0] * 31 + d[1]) % 3] + '.tile.openstreetmap.us/vectiles-all/' + d[2] + '/' + d[0] + '/' + d[1] + '.json', function(error, json) {

        // Water areas 
        g.selectAll('path')
            .data(json["water-areas"].features.sort(function(a, b) { return a.properties.sort_key - b.properties.sort_key; }))
          .enter().append('path')
            .attr('class', function(d) { return d.properties.kind; })
            .attr('d', path);

        // Highroads
        g.selectAll('path')
            .data(json["highroad"].features.sort(function(a, b) { return a.properties.sort_key - b.properties.sort_key; }))
          .enter().append('path')
            .attr('class', function(d) { return d.properties.kind; })
            .attr('d', path);

      });
    });

// Features
var pin = "M0.5,10.691c-4.951,0-8.967,4.016-8.967,8.967c0,4.953,3.924,10.707,8.967,19.342c5.043-8.635,8.967-14.389,8.967-19.342C9.467,14.707,5.452,10.691,0.5,10.691z M0.5,22.656c-1.775,0-3.216-1.439-3.216-3.215c0-1.777,1.438-3.217,3.216-3.217c1.777,0,3.217,1.438,3.217,3.217C3.717,21.216,2.275,22.656,0.5,22.656z";


var maxLength = 30;

var sensors = svg.selectAll('.sensor')
    .data(tributary.sensors.points)
  .enter()
    .append('g')
    .attr('class', function(d, i) {return 'sensor ' + i;})
    .attr('transform', function(d) {return 'translate(' + projection(d.coordinates)[0] + ',' + projection(d.coordinates)[1] + ')';})
    .style('opacity', 0);

sensors.append('path')
    .attr('transform', 'translate(0,-40)')
    .attr('class', 'pin')
    .attr('d', pin);

// var wind = sensors.append('line')
//     .attr('class', 'wind')
//     .attr('x1', 0)
//     .attr('y1', 0)
//     .attr('x2', 0)
//     .attr('y2', 0)
//     .style('stroke-width', '3px')
//     .style('stroke', 'green');

// setInterval(function() {
//   wind.style('opacity', 1)
//       .attr('x2', 0)
//       .attr('y2', 0)
//       .transition().duration(500).delay(function(d, i) {return 20*i;})
//       .attr('x2', function(d) {return maxLength * Math.cos(d.angle * (Math.PI/180));})
//       .attr('y2', function(d) {return maxLength * Math.sin(d.angle * (Math.PI/180));})
//       .style('opacity', 0);
// }, 600);

sensors.transition()
    .duration(500)
    .delay(function(d, i) {return i*20;})
    .style('opacity', 1);

sensors.json

{
  "points": [
    {
      "coordinates": [-71.08695301055909,42.351447955911695],
      "angle": 315
    },
    {
      "coordinates": [-71.08343395233155,42.35246284613574],
      "angle": 315
    },
    {
      "coordinates": [-71.07905658721924,42.35360457804949],
      "angle": 315
    },
    {
      "coordinates": [-71.07493671417237,42.35480971701297],
      "angle": 315
    },
    {
      "coordinates": [-71.07219013214112,42.35874211499499],
      "angle": 315
    },
    {
      "coordinates": [-71.07064517974854,42.361025329932644],
      "angle": 315
    },
    {
      "coordinates": [-71.06798442840577,42.36660617273091],
      "angle": 315
    },
    {
      "coordinates": [-71.06446537017823,42.3660988438709],
      "angle": 315
    },
    {
      "coordinates": [-71.06326374053955,42.366542756847466],
      "angle": 315
    },
    {
      "coordinates": [-71.06000217437744,42.36597201101572],
      "angle": 315
    },
    {
      "coordinates": [-71.05768474578858,42.363625557007076],
      "angle": 315
    },
    {
      "coordinates": [-71.05296405792237,42.36051795600514],
      "angle": 315
    },
    {
      "coordinates": [-71.056139793396,42.36235716699952],
      "angle": 315
    },
    {
      "coordinates": [-71.05768474578858,42.361596120703894],
      "angle": 315
    },
    {
      "coordinates": [-71.05665477752687,42.35899580964063],
      "angle": 315
    },
    {
      "coordinates": [-71.05948719024659,42.35931292650732],
      "angle": 315
    },
    {
      "coordinates": [-71.0645512008667,42.352335985753925],
      "angle": 315
    },
    {
      "coordinates": [-71.05819972991944,42.35239941597684],
      "angle": 315
    },
    {
      "coordinates": [-71.05150493621827,42.35487314473933],
      "angle": 315
    },
    {
      "coordinates": [-71.05193408966065,42.359439772805864],
      "angle": 315
    },
    {
      "coordinates": [-71.05090412139893,42.36242058710804],
      "angle": 315
    },
    {
      "coordinates": [-71.05201992034914,42.36673300430575],
      "angle": 315
    },
    {
      "coordinates": [-71.05631145477297,42.36825496323038],
      "angle": 315
    },
    {
      "coordinates": [-71.05819972991944,42.35220912511607],
      "angle": 315
    },
    {
      "coordinates": [-71.05957302093506,42.35005245509584],
      "angle": 315
    },
    {
      "coordinates": [-71.0605171585083,42.3465001313957],
      "angle": 315
    },
    {
      "coordinates": [-71.05665477752687,42.34643669521955],
      "angle": 315
    },
    {
      "coordinates": [-71.0619762802124,42.342884167190505],
      "angle": 315
    },
    {
      "coordinates": [-71.06841358184815,42.347578536596444],
      "angle": 315
    }
  ]
}

style.css

  path {
    fill: none;
    stroke: #000;
    stroke-linejoin: round;
    stroke-linecap: round;
  }

  .major_road { stroke: #776; }
  .minor_road { stroke: #ccb; }
  /*.highway { stroke: #f39; stroke-width: 1.5px; }*/
  .highway { stroke: #666; stroke-width: 1.5px; }
  .rail { stroke: #999; }




  .water { 
    fill: #C7DBFF; 
    stroke: none;
  }
  .ocean { 
    fill: #C7DBFF; 
    stroke: none;
  }
  .riverbank { 
    fill: #C7DBFF; 
    stroke: none;
  }

  .pin {
    fill: blue;
  }