Skip to content

Instantly share code, notes, and snippets.

@vjwilson

vjwilson/.block

Last active March 31, 2019 21:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save vjwilson/6740993cb75f3ae3285eb189c5a16bef to your computer and use it in GitHub Desktop.
Save vjwilson/6740993cb75f3ae3285eb189c5a16bef to your computer and use it in GitHub Desktop.
Download ZIP
Altitudes in North Carolina
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<script>
var margin = {top: 30, right: 20, bottom: 40, left: 60};
var width = 960 - margin.left - margin.right;
var height = 500 - margin.top - margin.bottom;
var points = [
{
name: 'Cape Hatteras',
latitude: 35.254581,
longitude: -75.51995,
altitudeFt: 10
},
{
name: 'Ocracoke',
latitude: 35.112778,
longitude: -75.975833,
altitudeFt: 3
},
{
name: 'New Bern',
latitude: 35.1085,
longitude: -77.044111,
altitudeFt: 30
},
{
name: 'Kinston',
latitude: 35.270556,
longitude: -77.585,
altitudeFt: 43
},
{
name: 'Dunn',
latitude: 35.310360,
longitude: -78.610836,
altitudeFt: 207
},
{
name: 'Charlotte',
latitude: 35.26055556,
longitude: -80.84305556,
altitudeFt: 761
},
{
name: 'Morganton',
latitude: 35.7425,
longitude: -81.692222,
altitudeFt: 1161
},
{
name: 'Old Fort',
latitude: 35.629444,
longitude: -82.179167,
altitudeFt: 1447
},
{
name: 'Mount Mitchell',
latitude: 35.764857,
longitude: -82.26506,
altitudeFt: 6684
},
{
name: 'Asheville',
latitude: 35.58,
longitude: -82.555833,
altitudeFt: 2134
},
{
name: 'Mount Pisgah',
latitude: 35.4255,
longitude: -82.7569,
altitudeFt: 5721
},
{
name: 'Cullowhee',
latitude: 35.309722,
longitude: -83.183611,
altitudeFt: 2116
}
]
var xScale = d3.scaleLinear()
.domain([-84.31666667, -75.46666667])
.range([margin.left, width + margin.left]);
var yScale = d3.scaleLinear()
.domain([0, 7000])
.range([height + margin.top, margin.top]);
var altitudeLine = d3.line()
.x((d) => { return xScale(d.longitude); })
.y((d) => { return yScale(d.altitudeFt); });
var xAxis = d3.axisBottom()
.scale(xScale);
var yAxis = d3.axisLeft()
.scale(yScale);
// Feel free to change or delete any of the code you see in this editor!
var svg = d3.select("body").append("svg")
.attr("width", 960)
.attr("height", 500)
svg.append('path')
.attr('d', altitudeLine(points))
.attr("stroke", "black")
.attr("fill", "none");
svg.append("text")
.text("Altitude in North Carolina")
.attr("y", 30)
.attr("x", 480)
.attr("font-size", 16)
.attr("font-family", "monospace")
.attr("text-anchor", "middle")
svg.append("g")
.attr("class", "x axis")
.attr("transform", `translate(0, ${height + margin.top})`)
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", `translate(${margin.left}, 0)`)
.call(yAxis);
svg.append("text")
.text("Altitude (ft.)")
.attr("font-size", 12)
.attr("font-family", "monospace")
.attr("text-anchor", "middle")
.attr("transform", `translate(${margin.left / 4}, ${height / 2}) rotate(-90)`)
svg.append("text")
.text("Longitude")
.attr("y", height + margin.top * 2)
.attr("x", 480)
.attr("font-size", 16)
.attr("font-family", "monospace")
.attr("text-anchor", "middle")
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment