giannafusaro/sf-street-sweep-map.html

## sf-street-sweep-map.html
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>San Francisco Street Sweep Routes</title>

<head>
  <link rel="stylesheet" href="sf-sweep.css" />
  <script src="javascript/d3.v3.min.js"></script>
  <script src="javascript/topojson.js"></script>
  <script src="javascript/queue.v1.min.js"></script>
  <script src="javascript/lodash.js"></script>
</head>

<body>
  <div class="frame1">
    <div class="map"></div>
  </div>
</body>

<script>
  var width = 800,
    height = 900;

  var projection = d3.geo.mercator()
    .center([-122.422218291145, 37.7455788136374])
    .scale(1005000)
    .translate([width / 2, height / 2]);

  var path = d3.geo.path()
    .projection(projection);

  var zoom = d3.behavior.zoom()
    .translate([0, 0])
    .scale(1)
    .scaleExtent([1, 8])
    .on("zoom", zoomed);


  var sidebar = d3.select(".map").append("svg")
    .attr("class", "sidebar")
    .attr("position", "absolute")
    .attr("height", "900px")
    .attr("width", "120px");

  var dayList = sidebar.append('g')
    .attr("class", "days");

  var svg = d3.select(".map").append("svg")
    .attr("id", "sfmap")
    .attr("width", width)
    .attr("height", height);

  svg.append("rect")
    .attr("class", "overlay")
    .attr("width", width)
    .attr("height", height)
    .call(zoom);

  var features = svg.append("g");

  queue()
    .defer(d3.json, "tiles/land_usages_tiles.json")
    .defer(d3.json, "tiles/highroad_tiles.json")
    .defer(d3.json, "data/routes.json")
    .await(ready);

  function ready(error, land, highroads, sfj) {

    var vector = features.append("g")
      .attr("class", "vector")
      .call(renderLayer, highroads, 'highroad')
      .call(renderLayer, land, "land-usages");

    svg.call(drawRoutes, topojson.feature(sfj, sfj.objects.street_sweep_routes_all).features);

    drawDayNav();
    attachDayListeners();
  }

  function drawRoutes(g, plotData) {

    var routesContainer = features.append("g")
      .attr("class", "routes")
      .attr("d", path);

    _.each(plotData, function(d, e) {
      var route_path = routesContainer.append("path")
        .attr("class", "route " + d.properties.label)
        .attr("id", d.id)
        .attr("d", path(d.geometry));
    });
  }

  function renderLayer(elem, plotData, name) {
    var container = elem.append("g")
      .attr("class", name);

    _.each(plotData, function(d, e) {
      container.append("path")
        .data(d.features)
        .attr("class", function(d) {
          return d.properties.kind;
        })
        .attr("name", function(d) {
          return d.properties.name;
        })
        .attr("d", path(d));
    });
  }

  function zoomed() {
    features.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
  }


  function drawDayNav() {
    var days_data = [
      ["sun", "Su"],
      ["mon", "Mo"],
      ["tues", "Tu"],
      ["wed", "We"],
      ["thu", "Th"],
      ["fri", "Fr"],
      ["sat", "Sa"],
      ["all", "All"]
    ];
    _.each(days_data, function(d, e) {

      dayList.append('circle')
        .attr("class", "day " + d[0])
        .data(d)
        .attr('cx', '60')
        .attr('cy', 150 + e * 75)

      dayList.append('text')
        .text(d[1])
        .data(d)
        .attr("class", 'day ' + d[0])
        .attr('x', '60')
        .attr('y', 155 + e * 75)
    });
  }

  function attachDayListeners() {
    var days = dayList.selectAll('.day');
    days.on('mouseenter', function(d) {
      dayList.select('.day.' + d)
        .style('fill', '#4d5863');
    });
    days.on('mouseleave', function(d) {
      dayList.selectAll('circle.day')
        .style('fill', '#363e46');
    });
    days.on('click', function(day) {
      dayList
        .attr("class", 'days ' + day);
      features.select('.routes')
        .attr("class", "routes " + day);
    });
  }

  d3.select(self.frameElement)
    .style("height", "900px")
    .style("border", "none");
</script>

