Saminu/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    US Map of Crude Oil Pipelines

Pipeline shapefile via www.eia.gov/maps/layer_info-m.php
US States & Cities via Atlas-Make
forked from bradoyler's block: Crude Oil Pipelines in US

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="//d3js.org/topojson.v1.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }

    .pipelines {
     fill: none;
     stroke-linejoin: round;
     stroke-linecap: round;
     stroke-width: 3px;
    }
    .highlight {
      fill:none;
      stroke-width: 3px;
      stroke-opacity: .5;
    }
    .city-label {
      font: 10px sans-serif;
    }
    .states {
     pointer-events: none;
     fill: #ccc;
     stroke: #fff;
     stroke-width: 1px;
     stroke-linejoin: round;
    }
    #panel {
      height: 20px;
    }
  </style>
</head>

<body>
  <div id='panel'></div>
  <script>
    // Feel free to change or delete any of the code you see in this editor!

    var colorLegend = {
      'CENTURION PIPELINE':'#7570b3',
      'PLAINS PIPELINE':'#e7298a',
      'PHILLIPS 66 PIPELINE': '#666666',
       'KOCH PIPELINE': '#d95f02',
       EXXONMOBIL:'#377eb8',
       'EXXONMOBIL WEST COAST':'#377eb8',
       SHELL: '#e41a1c',
       SUNOCO: '#ffff33',
       ENBRIDGE:'#4daf4a',
       ENTERPRISE:'#a65628',
       other: '#000'
    };

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

    var projection = d3.geoAlbersUsa();
    var path = d3.geoPath().projection(projection);

    d3.json("us-pipelines.json", function(error, topoData) {
     if (error) throw error;

      var pipelines = topoData.objects.CrudeOil_Pipelines_US_201606;

      svg.selectAll('.states')
        .data(topojson.feature(topoData, topoData.objects.states).features)
        .enter()
        .append('path')
        .attr('class', 'states')
        .attr('d', path)

      svg.selectAll('.pipelines')
        .data(topojson.feature(topoData, pipelines).features)
  			.enter()
  			.append('path')
        .attr('class', 'pipelines')
        .attr('d', path)
        .style('stroke', function (d) {
          return colorLegend[d.properties.Opername] || colorLegend.other;
        })
      	.on('mouseover', function(d){
          d3.select('#panel')
            .html(d.properties.Opername+' - '+ d.properties.Pipename);
          d3.selectAll('.highlight').attr('class', 'pipelines');
          d3.select(this).attr('class','highlight');
      	});

      svg.append('path')
        .datum(topojson.feature(topoData, topoData.objects.cities))
        .attr('d', path)
        .attr('class', 'city');

      svg.selectAll('.city-label')
        .data(topojson.feature(topoData, topoData.objects.cities).features)
        .enter().append('text')
        .attr('class', 'city-label')
        .attr('transform', function (d) { return 'translate(' + projection(d.geometry.coordinates) + ')'; })
        .attr('dy', '.70em')
        .attr('dx', '.50em')
        .text(function (d) {
          return d.properties.NAME;
        });
});

  </script>
</body>

## us-pipelines.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              us-pipelines.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="//d3js.org/topojson.v1.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }

	.pipelines {
	fill: none;
	stroke-linejoin: round;
	stroke-linecap: round;
	stroke-width: 3px;
	}
	.highlight {
	fill:none;
	stroke-width: 3px;
	stroke-opacity: .5;
	}
	.city-label {
	font: 10px sans-serif;
	}
	.states {
	pointer-events: none;
	fill: #ccc;
	stroke: #fff;
	stroke-width: 1px;
	stroke-linejoin: round;
	}
	#panel {
	height: 20px;
	}
	</style>
	</head>

	<body>
	<div id='panel'></div>
	<script>
	// Feel free to change or delete any of the code you see in this editor!

	var colorLegend = {
	'CENTURION PIPELINE':'#7570b3',
	'PLAINS PIPELINE':'#e7298a',
	'PHILLIPS 66 PIPELINE': '#666666',
	'KOCH PIPELINE': '#d95f02',
	EXXONMOBIL:'#377eb8',
	'EXXONMOBIL WEST COAST':'#377eb8',
	SHELL: '#e41a1c',
	SUNOCO: '#ffff33',
	ENBRIDGE:'#4daf4a',
	ENTERPRISE:'#a65628',
	other: '#000'
	};

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

	var projection = d3.geoAlbersUsa();
	var path = d3.geoPath().projection(projection);

	d3.json("us-pipelines.json", function(error, topoData) {
	if (error) throw error;

	var pipelines = topoData.objects.CrudeOil_Pipelines_US_201606;

	svg.selectAll('.states')
	.data(topojson.feature(topoData, topoData.objects.states).features)
	.enter()
	.append('path')
	.attr('class', 'states')
	.attr('d', path)

	svg.selectAll('.pipelines')
	.data(topojson.feature(topoData, pipelines).features)
	.enter()
	.append('path')
	.attr('class', 'pipelines')
	.attr('d', path)
	.style('stroke', function (d) {
	return colorLegend[d.properties.Opername] \|\| colorLegend.other;
	})
	.on('mouseover', function(d){
	d3.select('#panel')
	.html(d.properties.Opername+' - '+ d.properties.Pipename);
	d3.selectAll('.highlight').attr('class', 'pipelines');
	d3.select(this).attr('class','highlight');
	});

	svg.append('path')
	.datum(topojson.feature(topoData, topoData.objects.cities))
	.attr('d', path)
	.attr('class', 'city');

	svg.selectAll('.city-label')
	.data(topojson.feature(topoData, topoData.objects.cities).features)
	.enter().append('text')
	.attr('class', 'city-label')
	.attr('transform', function (d) { return 'translate(' + projection(d.geometry.coordinates) + ')'; })
	.attr('dy', '.70em')
	.attr('dx', '.50em')
	.text(function (d) {
	return d.properties.NAME;
	});
	});

	</script>
	</body>