Skip to content

Instantly share code, notes, and snippets.

@wsvekla

wsvekla/README.md

Last active December 11, 2015 17:49
Show Gist options
  • Save wsvekla/4637448 to your computer and use it in GitHub Desktop.
Save wsvekla/4637448 to your computer and use it in GitHub Desktop.
Download ZIP
Mouseover Philly Streets
Raw
README.md

Mouseover streets in this D3.js-driven visualization that allows users to visualize the citywide extent of a given street. The City of Philadelphia Streets Department maintains and distributes geospatial data representing and describing the city's street network. The data along with more information is availabe at Open Data Philly. Street location and name data is stored in a CartoDB table. A merge by attribute operation, street name in this case, achieved improvements over the previous file size that approached 3MB.

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.streets {
fill: none;
stroke: #aaa;
stroke-width: .5px;
stroke-linecap: round;
}
.streets:hover {
stroke: #f00;
stroke-width: 3px;
}
text {
font-family: sans-serif;
font-size: 50px;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var width = 960,
height = 500;
var projection = d3.geo.mercator()
.center([-75.12, 40])
.scale(80000);
var path = d3.geo.path()
.projection(projection);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var text = svg.append("text")
.attr("y", height/10)
.attr("text-anchor", "left")
.text("mouseover streets");
d3.json("http://wsvekla.cartodb.com/api/v2/sql?format=GeoJSON&q=SELECT name, the_geom FROM streets", function(error, geojson) {
svg.selectAll("path")
.data(geojson.features)
.enter().append("path")
.attr("class", "streets")
.attr("id", function(d){return d.properties.name;})
.attr("d", path)
.on("mouseover", function(){text.text(this.id);})
.on("mouseout", function(){text.text("");});
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment