Skip to content

Instantly share code, notes, and snippets.

@almccon

almccon/.block

Created November 10, 2016 22:37
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 almccon/a76bb1eb9e3172720c3b9bd090ace725 to your computer and use it in GitHub Desktop.
Save almccon/a76bb1eb9e3172720c3b9bd090ace725 to your computer and use it in GitHub Desktop.
Download ZIP
turf: measurement
Raw
.block
license: gpl-3.0
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
path {
fill: #ccc;
stroke: #fff;
stroke-width: .5px;
}
path:hover {
fill: red;
}
</style>
<body>
<canvas></canvas>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Turf.js/2.0.2/turf.min.js"></script>
<script>
var width = 960,
height = 500;
var canvas = d3.select("canvas").node()
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext('2d')
var projection = d3.geo.mercator()
.center([-122.2615006,37.8469266])
.scale(2000)
var path = d3.geo.path()
.projection(projection)
.context(ctx)
var url = "http://enjalot.github.io/wwsd/data/USA/california-streams.topojson"
d3.json(url, function(error, topology) {
if (error) throw error;
console.log("topojson", topology)
var geojson = topojson.feature(topology, topology.objects['us-streams-unmerged-18']);
console.log("geojson", geojson)
var maxLength = d3.max(geojson.features, function(d) {
var length = turf.lineDistance(d, 'miles');
d.properties.length = length;
return length;
})
var color = d3.scale.threshold()
.domain([0, 2, 20, maxLength])
.range(["#853c3c", "#85763c", "#3c8544", "#0068b7"])
ctx.strokeStyle = "#111";
ctx.fillStyle = "#99ffe8"
geojson.features.forEach(function(feature) {
ctx.strokeStyle = color(feature.properties.length)
ctx.beginPath()
path(feature)
ctx.stroke();
})
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment