### developers

## MapBox.js v0.6.7

Viewing an older version of MapBox.js. Check out v1.5.0 for the latest.

### Vectors with D3

Add vector features to your map with D3. Not compatible with Internet Explorer.
Select all

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=utf-8 />
    <title>Vectors with D3</title>

      <script src='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.js'></script>
      <link href='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.css' rel='stylesheet' />

      <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
      </style>
    </head>
    <body>

    <div id='map'></div>

    <script src="/mapbox.js/assets/d3.v2.min.js"></script>

    <style>
      body { margin:0; padding:0; }
      #map { position:absolute; top:0; bottom:0; width:100%; }
      .d3-vec { position:absolute; }
      path {
        fill: #000;
        fill-opacity: .2;
        stroke: #fff;
        stroke-width: 1.5px;
      }

      path:hover {
        fill: brown;
        fill-opacity: .7;
      }
    </style>

    <script>
    function d3layer() {
        var f = {}, bounds, feature, collection;
        var div = d3.select(document.body)
            .append("div")
            .attr('class', 'd3-vec'),
            svg = div.append('svg'),
            g = svg.append("g");

        f.parent = div.node();

        f.project = function(x) {
          var point = f.map.locationPoint({ lat: x[1], lon: x[0] });
          return [point.x, point.y];
        };

        var first = true;
        f.draw = function() {
          first && svg.attr("width", f.map.dimensions.x)
              .attr("height", f.map.dimensions.y)
              .style("margin-left", "0px")
              .style("margin-top", "0px") && (first = false);

          path = d3.geo.path().projection(f.project);
          feature.attr("d", path);
        };

        f.data = function(x) {
            collection = x;
            bounds = d3.geo.bounds(collection);
            feature = g.selectAll("path")
                .data(collection.features)
                .enter().append("path");
            return f;
        };

        f.extent = function() {
            return new MM.Extent(
                new MM.Location(bounds[0][1], bounds[0][0]),
                new MM.Location(bounds[1][1], bounds[1][0]));
        };
        return f;
    }
    var new_jersey = {"type":"FeatureCollection","features":[
      {"type":"Feature","id":"34","properties":{"name":"New Jersey"},"geometry":{"type":"Polygon","coordinates":[[[-74.236547,41.14083],[-73.902454,40.998429],[-74.022947,40.708151],[-74.187255,40.642428],[-74.274886,40.489074],[-74.001039,40.412397],[-73.979131,40.297381],[-74.099624,39.760641],[-74.411809,39.360824],[-74.614456,39.245808],[-74.795195,38.993869],[-74.888303,39.158177],[-75.178581,39.240331],[-75.534582,39.459409],[-75.55649,39.607286],[-75.561967,39.629194],[-75.507197,39.683964],[-75.414089,39.804456],[-75.145719,39.88661],[-75.129289,39.963288],[-74.82258,40.127596],[-74.773287,40.215227],[-75.058088,40.417874],[-75.069042,40.543843],[-75.195012,40.576705],[-75.205966,40.691721],[-75.052611,40.866983],[-75.134765,40.971045],[-74.882826,41.179168],[-74.828057,41.288707],[-74.69661,41.359907],[-74.236547,41.14083]]]}},
    ]};

    mapbox.auto('map', 'examples.map-vyofok3q', function(map) {
        l = d3layer().data(new_jersey);
        map.addLayer(l);
        map.extent(l.extent());
    });
    </script>

The code and documentation to mapbox.js is hosted on GitHub where you can contribute changes and improvements.