Skip to content

Instantly share code, notes, and snippets.

@brettvalle
Last active November 26, 2015 23:02
Show Gist options
  • Save brettvalle/0e6a1667142c4f43b70c to your computer and use it in GitHub Desktop.
Save brettvalle/0e6a1667142c4f43b70c to your computer and use it in GitHub Desktop.
AC100 vs WS 100 - Elevation Profile
mile WS100 AC100
0 6232 5937
0.5 6536 6016
1 6850 6281
1.5 7109 6573
2 7383 6876
2.5 7804 7270
3 8060 7694
3.5 8351 8139
4 8625 8079
4.5 8388 8165
5 8186 8368
5.5 8200 8448
6 7840 8372
6.5 7605 8172
7 7475 8111
7.5 7545 7926
8 7478 7802
8.5 7220 7600
9 6975 7399
9.5 6934 7410
10 6973 7379
10.5 7114 7356
11 7310 7320
11.5 7180 7479
12 7328 7400
12.5 7275 7328
13 7088 7320
13.5 6955 6870
14 7142 6656
14.5 7249 7045
15 7319 7394
15.5 7236 7717
16 7189 8046
16.5 7132 8394
17 6930 8776
17.5 7013 9187
18 6940 9059
18.5 6901 8811
19 6810 8759
19.5 6819 8569
20 6870 8750
20.5 6843 8875
21 6851 8773
21.5 6776 8537
22 6461 8370
22.5 6322 8019
23 6086 7630
23.5 5778 7491
24 5813 7455
24.5 5968 7373
25 5794 7047
25.5 5658 6673
26 5523 6957
26.5 5782 7326
27 5912 7697
27.5 5965 7676
28 6258 7273
28.5 6535 6844
29 6624 6807
29.5 6724 6621
30 6826 6746
30.5 7047 6837
31 6940 6794
31.5 6760 6704
32 6555 6630
32.5 6430 6533
33 6331 6409
33.5 6348 6274
34 6247 5980
34.5 6052 5703
35 6014 6082
35.5 5989 6190
36 5946 6448
36.5 5879 6714
37 5740 6668
37.5 5506 6570
38 5210 6824
38.5 5056 7001
39 4934 6794
39.5 4806 6657
40 4631 6458
40.5 4685 6279
41 4672 6252
41.5 4665 6304
42 4669 6244
42.5 4728 6110
43 4526 5983
43.5 4510 5930
44 4372 5942
44.5 4122 5896
45 3581 5885
45.5 3197 5643
46 2742 5605
46.5 3179 5412
47 3736 5272
47.5 4140 5268
48 4326 5359
48.5 4301 5454
49 4178 5624
49.5 3964 5772
50 3652 5927
50.5 3267 6169
51 2980 6107
51.5 2847 5890
52 2643 5682
52.5 2148 5625
53 1897 5293
53.5 2348 5241
54 2702 5337
54.5 2989 5251
55 3256 4968
55.5 3559 5044
56 3504 5210
56.5 3357 5301
57 3496 5402
57.5 3713 5348
58 3576 4885
58.5 3387 4489
59 2934 4269
59.5 2752 4566
60 2918 4676
60.5 3174 4597
61 3376 4552
61.5 3312 4226
62 3227 4059
62.5 3065 4036
63 2774 3776
63.5 2527 3552
64 2179 3293
64.5 1948 3093
65 1853 2872
65.5 1800 2912
66 2114 2991
66.5 2013 3235
67 1976 3565
67.5 1920 3782
68 2034 3986
68.5 2058 4032
69 2238 4103
69.5 1946 3924
70 1756 3719
70.5 1665 3396
71 1308 3213
71.5 1117 3001
72 972 2800
72.5 1052 2662
73 1033 2527
73.5 1073 2179
74 902 1946
74.5 868 1797
75 795 1971
75.5 792 2204
76 825 2420
76.5 902 2525
77 831 2624
77.5 774 2892
78 783 2862
78.5 1109 2890
79 1315 3255
79.5 1427 3690
80 1223 4031
80.5 1281 4352
81 1182 4615
81.5 1208 4850
82 1248 4587
82.5 1249 4344
83 1469 4041
83.5 1499 3805
84 1505 3605
84.5 1525 3325
85 1467 3211
85.5 1365 3225
86 1324 3009
86.5 1374 2689
87 1329 2805
87.5 1388 3073
88 1413 3413
88.5 1371 3395
89 1274 3721
89.5 1178 4043
90 1155 4303
90.5 939 4380
91 710 4286
91.5 659 4213
92 689 3830
92.5 883 3460
93 1178 3308
93.5 1311 3428
94 1429 3271
94.5 1566 2990
95 1399 2587
95.5 1188 2243
96 986 2161
96.5 736 2005
97 599 1920
97.5 649 2088
98 708 2016
98.5 777 1813
99 1093 1651
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
.area.above {
fill: rgb(145,207,96);
}
.area.below {
fill: rgb(252,141,89);
}
.legendSizeLine line {
stroke: rgb(145,207,96);
}
.line {
fill: none;
stroke: #000;
stroke-width: 1.5px;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.6.0/d3-legend.min.js""></script>
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.linear()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
// .orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.area()
.interpolate("linear")
.x(function(d) { return x(d.mile); })
.y(function(d) { return y(d["WS100"]); });
var area = d3.svg.area()
.interpolate("linear")
.x(function(d) { return x(d.mile); })
.y1(function(d) { return y(d["WS100"]); });
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
//http://d3-legend.susielu.com/
var linear = d3.scale.linear()
.domain([0,10])
.range(["rgb(252,141,89)", "rgb(145,207,96)"]);
//var svg = d3.select("svg");
svg.append("g")
.attr("class", "legendLinear")
.attr("transform", "translate(20,400)");
var legendLinear = d3.legend.color()
.shapeWidth(100)
// .cells([1, 2]
.cells(2)
.orient('horizontal')
.labels(["WS100 higher el.", "AC100 higher el."])
.scale(linear);
svg.select(".legendLinear")
.call(legendLinear);
d3.tsv("data.tsv", function(error, data) {
if (error) throw error;
data.forEach(function(d) {
d["mile"]= +d["mile"];
d["WS100"]= +d["WS100"];
d["AC100"] = +d["AC100"];
});
x.domain(d3.extent(data, function(d) { return d.mile; }));
y.domain([
d3.min(data, function(d) { return Math.min(d["WS100"], d["AC100"]); }),
d3.max(data, function(d) { return Math.max(d["WS100"], d["AC100"]); })
]);
svg.datum(data);
svg.append("clipPath")
.attr("id", "clip-below")
.append("path")
.attr("d", area.y0(height));
svg.append("clipPath")
.attr("id", "clip-above")
.append("path")
.attr("d", area.y0(0));
svg.append("path")
.attr("class", "area above")
.attr("clip-path", "url(#clip-above)")
.attr("d", area.y0(function(d) { return y(d["AC100"]); }));
svg.append("path")
.attr("class", "area below")
.attr("clip-path", "url(#clip-below)")
.attr("d", area);
svg.append("path")
.attr("class", "line")
.attr("d", line);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "-4.75em")
.style("text-anchor", "end")
.text("Elevation (feet)");
svg.append("g")
.attr("class", "xaxis")
.call(xAxis)
.append("text")
.attr("transform", "rotate(0)")
.attr("x", 880)
.attr("dx", ".95em")
.style("text-anchor", "end")
.text("Distance (miles)");
});
</script>
<div>Source of elevation data: <a href="https://catalog.data.gov/dataset/national-elevation-dataset-ned-1-3-arc-second-downloadable-data-collection-national-geospatial">USGS National Map (1/3 arc-second DEMs)</a></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment