Using turf.js to measure features
forked from mbostock's block: U.S. Counties TopoJSON
forked from enjalot's block: WWSD #12: d3 + TopoJSON
forked from enjalot's block: WWSD #13: d3 + Canvas
forked from enjalot's block: WWSD #16: turf: measurement
| <!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() | |
| .rotate([0,90]) | |
| .center([-131.537515,-19.675455]) | |
| .scale(3500) | |
| .translate([width/2, 0]) | |
| 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; | |
| }) | |
| ctx.strokeStyle = "#111"; | |
| ctx.fillStyle = "rgba(20, 20, 220, 0.1)" | |
| geojson.features.forEach(function(feature) { | |
| var buffered = turf.buffer(feature, 0.03, 'degrees') | |
| ctx.beginPath() | |
| path(buffered) | |
| ctx.fill(); | |
| }) | |
| }); | |
| </script> |
