pachevalier/datamaps.html

## datamaps.html
<html>
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="http://datamaps.github.io/scripts/datamaps.none.min.js"></script>

<div id="container" style="position: relative; width: 500px; height: 300px;"></div>
<script>
    var map = new Datamap({
        element: document.getElementById('container'),
        geographyConfig: {
            dataUrl: 'json/mx_states.json'
        },
        scope: "states",
        setProjection: function(element, options) {
            var projection, path;
            projection = d3.geo.albersUsa()
                .scale(element.offsetWidth)
                .translate([element.offsetWidth / 2, element.offsetHeight / 2]);
}
            path = d3.geo.path()
                .projection( projection );

            return {path: path, projection: projection};
        }
    });
</script>
</body>
</html>


## mx_states.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              mx_states.json
            
          
        Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	<html>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/topojson.v1.min.js"></script>
	<script src="http://datamaps.github.io/scripts/datamaps.none.min.js"></script>

	<div id="container" style="position: relative; width: 500px; height: 300px;"></div>
	<script>
	var map = new Datamap({
	element: document.getElementById('container'),
	geographyConfig: {
	dataUrl: 'json/mx_states.json'
	},
	scope: "states",
	setProjection: function(element, options) {
	var projection, path;
	projection = d3.geo.albersUsa()
	.scale(element.offsetWidth)
	.translate([element.offsetWidth / 2, element.offsetHeight / 2]);
	}
	path = d3.geo.path()
	.projection( projection );

	return {path: path, projection: projection};
	}
	});
	</script>
	</body>
	</html>