d3 workshop

forked from enjalot's block: d3 workshop

<!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>

d3.json("pics.json", function(err, pics) {
        var data = pics.data.children;
        data.forEach(d=>d.data.created *= 1000)

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", filtered => {
          scatter.data(filtered);
          scatter.update();
          table.data(filtered)
          table.update();
          histogram.data(filtered)
          histogram.update();
        })

table.on("hover", hovered => {
          scatter.highlight(hovered)
          brush.highlight(hovered)
        })
        scatter.on("hover", hovered => {
          table.highlight(hovered)
          brush.highlight(hovered)
        })
        histogram.on("hover", hovered => {
          table.highlight(hovered)
          scatter.highlight(hovered)
          brush.highlight(hovered)
        })
      })
    </script>
  </body>
</html>

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

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