index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Esri <3 d3js</title>
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css">
    <style type="text/css">
      html, body { 
        height: 100%; width: 100%;
        margin: 0; padding: 0;
      } 
      body{
        background-color: #fff; overflow:hidden; 
        font-family: sans-serif;
      }
      path {
        fill: #08c;
        stroke: #fff;
        stroke-width:1.5px;
        opacity: 0.5;
      }
      path#Arizona {
        fill: #FF0;
      }
      path#Colorado {
        fill: #F49;
      }
      #map {
        position:absolute;
        width: 100%;
        height: 100%;
      } 
    </style>
    <script>
      var dojoConfig = {
        parseOnLoad: true,
        packages: [{
          "name": "modules",
          "location": location.origin + location.pathname.replace(/\/[^/]+$/, '')
        }]
      };
    </script>
   
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/"></script>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script>
      dojo.require("esri.map");
      dojo.require("modules.d3Layer");
      dojo.ready(function(){
  
        var initExtent = new esri.geometry.Extent({"xmin":-132,"ymin":20,"xmax":-60,"ymax":50,"spatialReference":{"wkid":4326}});
        map = new esri.Map("map",{
          extent:esri.geometry.geographicToWebMercator(initExtent)
        });

        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer");
        map.addLayer(basemap); 
        
        layer = new modules.d3Layer('us-states.json', {
          styles: [
            //{ key: 'fill', value: '#555'}
          ],
          attrs: [
            { key: 'id', value: function(d){ return d.properties.name; }}
          ] 
        });
        map.addLayer(layer);
 
        dojo.connect(layer, "onLoad", function(lyr) {
          console.log("layer loaded", lyr);
          lyr._render();
        });


      });
    </script>
  </head>
  <body class="tundra">
    <div id="map"></div>
  </body>
</html>