Contours of San Francisco overlayed over OpenStreeMap vector tiles using code from mbostock's vector tiles with multiple layers example. View the hi-res file
See gist for code used to generate contours.
-
-
Save rocLv/d0fb882f52f03cda0aad to your computer and use it in GitHub Desktop.
San Francisco Contours
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> | |
| <meta charset="utf-8"> | |
| <img src="https://gist.github.com/karmadude/5820393/raw/08438eb37a3a4b72ce3c6533f0f4e19751ded723/sfcontour.png" width="960" height="968"> | |
| <script src="http://d3js.org/d3.v3.js"></script> | |
| <script> | |
| d3.select(self.frameElement.parentElement) | |
| .style('background', '#6832b3') | |
| .style('background', '-moz-radial-gradient(center, ellipse cover, #6832b3 0%, #361370 100%)') | |
| .style('background', '-webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#6832b3), color-stop(100%,#361370))') | |
| .style('background', '-webkit-radial-gradient(center, ellipse cover, #6832b3 0%,#361370 100%)'); | |
| d3.select(self.frameElement.parentElement).select("h1") | |
| .style('color', "#2B174B"); | |
| d3.select(self.frameElement) | |
| .style("height", "900px") | |
| .style("border", "none"); | |
| </script> |
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> | |
| <meta charset="utf-8"> | |
| <title>San Francisco Contours</title> | |
| <style> | |
| body { | |
| font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| } | |
| html { | |
| background: none; | |
| } | |
| .frame1 { | |
| width: 980px; | |
| height: auto; | |
| margin: 0 auto; | |
| border: none; | |
| } | |
| .loading { | |
| text-align: center; | |
| font-size: 18px; | |
| color: rgba(255,255,255,0.5); | |
| } | |
| .map { | |
| background: none; | |
| min-height: 800px; | |
| } | |
| .vector path { | |
| fill: none; | |
| stroke: #35143C; | |
| stroke-linejoin: round; | |
| stroke-linecap: round; | |
| } | |
| .vector .major_road { stroke: #D2A1EE; } | |
| .vector .minor_road { stroke: #9A7DAD; } | |
| .vector .highway { stroke: #f39; stroke-width: 1.5px; } | |
| .vector .rail { stroke: #A1EEEB; } | |
| </style> | |
| <div class="frame1"> | |
| <p class="loading">Loading 30MB Contour TopoJSON…</p> | |
| <div class="map"></div> | |
| </div> | |
| <script src="http://code.jquery.com/jquery-2.0.2.min.js"></script> | |
| <script src="http://d3js.org/d3.v3.js"></script> | |
| <script src="http://d3js.org/topojson.v0.min.js"></script> | |
| <script src="http://d3js.org/d3.geo.tile.v0.min.js"></script> | |
| <script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/1.0.1/lodash.min.js"></script> | |
| <script> | |
| d3.select(self.frameElement.parentElement) | |
| .style('background', '#6832b3') | |
| .style('background', '-moz-radial-gradient(center, ellipse cover, #6832b3 0%, #361370 100%)') | |
| .style('background', '-webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#6832b3), color-stop(100%,#361370))') | |
| .style('background', '-webkit-radial-gradient(center, ellipse cover, #6832b3 0%,#361370 100%)'); | |
| d3.select(self.frameElement.parentElement).select("h1") | |
| .style('color', "#2B174B"); | |
| d3.select(self.frameElement) | |
| .style("height", "900px") | |
| .style("border", "none"); | |
| var width = 918, | |
| height = 800; | |
| var projection = d3.geo.mercator() | |
| .center([-122.433701, 37.767683]) | |
| .scale(250000) | |
| .translate([width / 2, height / 2]); | |
| var path = d3.geo.path() | |
| .projection(projection); | |
| var tiler = d3.geo.tile() | |
| .size([width, height]); | |
| var svg = d3.select(".map").append("svg") | |
| .attr("id", "sfmap") | |
| .attr("width", width) | |
| .attr("height", height); | |
| d3.json("https://dl.dropboxusercontent.com/u/1392786/d3/sfc.json", function(error, json) { | |
| var contours = topojson.object(json, json.objects.sfcontours); | |
| //800 - Normal | |
| //810 - Depression | |
| //820 - Intermediate Normal | |
| //830 - Intermediate Depression | |
| var isoline = _.countBy(contours.geometries, function(c) { | |
| return c.properties.ISOLINE_TY; | |
| }); | |
| isoline["800 - Normal"] = 0.5; | |
| isoline["810 - Depression"] = 0.5; | |
| isoline["820 - Intermediate Normal"] = 0.25; | |
| isoline["830 - Intermediate Depression"] = 0.25; | |
| var elevationExtent = d3.extent(contours.geometries, function(c) { | |
| return c.properties.ELEVATION; | |
| }); | |
| var color = d3.scale.threshold() | |
| .domain([elevationExtent[0], 0, 100, 200, 300, 400, 600, 800, elevationExtent[1]]) | |
| .range(["#00441B","#006D2C","#238B45","#41AB5D","#74C476", "#A1D99B", "#C7E9C0", "#E5F5E0", "#F7FCF5"].reverse()); | |
| var elevationGroups = _.groupBy(contours.geometries, function(c) { | |
| return c.properties.ELEVATION; | |
| }); | |
| var vector = svg.append("g") | |
| .attr("class", "vector") | |
| .call(renderTiles, "highroad") | |
| .call(renderTiles, "buildings"); | |
| //svg.call(drawContours, elevationGroups, {color:color, isoline:isoline}); | |
| svg.call(drawContoursSingleLine, contours.geometries, {color:color, isoline:isoline}); | |
| d3.select(".loading").remove(); | |
| }); | |
| // From http://bl.ocks.org/mbostock/5798874 | |
| function renderTiles(svg, type) { | |
| svg.append("g") | |
| .attr("class", type) | |
| .selectAll("g") | |
| .data(tiler | |
| .scale(projection.scale() * 2 * Math.PI) | |
| .translate(projection([0, 0]))) | |
| .enter().append("g") | |
| .each(function(d) { | |
| var g = d3.select(this); | |
| d3.json("http://" + ["a", "b", "c"][(d[0] * 31 + d[1]) % 3] + ".tile.openstreetmap.us/vectiles-" + type + "/" + d[2] + "/" + d[0] + "/" + d[1] + ".json", function(error, json) { | |
| g.selectAll("path") | |
| .data(json.features.sort(function(a, b) { return a.properties.sort_key - b.properties.sort_key; })) | |
| .enter().append("path") | |
| .attr("class", function(d) { return d.properties.kind; }) | |
| .attr("d", path); | |
| }); | |
| }); | |
| } | |
| function drawContours(g, plotData, options) { | |
| var contours = g.append("g") | |
| .attr("class", "contours"); | |
| _.each(plotData, function(d, e) { | |
| e = +e; | |
| contours.append("path") | |
| .attr("d", path({ | |
| type: "MultiLineString", | |
| coordinates: d.map(function(t) { | |
| return t.coordinates; | |
| }) | |
| })) | |
| .style("fill", "none") | |
| .style("stroke", function(d) { return options.color(e); }) | |
| .style("stroke-width", 0.5); | |
| }); | |
| } | |
| drawContoursSingleLine = function(g, plotData, options) { | |
| var contours = g.append("g") | |
| .attr("class", "contours"); | |
| contours.selectAll("path") | |
| .data(plotData) | |
| .enter().append("path") | |
| .attr("d", path) | |
| .style("fill", "none") | |
| .style("stroke", function(d) { return options.color(d.properties.ELEVATION); }) | |
| .style("stroke-width", function(d) { | |
| return 0.5; | |
| //return options.isoline[d.properties.ISOLINE_TY]; | |
| }); | |
| }; | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment