Created
April 24, 2013 03:04
-
-
Save maggie-lee/5449285 to your computer and use it in GitHub Desktop.
U.S. Container Port Depth
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> | |
| <html> | |
| <head> | |
| <style> | |
| body { | |
| font: 10px sans-serif; | |
| } | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: black; | |
| opacity: 0.2; | |
| shape-rendering: crispEdges; | |
| } | |
| .x.axis path, | |
| x.axis line { | |
| fill: none; | |
| stroke: black; | |
| opacity: 0.2; | |
| shape-rendering: crispEdges; | |
| } | |
| .bar { | |
| fill: steelblue; | |
| } | |
| </style> | |
| <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script> | |
| </head> | |
| <body> | |
| <script> | |
| //capacity data from U.S. DOT Maritime Administration, Vessels Calls at U.S. Ports by Vessel Type: http://www.marad.dot.gov/library_landing_page/data_and_statistics/Data_and_Statistics.htm | |
| // Channel depth & tidal data from National Geospatial Intelligence Agency's World Port Index: http://msi.nga.mil/NGAPortal/MSI.portal?_nfpb=true&_pageLabel=msi_portal_page_62&pubCode=0015 | |
| var margin = {top: 30, right: 50, bottom: 30, left: 30}, | |
| width = 900 - margin.left - margin.right, | |
| height = 500 - margin.top - margin.bottom; | |
| var width_factor = 0.000005; | |
| var temp = margin.left; | |
| var temp2 = margin.left; | |
| var bar_padding = 10; | |
| var text_padding = 40; | |
| var depthConverter = function(some_letter) | |
| {var x = 0; | |
| switch(some_letter) | |
| { | |
| case "A": | |
| x = 76; | |
| break; | |
| case "B": | |
| x = 75; | |
| break; | |
| case "C": | |
| x = 70; | |
| break; | |
| case "D": | |
| x = 65; | |
| break; | |
| case "E": | |
| x = 60; | |
| break; | |
| case "F": | |
| x = 55; | |
| break; | |
| case "G": | |
| x = 50; | |
| break; | |
| case "H": | |
| x = 45; | |
| break; | |
| case "J": | |
| x = 40; | |
| break; | |
| case "K": | |
| x = 35; | |
| break; | |
| case "M": | |
| x = 25; | |
| break; | |
| default: | |
| x = 0 | |
| } | |
| {return x;}}; | |
| var svgContainer = d3.select("body").append("svg") | |
| .attr("width", width + margin.left + margin.right) | |
| .attr("height", height + margin.top + margin.bottom); | |
| var y = d3.scale.linear() | |
| .domain([0, 90]) | |
| .range([margin.top, height]); | |
| var yAxis = d3.svg.axis() | |
| .scale(y) | |
| .orient("left") | |
| .ticks(9); | |
| var x = d3.scale.linear() | |
| .domain([157, 53]) | |
| .range([650, margin.left]); | |
| var xAxis = d3.svg.axis() | |
| .scale(x) | |
| .ticks(0) | |
| .orient("top"); | |
| console.log("ok harbors"); | |
| var csv_data = []; | |
| console.log(typeof(csv_data)); | |
| d3.csv("ports.csv", function(data) { | |
| data.forEach(function(d) { | |
| d.port = d.port | |
| d.longitude = parseInt(d.longitude) | |
| console.log(d.longitude) | |
| console.log(d) | |
| console.log(d.port) | |
| console.log(parseInt(d.capacity)); | |
| }); | |
| var text = svgContainer.selectAll("text") | |
| .data(data) | |
| .enter().append("text") | |
| .attr("x", function(d) { | |
| temp2 = bar_padding + temp2 + (parseInt((d.capacity*width_factor))) | |
| return ( temp2 - (parseInt((d.capacity*width_factor)))); }) | |
| .attr("y", function(d) {return (text_padding)+y(depthConverter(d.depth)); }) | |
| .text(function(d) {return d.port; }) | |
| .attr("font-family", "sans-serif") | |
| .attr("font-size", "10px") | |
| .attr("fill", "black"); | |
| var rectangles = svgContainer.selectAll("rect") | |
| .data(data) | |
| .enter().append("rect") | |
| .attr("x", function(d) { | |
| temp = bar_padding + temp + (parseInt((d.capacity*width_factor))) | |
| return ( temp - (parseInt((d.capacity*width_factor)))); }) | |
| .attr("y", margin.top) | |
| .attr("height", function(d) {return (y(depthConverter(d.depth))); }) | |
| .attr("width", function(d) {return (parseInt(d.capacity))*width_factor;}) | |
| .attr("fill", "blue") | |
| .attr("opacity", 0.2) | |
| .attr("stroke", "black"); | |
| //.attr("stroke-width", "2"); | |
| var yAxisGroup = svgContainer.append("g") | |
| .attr("class", "y axis") | |
| .attr("transform", "translate(" + margin.left + ",0)") | |
| .call(yAxis) | |
| .append("text") | |
| .attr("transform", "rotate(-90)") | |
| .attr("y", 8) | |
| .attr("x", -355) | |
| .attr("dy", ".17em") | |
| .style("text-anchor", "end") | |
| .text("Depth in feet"); | |
| var xAxisGroup = svgContainer.append("g") | |
| .attr("class", "y axis") | |
| .attr("transform", "translate(0," + margin.top + ")") | |
| .call(xAxis); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
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
| port | capacity | Latitude_degrees | Latitude_minutes | Latitude_hemisphere | longitude | Longitude_minutes | Longitude_hemisphere | Harbor_size_code | Entrance_restriction_tide | Entrance_restriction_swell | Entrance_restriction_ice | Entrance_restriction_other | Overhead_limits | depth | Anchorage_depth | Cargo_pier_depth | tide | Lifts_100_tons_plus | Lifts_50_100_tons | Lifts_25_49_tons | Lifts_0_24_tons | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Dutch Harbor | 553000 | 53 | 54 | N | 166 | 32 | W | S | N | N | N | H | 2 | |||||||||
| Honolulu | 886000 | 21 | 18 | N | 157 | 52 | W | M | N | N | N | Y | Y | J | A | M | 2 | Y | Y | Y | ||
| San Francisco | 10629000 | 37 | 49 | N | 122 | 25 | W | L | N | N | N | Y | Y | K | L | J | 4 | Y | ||||
| Seattle | 4136000 | 47 | 36 | N | 122 | 20 | W | L | N | N | N | Y | Y | K | A | A | 8 | Y | ||||
| Tacoma | 1795000 | 47 | 17 | N | 122 | 25 | W | M | N | N | N | Y | Y | A | A | G | 8 | Y | ||||
| Portland | 665000 | 45 | 31 | N | 122 | 40 | W | L | Y | N | N | Y | Y | J | L | H | 4 | Y | ||||
| Long Beach | 14316000 | 33 | 46 | N | 118 | 11 | W | M | Y | N | N | Y | Y | D | G | E | 4 | Y | ||||
| Houston | 2651000 | 29 | 45 | N | 95 | 17 | W | L | N | N | N | Y | Y | G | K | L | 0 | Y | Y | Y | Y | |
| New Orleans | 2440000 | 29 | 57 | N | 90 | 3 | W | L | N | N | N | Y | Y | J | A | J | 0 | Y | Y | Y | Y | |
| Mobile | 702000 | 30 | 41 | N | 88 | 7 | W | L | N | N | N | N | J | B | J | 2 | Y | Y | Y | Y | ||
| Savannah | 8416000 | 32 | 5 | N | 81 | 5 | W | M | Y | N | N | Y | Y | H | H | K | 8 | Y | Y | Y | ||
| Jacksonville | 1875000 | 30 | 19 | N | 81 | 39 | W | M | Y | N | N | Y | Y | J | J | J | 1 | Y | Y | Y | ||
| Miami | 2917000 | 25 | 47 | N | 80 | 11 | W | S | N | N | N | Y | H | A | H | 3 | Y | Y | Y | Y | ||
| Port Everglades | 2483000 | 26 | 6 | N | 80 | 7 | W | M | Y | N | N | Y | H | A | 3 | Y | ||||||
| Charleston | 5778000 | 32 | 47 | N | 79 | 55 | W | S | N | N | N | Y | Y | H | H | J | 5 | Y | Y | |||
| Norfolk (Virginia Ports) | 9394000 | 36 | 51 | N | 76 | 18 | W | L | N | N | N | Y | N | H | H | J | 3 | Y | Y | Y | Y | |
| Baltimore | 1798000 | 39 | 16 | N | 76 | 35 | W | L | N | N | N | Y | Y | G | G | G | 1 | Y | Y | Y | Y | |
| Philadelphia | 1338000 | 39 | 57 | N | 75 | 8 | W | L | Y | N | N | Y | Y | J | J | J | 6 | Y | Y | Y | Y | |
| Wilmington | 545000 | 39 | 44 | N | 75 | 33 | W | M | N | N | N | Y | Y | M | M | H | 6 | Y | Y | Y | Y | |
| New York City | 10072000 | 40 | 42 | N | 74 | 1 | W | L | Y | N | N | N | Y | H | H | H | 5 | Y | Y | Y | Y | |
| Boston | 842000 | 42 | 21 | N | 71 | 3 | W | L | N | N | N | N | Y | J | H | H | 10 | Y | Y |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment