<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>UK House Price Map</title>

  <!-- Mobile views -->
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
  <style>
    html,
    body,
    #vis {
      margin: 0px;
      padding: 0px;
      height: 100%;
      width: 100%;
      background-color: #eeeeee;
      position: relative;
      font-family: 'Open Sans', sans-serif;
    }


    .area {
      stroke: #FFF;
      stroke-width: .1px;
    }

    #info {
      padding: 10px;
      position: absolute;
      visibility: hidden;
      z-index: 10;
    }

    #info.active {
      visibility: visible;
      background-color: #eee;
      opacity: 0.9;
    }
  </style>
</head>

<body>

  <div id="vis">

  </div>
  <div id="info">
    <h1 id="area_name"></h1>
    <p>This is <span id="place_name"></span> and the average house price in 2017 is <span id="area_price"></span></p>
  </div>

  <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.6.20/topojson.min.js"></script>
  <script>
    // dimensions of visualisation
    var width;
    var height;

    // 'svg' to draw in, 'g' element to group everything together
    var svg;
    var g;

    // projection to convert from coordinates to pixels
    var projection;
    // path function to create line paths
    var path;

    var house_data;
    var active = d3.select(null);

    var zoom = d3.behavior.zoom()
      .on("zoom", handle_zoom);



    function reset() {
      active.style("opacity", 1.0);
      active.style("stroke", "#hsla(30, 0%, 46%, 0.86)");
      active = d3.select(null)

      d3.select("#info")
        .classed("active", false)
        .style("top", height + "px")
        .style("left", width + "px");

      svg.transition()
        .duration(750)
        .call(zoom.translate([0, 0]).scale(1).event);
    }


    function handle_zoom() {
      g.style("stroke-width", 0.05 / d3.event.scale + "px");
      g.attr("transform", "translate(" + d3.event.translate.join(",") + ")scale(" + d3.event.scale + ")");
    }

    function clicked(d) {
      if (active.node() === this) {
        reset();
      } else {
        active.style("opacity", 1.0);
        active.style("stroke", "#FFF");
        active = d3.select(this);
        active.style("opacity", 0.3)
        active.style("stroke", "#c0c0c0");

        var b = path.bounds(d);
        var dx = b[1][0] - b[0][0];
        var dy = b[1][1] - b[0][1];
        var x = (b[0][0] + b[1][0]) / 2;
        var y = (b[0][1] + b[1][1]) / 2;
        var s = 0.95 / Math.max(dx / width, dy / height);
        var t = [width / 2 - s * x, height / 2 - s * y];

        svg.transition()
          .duration(750)
          .call(zoom.translate(t).scale(s).event);

        d3.select("#info")
          .classed("active", true)
          .style("top", "30px")
          .style("left", "30px");

        var area_name = "";
        var place_name = "";
        var area_price = "";

        for (var i = 0; i < house_data.length; i++) {
          if(house_data[i].chloro17 === d.id) {
            place_name = house_data[i].lad;
            area_price = "£" + house_data[i].seventeen;
            area_name = house_data[i].lad;

          }
        }

        d3.select("#area_name")
            .text(area_name);

        d3.select("#place_name")
          .text(area_name);

        d3.select("#area_price")
          .text(area_price)

      }
    }


    function draw(topo_lad_eng) {

      projection
        .scale(1)
        .translate([0, 0]);

      var b = path.bounds(topojson.feature(topo_lad_eng, topo_lad_eng.objects["lad"]));
      var s = .95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height);
      var t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];

      projection
        .scale(s)
        .translate(t);

      var areas = g.selectAll(".area")
        .data(topojson.feature(topo_lad_eng, topo_lad_eng.objects["lad"]).features);

      areas
        .enter()
        .append("path")
        .attr("class", "area")
        .attr("fill", function(d) {
          for (var i = 0; i < house_data.length; i++) {
            if (house_data[i].lad_code === d.id) {
              return house_data[i].color;
              console.log(color);
            }
          }
          return "#FFFFFF";
        })
        .attr("id", function(d) {
          return d.id;
        })
        .attr("d", path)
        .on("click", clicked);
    }

    // initialise our visualisation
    function init() {

      width = document.getElementById("vis").clientWidth;
      height = document.getElementById("vis").clientHeight;

      svg = d3.select("#vis")
        .append("svg")
        .attr("width", width)
        .attr("height", height);

      g = svg.append("g");

      svg.call(zoom);

      projection = d3.geo.albers()
        .rotate([0, 0]);

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

      queue()
        .defer(d3.json, "topo_lad_eng.json")
        .defer(d3.csv, "chloro17.csv")
        .await(function(error, boundary_data, chloro17) {
          house_data = chloro17;
          console.log(boundary_data)
          console.log(house_data)
          draw(boundary_data);

        });
    }

    init();

    function stopped() {
      if (d3.event.defaultPrevented) {
        d3.event.stopPropagation();
      }
    }
  </script>

</body>

</html>
