D3 Examples - d3 workshop

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<html>
  <head>
    <style>
      svg {
        width: 960px;
        height: 500px;
        border: 1px solid gray;
      }
      .table {
        width: 960px;
        height: 500px;
        overflow: scroll;
      }
      .axis {
        font-size: 10px;
      }
      .axis path {
        fill: none;
        stroke: #000000;
      }
      .axis .tick line {
        stroke: #000;
      }
    </style>
  </head>
  <body>
   
    <svg></svg>
    <div id="display"></div>
​
    <script src="https://d3js.org/d3.v3.js"></script>
    <script src="table.js"></script>
    <script src="scatter.js"></script>
    <script src="brush.js"></script>
    <script src="histogram.js"></script>
    <script>
      var display = d3.select("#display");
​
      d3.json("pics.json", function(err, pics) {
        var data = pics.data.children;
        data.forEach(function(d) {
          d.data.created *= 1000;
        })
        console.log(data);
​
        var display = d3.select("#display")
​
        //table
        var tdiv = display.append("div").classed("table", true)
        var table = d3.chart.table()
        table.data(data)
        table(tdiv);
​
        var svg = d3.select("svg")
        //scatter plot
        var sgroup = svg.append("g")
          .attr("transform", "translate(50, 0)")
        var scatter = d3.chart.scatter()
        scatter.data(data)
        scatter(sgroup)
​
        //histogram
        var hgroup = svg.append("g")
          .attr("transform", "translate(450, 0)")
        var histogram = d3.chart.histogram()
        histogram.data(data)
        histogram(hgroup)
​
​
        //brush
        var bgroup = svg.append("g")
          .attr("transform", "translate(100, 430)")
        var brush = d3.chart.brush()
        brush
          .data(data)
          .width(800)
        brush(bgroup)
​
        brush.on("filter", function(filtered) {
          console.log("filtered", filtered);
​
          scatter.data(filtered);
          scatter.update();
          table.data(filtered)
          table.update();
          histogram.data(filtered)
          histogram.update();
​
​
        })
​
        table.on("hover", function(hovered) {
          scatter.highlight(hovered)
          brush.highlight(hovered)
        })
        scatter.on("hover", function(hovered) {
          table.highlight(hovered)
          brush.highlight(hovered)
        })
        histogram.on("hover", function(hovered) {
          table.highlight(hovered)
          scatter.highlight(hovered)
          brush.highlight(hovered)
        })
      
      })
​
    </script>
  </body>
</html>
​
    