html5devconf project

project

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta charset="utf-8">
    <style>
      svg {
        width: 500px;
        height: 500px;
        border: 1px solid gray;
        float: left;
      }
      .background {
        fill: #4B9E9E;
        fill-opacity: 0.1;
      }
      .extent {
        fill: #78C5C5;
        fill-opacity: 0.4;
      }
      .resize rect {
        fill: #276C86;
      }
      #table {
        width: 400px;
        float:left;
      }
    </style>
  </head>
  <body>
    <svg>
     
    </svg>

var topPadding = 40;
        var leftPadding = 60;
        var svg = d3.select("svg")
        var g = svg.append("g")
        .attr("transform", "translate(" + [leftPadding, topPadding ]+")")

var scatter = Scatter();
        scatter.data(posts)
        scatter(g);

var div = d3.select("#table table");
        var table = Table()
          .data(posts)
        table(div);

scatter.on("filter", function(filtered) {
          console.log("filter event", filtered)
          table.data(filtered);
          table(div);
        })

table.on("hover", function(data) {
          console.log("hovered", data);
          scatter.highlight(data)
        })
      })
    </script>

</body></html>

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js