D3 Examples - html5devconf project

xxxxxxxxxx
 
<!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>
​
    <div id="table">
      <table>
      </table>
    </div>
​
    <script src="https://d3js.org/d3.v3.js"></script>
    <script src="table.js"></script>
    <script src="scatter.js"></script>
    <script>
      d3.json("data.json", function(err, data){
        var posts = data.data.children;
        //console.log(posts);
​
        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>
    