d3 Tutorial: Coordinated Views

<!DOCTYPE html>
<meta charset="utf-8">
<html>
  <head>
    <style>
      .axis {
        font-size: 10px;
      }
      .axis path {
        fill: none;
        stroke: #000000;
      }
      .axis .tick line {
        stroke: #000;
      }
        
        .states {
            fill: #ccc;
            stroke: #fff;
        }
  
    </style>
  </head>
  <body>
   
 
    <script src="https://d3js.org/d3.v3.js"></script>
    <script src="scatter.js"></script>
    <script src="brush.js"></script>
    <script src="symbol_map.js"></script>
    <script src="miso.ds.deps.0.4.1.js"></script>
    <script src="https://d3js.org/topojson.v1.min.js"></script>
    <script src="https://d3js.org/queue.v1.min.js"></script>

var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height);
        
        var mapgroup = svg.append("g")
        ;
        
        //Define map projection
        var projection = d3.geo.albersUsa()
            .translate([700, 230])
            .scale([500]);
        
        
        var path = d3.geo.path()
            .projection(projection);

queue()
        .defer(d3.json, "us.json")
        .await(ready);
        
        function ready(error, us) {
            
            mapgroup.append("path")
            .attr("class", "states")
            .datum(topojson.feature(us, us.objects.states))
            .attr("d", path);
            
            
            loadJson(json_file);
            //loadGSS(SPREADSHEET_ID, SPREADSHEET_TAB);
            
        }

function createDiagram() {

var sgroup = svg.append("g")
          .attr("transform", "translate(50, 0)")
          var scatter = d3.chart.scatter()
          scatter.data(Vis.data)
          scatter(sgroup)
          
          var symbol_map = d3.chart.symbol_map()
          symbol_map.data(Vis.data)
          symbol_map(mapgroup)
          
          
          //brush
          var bgroup = svg.append("g")
          .attr("transform", "translate(100, 430)")
          var brush = d3.chart.brush()
          brush
          .data(Vis.data)
          .width(800)
          brush(bgroup)
          
          brush.on("filter", function(filtered) {
                   scatter.data(filtered);
                   scatter.update();
                   symbol_map.data(filtered)
                   symbol_map.update();
                   })
                   
          scatter.on("hover", function(hovered) {
                              brush.highlight(hovered)
                              symbol_map.highlight(hovered)
                              })

symbol_map.on("hover", function(hovered) {
          scatter.highlight(hovered)
          brush.highlight(hovered)
        })

}
    
      function loadJson(file_name) {
          d3.json(file_name, function(error, file_data) {
                  Vis.data = file_data;
                  
                  Vis.data.forEach(function(d) {
                               d.created *= 1000;
                  });
                  createDiagram();
                  });
          
                  
      }
    
    function loadGSS(ssid, tab) {
        
        //connect to spreadsheet
        var lsheet = new Miso.Dataset({
                                      importer : Miso.Dataset.Importers.GoogleSpreadsheet,
                                      parser : Miso.Dataset.Parsers.GoogleSpreadsheet,
                                      key : ssid,
                                      worksheet : tab
                                      });
                                      
                                      //load data from spreadsheet
                                      lsheet.fetch({
                                                   success : function() {
                                                
                                                   this.each(function(row){
                                                             Vis.data.push(row);
                                                             });
                                                   Vis.data.forEach(function(d) {
                                                                    d.created *= 1000;
                                                                    });
                                                   
                                                   createDiagram();

},
                                                   error : function() {
                                                   console.log("Data failed to load from GSS.");
                                                   }
                                                   });
                                                   
    }

</script>

</body>
</html>

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

Modified http://d3js.org/topojson.v1.min.js to a secure url

Modified http://d3js.org/queue.v1.min.js to a secure url

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

https://d3js.org/topojson.v1.min.js

https://d3js.org/queue.v1.min.js