friedbunny · December 11, 2015 22:38 · wsvekla · Jan 30, 2013
diff --git a/README.md b/README.md
diff --git a/index.html b/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>
diff --git a/streets.json b/streets.json
	<!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>