<!doctype html>
<meta charset="utf-8">
<script src="../js/d3.js"></script>
<script src="../build/vistk.js"></script>
<link href="../css/vistk.css" rel="stylesheet">
<body>
<script>

d3.json("../data/diversification_ubiquity_hs4_1995_2012.json", function(error, countries) {

// [{"name": "Angola", "name_2char": "ao", "country_id": 4, "longitude": 13.242, "years": [{"avg_products": 61, "nb_products": 5, "year": 1995}

  var width = document.body.clientWidth;
  var height = width * 0.7;


  var flat_years = vistk.utils.flatten_years(countries);
  
  var dimensions = ["latitude", "nb_products", "avg_products"];

  dimensions.forEach(function(dim, i) {

    dimensions.forEach(function(dam, j) {

      var viz_id = "viz_" + (i*dimensions.length + j*dimensions.length);

      d3.select("body").append("div").attr("id", viz_id).style("float", "left");

      var visualization = vistk.viz()
        .params({
          dev: true,
          type: 'scatterplot',
          margin: {top: 10, right: 10, bottom: 30, left: 30},
          width: width / dimensions.length,
          height: height / dimensions.length,         
          container: '#'+viz_id,
          data: flat_years,
          var_id: 'name',
          var_group: 'continent',
          var_color: 'continent',
          var_x: dam,
          var_y: dim,
          var_text: 'name_2char',
          time: {
            var_time: "year",
            current_time: "1995",
            parse: function(d) { return d; }
          },
          x_scale: [{
            domain: [0, 700]
          }],
          items: [{
            attr: "name",
            marks: [{
              type: "circle"
            }]
          }],
          selection: ["France"],
          highlight: ["France", "Germany"],      
          title: "World Countries"
        });

      d3.select("#"+viz_id).call(visualization);

    });

  });


});
</script>

Test with multiple scatterplots on a page
Test with multiple scatterplots on a page