</html>
	<!DOCTYPE html>
	<html>
	<meta charset="utf-8">
	<title>San Francisco Street Sweep Routes</title>

	<head>
	<link rel="stylesheet" href="sf-sweep.css" />
	<script src="javascript/d3.v3.min.js"></script>
	<script src="javascript/topojson.js"></script>
	<script src="javascript/queue.v1.min.js"></script>
	<script src="javascript/lodash.js"></script>
	</head>

	<body>
	<div class="frame1">
	<div class="map"></div>
	</div>
	</body>

	<script>
	var width = 800,
	height = 900;

	var projection = d3.geo.mercator()
	.center([-122.422218291145, 37.7455788136374])
	.scale(1005000)
	.translate([width / 2, height / 2]);

	var path = d3.geo.path()
	.projection(projection);

	var zoom = d3.behavior.zoom()
	.translate([0, 0])
	.scale(1)
	.scaleExtent([1, 8])
	.on("zoom", zoomed);


	var sidebar = d3.select(".map").append("svg")
	.attr("class", "sidebar")
	.attr("position", "absolute")
	.attr("height", "900px")
	.attr("width", "120px");

	var dayList = sidebar.append('g')
	.attr("class", "days");

	var svg = d3.select(".map").append("svg")
	.attr("id", "sfmap")
	.attr("width", width)
	.attr("height", height);

	svg.append("rect")
	.attr("class", "overlay")
	.attr("width", width)
	.attr("height", height)
	.call(zoom);

	var features = svg.append("g");

	queue()
	.defer(d3.json, "tiles/land_usages_tiles.json")
	.defer(d3.json, "tiles/highroad_tiles.json")
	.defer(d3.json, "data/routes.json")
	.await(ready);

	function ready(error, land, highroads, sfj) {

	var vector = features.append("g")
	.attr("class", "vector")
	.call(renderLayer, highroads, 'highroad')
	.call(renderLayer, land, "land-usages");

	svg.call(drawRoutes, topojson.feature(sfj, sfj.objects.street_sweep_routes_all).features);

	drawDayNav();
	attachDayListeners();
	}

	function drawRoutes(g, plotData) {

	var routesContainer = features.append("g")
	.attr("class", "routes")
	.attr("d", path);

	_.each(plotData, function(d, e) {
	var route_path = routesContainer.append("path")
	.attr("class", "route " + d.properties.label)
	.attr("id", d.id)
	.attr("d", path(d.geometry));
	});
	}

	function renderLayer(elem, plotData, name) {
	var container = elem.append("g")
	.attr("class", name);

	_.each(plotData, function(d, e) {
	container.append("path")
	.data(d.features)
	.attr("class", function(d) {
	return d.properties.kind;
	})
	.attr("name", function(d) {
	return d.properties.name;
	})
	.attr("d", path(d));
	});
	}

	function zoomed() {
	features.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
	}


	function drawDayNav() {
	var days_data = [
	["sun", "Su"],
	["mon", "Mo"],
	["tues", "Tu"],
	["wed", "We"],
	["thu", "Th"],
	["fri", "Fr"],
	["sat", "Sa"],
	["all", "All"]
	];
	_.each(days_data, function(d, e) {

	dayList.append('circle')
	.attr("class", "day " + d[0])
	.data(d)
	.attr('cx', '60')
	.attr('cy', 150 + e * 75)

	dayList.append('text')
	.text(d[1])
	.data(d)
	.attr("class", 'day ' + d[0])
	.attr('x', '60')
	.attr('y', 155 + e * 75)
	});
	}

	function attachDayListeners() {
	var days = dayList.selectAll('.day');
	days.on('mouseenter', function(d) {
	dayList.select('.day.' + d)
	.style('fill', '#4d5863');
	});
	days.on('mouseleave', function(d) {
	dayList.selectAll('circle.day')
	.style('fill', '#363e46');
	});
	days.on('click', function(day) {
	dayList
	.attr("class", 'days ' + day);
	features.select('.routes')
	.attr("class", "routes " + day);
	});
	}

	d3.select(self.frameElement)
	.style("height", "900px")
	.style("border", "none");
	</script>

	</html>