D3 Examples - small_multples

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <link rel="stylesheet" href="style.css" media="screen" type="text/css"></link>
​
<link rel="stylesheet" href="style/style.css" type="text/css" media="screen"/>
​
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
  </style>
</head>
​
<body>
  
  <div id="main-wrapper">
    <div id="leftsider">
      <h1>Heading</h1>
      <div id ="speedcontrol">
        <div class="label">Speed</div>
         <div class="button" data-speed="pause">Pause</div>
         <div class="button" data-speed="3000">Slow</div>
         <div class="button current" data-speed="750">Medium</div>
         <div class="button" data-speed="300">Fast</div>
      </div>
      
  <div id="scalecontrol">
      <div class="label" style="">Scale by</div>
      <div class="button current" data-scale="group">Group</div>
      <div class="button" data-scale="item">Item</div>
    </div>
    </div>
    <div id="year">
        <div class="sublabel">Year</div>
        <div id="yearvalue" class="valuedesc">1970</div>
    </div>
    
    <div class="clr"></div> 
<!--     p.clear { allows to drop things below
    clear: both;
} -->
      <div id="header">
          <div class="sec"><h3>Meat</h3>Ounces</div>
          <div class="sec"><h3>Vegetables</h3>Cups</div>
          <div class="sec"><h3>Fruit</h3>Cups</div>
          <div class="sec"><h3>Grains</h3>Ounces</div>
          <div class="sec"><h3>Dairy</h3>Cups</div>
          <div class="sec"><h3>Fat</h3>Grams</div>
      </div>
    
    <div id="charts"></div>
   </div> 
​
  <script>
    
    var START_YEAR = 1970;
    var CURR_YEAR = 1970;
    var PAUSED = false;
    var USER_SPEED = 750;
    var USER_SCALE = "group";
    
    var food_groups = {
      "meat":{"max": 3.75},
      "veg":        { "max": 1 }, 
      "fruit":  { "max": .2 }, 
      "grain":  { "max": 7 }, 
      "dairy":  { "max": 1 },
      "fat":    { "max": 60 }
    }
    
//     console.log(food_groups["meat"]["max"])
    
    
 var num_rows = 7,
    num_cols = 5;
​
​
    
    d3.tsv("dat.tsv", type, function (error, data) {
      console.log(data)
    })
    
    function type (d, i) {
      d3.keys(d).map(function(key) {
        d[key] = +d[key]
      })
      return d;
    }
    
    
    // dims for area charts of mutiples 
​
var margin = {top: 0, right: 20, bottom: 10, left: 15},
width = 180 - margin.left - margin.right,
height = 90 - margin.top - margin.bottom;
​
    
var bisectYear = d3.bisector(function(d) { return d.year; }).left;
var numberFormat = d3.format(".2f");    
    
    
    
    
    // bisect example
// data.sort()...
// data = [2, 3, 4, 5, 6, 7, 8]
// var bisect = d3.bisector(function(d) { return d; }).right;
​
// undefined
// bisect(data, 3)
// 2
// var bisect = d3.bisector(function(d) { return d; }).left;
​
// undefined
// bisect(data, 3)
// 1
// data
// [2, 3, 4, 5, 6, 7, 8]
    
    
    
    
    
    
    
    
    
    
    
​
  </script>
</body>
​
    