nikhilkumar80/README.md

## README.md

      
    Raw
  

              README.md
            
          
    This example demonstrates how to create a custom Cartesian projection by implementing a geometry stream on top of two linear scales; the geometry stream is then used instead of a geographic projection, which are intended for spherical coordinates.

  
## index
<!DOCTYPE html>
<meta charset="utf-8">
<style>

.lot {
  fill: lightgray;
  stroke: black;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var width = 960,
    height = 500;

var x = d3.scale.linear()
    .range([0, width]);

var y = d3.scale.linear()
    .range([0, height]);

var projection = {
  stream: function(stream) {
    return {
      point: function(px, py) { stream.point(x(px), y(py)); },
      lineStart: function() { stream.lineStart(); },
      lineEnd: function() { stream.lineEnd(); },
      polygonStart: function() { stream.polygonStart(); },
      polygonEnd: function() { stream.polygonEnd(); }
    };
  }
};

var path = d3.geo.path()
    .projection(projection);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

d3.json("geo.json", function(error, geo) {
  x.domain(d3.extent(geo.features, function(d) { return d.properties.Easting; }));
  y.domain(d3.extent(geo.features, function(d) { return d.properties.Northing; }));

  svg.append("path")
      .datum(geo)
      .attr("class", "lot")
      .attr("d", path);
});

</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	.lot {
	fill: lightgray;
	stroke: black;
	}

	</style>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>

	var width = 960,
	height = 500;

	var x = d3.scale.linear()
	.range([0, width]);

	var y = d3.scale.linear()
	.range([0, height]);

	var projection = {
	stream: function(stream) {
	return {
	point: function(px, py) { stream.point(x(px), y(py)); },
	lineStart: function() { stream.lineStart(); },
	lineEnd: function() { stream.lineEnd(); },
	polygonStart: function() { stream.polygonStart(); },
	polygonEnd: function() { stream.polygonEnd(); }
	};
	}
	};

	var path = d3.geo.path()
	.projection(projection);

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

	d3.json("geo.json", function(error, geo) {
	x.domain(d3.extent(geo.features, function(d) { return d.properties.Easting; }));
	y.domain(d3.extent(geo.features, function(d) { return d.properties.Northing; }));

	svg.append("path")
	.datum(geo)
	.attr("class", "lot")
	.attr("d", path);
	});

	</script>