Pipeline shapefile via www.eia.gov/maps/layer_info-m.php
US States & Cities via Atlas-Make
-
-
Save johnpoole/d2baa8c02072d91fbdf3d98419161540 to your computer and use it in GitHub Desktop.
Crude Oil Pipelines in US
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment