friedbunny/README.md

## README.md

      
    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.
Download size can be further reduced by using PostGIS functions ST_Simplify or ST_SimplifyPreserveTopology. Without significant loss of detail, file size is about 185KB (from ~600KB) at simplication level 0.0007.

  
## 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 src="http://d3js.org/topojson.v0.min.js"></script>

<script>

var width = 960,
height = 500;

var projection = d3.geo.mercator()
    .center([-75.12, 40])
    .scale(470000);

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, ST_SimplifyPreserveTopology(the_geom,0.0007) as 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>

## streets.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              streets.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	<!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 src="http://d3js.org/topojson.v0.min.js"></script>

	<script>

	var width = 960,
	height = 500;

	var projection = d3.geo.mercator()
	.center([-75.12, 40])
	.scale(470000);

	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, ST_SimplifyPreserveTopology(the_geom,0.0007) as 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>