Crude Oil Pipelines in US

US Map of Crude Oil Pipelines

Pipeline shapefile via www.eia.gov/maps/layer_info-m.php

US States & Cities via Atlas-Make

<!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>

https://d3js.org/d3.v4.min.js

https://d3js.org/topojson.v1.min.js