michellechandra/citibike Secret

## citibike
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Leaflet and D3 Map</title>
    <script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js?v1.3.0"></script>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css"/>
    <script src="http://d3js.org/d3.v3.min.js"></script>

    <style type="text/css">

    #map {
        width: 960px;
        height: 800px;
    }

    .line {
        fill: none;
        stroke: rgb(217,91,67);
        stroke-width: 2px;
         stroke-opacity:0.95;
    }


    </style>
</head>
<body>

    <div id="map"></div>
    <script>

    // Store Stamen Map tiles as a new layer
    var layer = new L.StamenTileLayer("toner");

    // Declare a new Leaflet Map, setView and Zoom Level
    var map = new L.Map("map", {
    center: new L.LatLng(40.739, -73.986),
    zoom: 13,
    });
    map.addLayer(layer);  // add Stamen Tile Layer to leaflet Map

    // Add an SVG element to Leaflet’s overlay pane
    var svg = d3.select(map.getPanes().overlayPane)
        .append("svg");
    var g = svg.append("g").attr("class", "leaflet-zoom-hide");

    d3.json("linetwo.json", function(geoShape) {

    //create a d3,geo.path to convert GeoJSON to SVG
    var transform = d3.geo.transform({point: projectPoint}),
            path = d3.geo.path().projection(transform);

    // debugger;
    // create path elements for each of the features
    d3_features = g.selectAll("path")
                   .data(geoShape.features)
                   .enter().append("path");

    map.on("viewreset", reset);
    reset();


    // fit the SVG element to leaflet's map layer
        function reset() {

            bounds = path.bounds(geoShape);

            var topLeft = bounds[0],
                bottomRight = bounds[1];

            svg .attr("width", bottomRight[0] - topLeft[0])
                .attr("height", bottomRight[1] - topLeft[1])
                .style("left", topLeft[0] + "px")
                .style("top", topLeft[1] + "px");

            g .attr("transform", "translate(" + -topLeft[0] + ","
                                              + -topLeft[1] + ")");

            // initialize the path data
            d3_features.attr("d", path)
                .attr('class', 'line');
        }

        // Use Leaflet to implement a D3 geometric transformation.
        function projectPoint(x, y) {
            var point = map.latLngToLayerPoint(new L.LatLng(y, x));
            this.stream.point(point.x, point.y);
        }

    })


    </script>
</body>
</html>

## linetwo
{ "type": "FeatureCollection",
"features": [{	"type": "Feature",
				"properties": {
								        "name": "po",
								        "popupContent": "yo"
								    },
				"geometry": {	"type": "LineString",
								"coordinates": [
									[ -73.99510132 , 40.73331967],
									[ -73.98776323, 40.71269042],
									[ -73.99415556, 40.74173969],
									[ -74.00197139, 40.7454973],
									[ -73.9659641, 40.68317813],
									[ -73.95881081, 40.6845683],
									[ -73.97895137, 40.68312489],
									[ -74.00681753, 40.74334935],
									[ -73.984844, 40.713126],
									[ -74.013942, 40.701907],
									[ -73.99682619, 40.71117444],
									[ -73.981346, 40.714215],
									[ -73.97772429, 40.72938685],
									[ -73.99720307, 40.7218158],
									[ -73.99404649, 40.72903917],
									[ -74.00443172, 40.74206539],
									[ -73.99915362, 40.74475148],
									[ -73.97371465, 40.7643971],
									[ -74.00711384, 40.73291553],
									[ -73.98978041, 40.7262807],
									[ -73.99695094, 40.72679454],
									[ -73.99069656, 40.72502876],
									[ -73.99695094, 40.72679454],
									[ -74.00618026, 40.73652889],
									[ -73.99915362, 40.74475148],
									[ -74.00483091, 40.73535398],
									[ -73.99726235, 40.74238787]
								]
				}
			}]
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>Leaflet and D3 Map</title>
	<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js?v1.3.0"></script>
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css"/>
	<script src="http://d3js.org/d3.v3.min.js"></script>

	<style type="text/css">

	#map {
	width: 960px;
	height: 800px;
	}

	.line {
	fill: none;
	stroke: rgb(217,91,67);
	stroke-width: 2px;
	stroke-opacity:0.95;
	}


	</style>
	</head>
	<body>

	<div id="map"></div>
	<script>

	// Store Stamen Map tiles as a new layer
	var layer = new L.StamenTileLayer("toner");

	// Declare a new Leaflet Map, setView and Zoom Level
	var map = new L.Map("map", {
	center: new L.LatLng(40.739, -73.986),
	zoom: 13,
	});
	map.addLayer(layer); // add Stamen Tile Layer to leaflet Map

	// Add an SVG element to Leaflet’s overlay pane
	var svg = d3.select(map.getPanes().overlayPane)
	.append("svg");
	var g = svg.append("g").attr("class", "leaflet-zoom-hide");

	d3.json("linetwo.json", function(geoShape) {

	//create a d3,geo.path to convert GeoJSON to SVG
	var transform = d3.geo.transform({point: projectPoint}),
	path = d3.geo.path().projection(transform);

	// debugger;
	// create path elements for each of the features
	d3_features = g.selectAll("path")
	.data(geoShape.features)
	.enter().append("path");

	map.on("viewreset", reset);
	reset();


	// fit the SVG element to leaflet's map layer
	function reset() {

	bounds = path.bounds(geoShape);

	var topLeft = bounds[0],
	bottomRight = bounds[1];

	svg .attr("width", bottomRight[0] - topLeft[0])
	.attr("height", bottomRight[1] - topLeft[1])
	.style("left", topLeft[0] + "px")
	.style("top", topLeft[1] + "px");

	g .attr("transform", "translate(" + -topLeft[0] + ","
	+ -topLeft[1] + ")");

	// initialize the path data
	d3_features.attr("d", path)
	.attr('class', 'line');
	}

	// Use Leaflet to implement a D3 geometric transformation.
	function projectPoint(x, y) {
	var point = map.latLngToLayerPoint(new L.LatLng(y, x));
	this.stream.point(point.x, point.y);
	}

	})


	</script>
	</body>
	</html>
	{ "type": "FeatureCollection",
	"features": [{ "type": "Feature",
	"properties": {
	"name": "po",
	"popupContent": "yo"
	},
	"geometry": { "type": "LineString",
	"coordinates": [
	[ -73.99510132 , 40.73331967],
	[ -73.98776323, 40.71269042],
	[ -73.99415556, 40.74173969],
	[ -74.00197139, 40.7454973],
	[ -73.9659641, 40.68317813],
	[ -73.95881081, 40.6845683],
	[ -73.97895137, 40.68312489],
	[ -74.00681753, 40.74334935],
	[ -73.984844, 40.713126],
	[ -74.013942, 40.701907],
	[ -73.99682619, 40.71117444],
	[ -73.981346, 40.714215],
	[ -73.97772429, 40.72938685],
	[ -73.99720307, 40.7218158],
	[ -73.99404649, 40.72903917],
	[ -74.00443172, 40.74206539],
	[ -73.99915362, 40.74475148],
	[ -73.97371465, 40.7643971],
	[ -74.00711384, 40.73291553],
	[ -73.98978041, 40.7262807],
	[ -73.99695094, 40.72679454],
	[ -73.99069656, 40.72502876],
	[ -73.99695094, 40.72679454],
	[ -74.00618026, 40.73652889],
	[ -73.99915362, 40.74475148],
	[ -74.00483091, 40.73535398],
	[ -73.99726235, 40.74238787]
	]
	}
	}]
	}