Create a gist now

Instantly share code, notes, and snippets.

@bradoyler /.block
Last active Dec 24, 2016

Crude Oil Pipelines in US
license: mit
<!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>
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment