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
Created
March 5, 2018 23:53
-
-
Save danaoira/736f746e6c318d35ceaa411f796650c3 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.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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment