Skip to content

Instantly share code, notes, and snippets.

@karmadude
Last active February 7, 2017 08:24
Show Gist options
  • Star 8 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save karmadude/5820393 to your computer and use it in GitHub Desktop.
Save karmadude/5820393 to your computer and use it in GitHub Desktop.
San Francisco Contours
<!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>
<!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