swingley/california_50m.geojson

## california_50m.geojson

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              california_50m.geojson
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Mercator projection</title>
    <script src="//d3js.org/d3.v3.min.js"></script>
    <script src="//d3js.org/d3.geo.projection.v0.min.js"></script>
    <style>
      body {
        background-color: gray;
        margin: 1em auto;
        width: 500px;
      }
      svg {
        background-color: white;
      }
      .graticule {
        fill: none;
        stroke: #777;
        stroke-width: .5px;
        stroke-opacity: .5;
      }
      g.california path {
        fill: #F7DFAD;
        stroke: #5C8AA9;
      }
    </style>
  </head>
  <body>
    <script>
      //Width and height
      var w = 500;
      var h = 300;

      // Define map projection
      var robinson = d3.geo.robinson()
        .center([ -119.5, 37.2 ])
        .scale(1000)
        .translate([ w * 0.5, h * 0.5 ]);

      //Define path generator
      var path = d3.geo.path().projection(robinson);

      // Show a graticule to accentuate differences between projections.
      var graticule = d3.geo.graticule();

      // Create SVG
      var svg = d3.select("body")
        .append("svg")
        .attr("width", w)
        .attr("height", h);

      // Load in GeoJSON data
      d3.json("california_50m.geojson", function(json) {
        // Add a group then add data from GeoJSON feature.
        svg.append("g").attr("class", "california").selectAll("path")
          .data(json.features)
          .enter()
          .append("path")
          .attr("d", path);
        // Add a graticule.
        svg.append("g").append("path")
          .datum(graticule)
          .attr("class", "graticule")
          .attr("d", path);
      });
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Mercator projection</title>
	<script src="//d3js.org/d3.v3.min.js"></script>
	<script src="//d3js.org/d3.geo.projection.v0.min.js"></script>
	<style>
	body {
	background-color: gray;
	margin: 1em auto;
	width: 500px;
	}
	svg {
	background-color: white;
	}
	.graticule {
	fill: none;
	stroke: #777;
	stroke-width: .5px;
	stroke-opacity: .5;
	}
	g.california path {
	fill: #F7DFAD;
	stroke: #5C8AA9;
	}
	</style>
	</head>
	<body>
	<script>
	//Width and height
	var w = 500;
	var h = 300;

	// Define map projection
	var robinson = d3.geo.robinson()
	.center([ -119.5, 37.2 ])
	.scale(1000)
	.translate([ w * 0.5, h * 0.5 ]);

	//Define path generator
	var path = d3.geo.path().projection(robinson);

	// Show a graticule to accentuate differences between projections.
	var graticule = d3.geo.graticule();

	// Create SVG
	var svg = d3.select("body")
	.append("svg")
	.attr("width", w)
	.attr("height", h);

	// Load in GeoJSON data
	d3.json("california_50m.geojson", function(json) {
	// Add a group then add data from GeoJSON feature.
	svg.append("g").attr("class", "california").selectAll("path")
	.data(json.features)
	.enter()
	.append("path")
	.attr("d", path);
	// Add a graticule.
	svg.append("g").append("path")
	.datum(graticule)
	.attr("class", "graticule")
	.attr("d", path);
	});
	</script>
	</body>
	</html>