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>
    <style>
      body {
        background-color: gray;
        margin: 1em auto;
        width: 300px;
      }
      div.title, div.title a {
        color: #fff;
      }
      div.title {
        font-family: sans-serif;
        font-size: 120%;
        font-weight: 100;
        padding: 0 0 0.5em 0;
        text-align: center;
      }
      svg {
        background-color: white;
      }
      .graticule {
        fill: none;
        stroke: #777;
        stroke-width: .5px;
        stroke-opacity: .5;
      }
      g.california path {
        fill: #F7DFAD;
        stroke: #eebd53;
      }
    </style>
  </head>
  <body>
    <div class="title">
      California (<a href="https://github.com/mbostock/d3/wiki/Geo-Projections">d3.geo.albersUsa</a>)
    </div>
    <script>
      //Width and height
      var w = 300;
      var h = 300;

      // Define map projection
      var albers = d3.geo.albersUsa()
        .scale(1200)
        .translate([ w * 1.75, h * 0.55 ]);

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

      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>
	<style>
	body {
	background-color: gray;
	margin: 1em auto;
	width: 300px;
	}
	div.title, div.title a {
	color: #fff;
	}
	div.title {
	font-family: sans-serif;
	font-size: 120%;
	font-weight: 100;
	padding: 0 0 0.5em 0;
	text-align: center;
	}
	svg {
	background-color: white;
	}
	.graticule {
	fill: none;
	stroke: #777;
	stroke-width: .5px;
	stroke-opacity: .5;
	}
	g.california path {
	fill: #F7DFAD;
	stroke: #eebd53;
	}
	</style>
	</head>
	<body>
	<div class="title">
	California (<a href="https://github.com/mbostock/d3/wiki/Geo-Projections">d3.geo.albersUsa</a>)
	</div>
	<script>
	//Width and height
	var w = 300;
	var h = 300;

	// Define map projection
	var albers = d3.geo.albersUsa()
	.scale(1200)
	.translate([ w * 1.75, h * 0.55 ]);

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

	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>