README.md

## README.md

      
          Raw
        
        
              README.md
            
          
    Example of a multi-layered visualization.  

  
## index.html
<html><head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://raw.github.com/sirrice/gg/new-model/lib/gg.css">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://sirrice.github.io/gg/js/gg.js"></script>
</head>
<body style="width: 100%; zoom: 1;">

<script>
  var floor500 = function(row) {
    return Math.floor(row.get('d') / 500) * 500;
  };

  var spec = {
    opts: { title: "Multi-layer faceted example" },

    // Faceting along x and y dimensions
    facets: {x: "f"},

    layers: [
    // Histogram with 10 bins, rendering sum / 100
    {
      geom:{
        type: "rect",
        aes: {y: "{total/100}"}
      },
      aes: {
        x: "d",
        y: "e"
      },
      stat: {type:"bin", n:10}
    },

    // Boxplot collected into 4 bins
    {
      geom: "boxplot",
      aes: {
        x: floor500,
        y: "e",
        group: { color: floor500 }
      },
      stat: "boxplot"
    },

    // Smoothed line, grouped and colored by "g" attribute
    // Lines are custom colored and thick
    {
      geom: "line",
      aes: {
        x: "d",
        y: "e",
        group: {color: "g", "stroke-width": 2}
      },
      stat: {
        type:"loess", bw: 0.3, acc: 1e-12
      },
      scales: {
        stroke: {
          type: "color",
          range: ["black", "red", "green"]
        }
      }
    },

    // Render the raw data as a stacked line graph
    {
      geom: "line",
      aes: {
        x: "d",
        y: "e",
        group: {
          color: "g",
          "stroke-opacity": 0.2
        }
      },
      pos: "stack"
    }

    ]
  };


  $(document).ready(function() {
    Math.seedrandom("zero");
    var w = 900;
    var h = 500;
    var ex   =  d3.select("body").append("span");
    var gauss = science.stats.distribution.gaussian();

    // Generate the dataset
    var npts = 4000;
    bigdata = _.map(_.range(0, npts), function(d) {
      g = Math.floor(Math.random() * 3) + 1;
      f = Math.floor(Math.random() * 3);
      t = Math.floor(Math.random() * 2);
      gauss.variance(d * 30.0 / npts);

      return {
        d: Math.floor(d/3),
        e: ((d + gauss())*(2+Math.sin(d/50))) * (g) - (d),
        g: g,
        f: f,
        t: t
      };
    });


    var plot = gg(spec);
    plot.render(w, h, ex, bigdata);

  });


</script>


</body></html>