zzolo/README.md

## README.md

      
    Raw
  

              README.md
            
          
    This is an example of using D3's geo paths to render a MultiLineString, but it seems to not render correctly for whatever reason. It is not a fill/stroke problem, either.
Identified problem: It seems that the stroke width gets scaled as well.

  
## data.geojson

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              data.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.
      
    
## data.topojson

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              data.topojson
            
          
      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>

<head>
  <meta charset="utf-8">

  <style>


  </style>
</head>

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

  <script>

    d3.json('data.topojson', function(error, route) {
      var width = 960;
      var height = 500;

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

      route = topojson.feature(route, route.objects['metrotransit-green-line.geo']);


      // Make projection and path handler
      var projectionData = route;
      var centroid = d3.geo.centroid(projectionData);
      var projection = d3.geo.albersUsa()
        .scale(1000)
        .translate([width / 2, height / 2]);
      var projectionPath = d3.geo.path().projection(projection);

      // Make group for features
      var featureGroup = svg.append('g').attr('class', 'feature-group');

      // Fit map to data
      var b = projectionPath.bounds(projectionData);
      featureGroup.attr('transform',
        'translate(' + projection.translate() + ') ' +
        'scale(' + 0.95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height) + ') ' +
        'translate(' + -(b[1][0] + b[0][0]) / 2 + ',' + -(b[1][1] + b[0][1]) / 2 + ')');

      // Add data
      featureGroup.selectAll('.route')
        .data(route.features)
        .enter()
          .append('path')
          .attr('class', 'route')
          .attr('d', projectionPath)
          .style('fill', 'blue')
          .style('fill-opacity', 0.05)
          .style('stroke', 'red')
          .style('stroke-opacity', 0.75)
          .style('stroke-width', 0.001);

    });

  </script>
</body>
	<!DOCTYPE html>

	<head>
	<meta charset="utf-8">

	<style>


	</style>
	</head>

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

	<script>

	d3.json('data.topojson', function(error, route) {
	var width = 960;
	var height = 500;

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

	route = topojson.feature(route, route.objects['metrotransit-green-line.geo']);


	// Make projection and path handler
	var projectionData = route;
	var centroid = d3.geo.centroid(projectionData);
	var projection = d3.geo.albersUsa()
	.scale(1000)
	.translate([width / 2, height / 2]);
	var projectionPath = d3.geo.path().projection(projection);

	// Make group for features
	var featureGroup = svg.append('g').attr('class', 'feature-group');

	// Fit map to data
	var b = projectionPath.bounds(projectionData);
	featureGroup.attr('transform',
	'translate(' + projection.translate() + ') ' +
	'scale(' + 0.95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height) + ') ' +
	'translate(' + -(b[1][0] + b[0][0]) / 2 + ',' + -(b[1][1] + b[0][1]) / 2 + ')');

	// Add data
	featureGroup.selectAll('.route')
	.data(route.features)
	.enter()
	.append('path')
	.attr('class', 'route')
	.attr('d', projectionPath)
	.style('fill', 'blue')
	.style('fill-opacity', 0.05)
	.style('stroke', 'red')
	.style('stroke-opacity', 0.75)
	.style('stroke-width', 0.001);

	});

	</script>
	</body>