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
license: mit |
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
<!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.geoOrthographic() | |
.scale(400) | |
.rotate([-150, -50]); | |
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> |