Added second taffy-db example with awesome d3 things

iros · Sep 12, 2012 · df2539f · df2539f
1 parent 36186b6
commit df2539f
Show file tree

Hide file tree

Showing 2 changed files with 259 additions and 0 deletions.
diff --git a/code/taffy-db/index2.html b/code/taffy-db/index2.html
@@ -0,0 +1,63 @@
+<html lang="en">
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+  <title>Taffy-db</title>
+  <meta name="author" content="Irene Ros">
+  <!-- Date: 2012-06-29 -->
+  <style>
+    #scatterplot {
+      margin-top: 20px;
+    }
+    .axis text {
+      font-size: 0.7em;
+    }
+  </style>
+</head>
+<body>
+  <div id="heroes">
+    <h2>What's the relationship between abilities?</h2>
+    <b>Type:</b>
+
+    <select id="type">
+      <option value="both" selected>Both</option>
+      <option value="hero">Hero</option>
+      <option value="villain">Villain</option>
+    </select>
+
+    <b>X Axis:</b>
+    <select id="xSelect">
+      <option value="combat" selected>combat</option>
+      <option value="power">power</option>
+      <option value="intelligence">intelligence</option>
+      <option value="durability">durability</option>
+      <option value="speed">speed</option>
+    </select>
+    <b>Y Axis:</b>
+    <select id="ySelect">
+      <option value="combat">combat</option>
+      <option value="power" selected>power</option>
+      <option value="intelligence">intelligence</option>
+      <option value="durability">durability</option>
+      <option value="speed">speed</option>
+    </select>
+    <b>Gender:</b>
+    <select id="gender">
+      <option value="both" selected>Both</option>
+      <option value="male">Male</option>
+      <option value="female">Female</option>
+      <option value="clear">Clear Distinction</option>
+    </select>
+    <div id="scatterplot">
+
+    </div>
+  </div>
+  <script type="text/javascript" src="../../libs/jquery.min.js"></script>
+  <script type="text/javascript" src="../../libs/d3.v2.js"></script>
+  <script type="text/javascript" src="../../libs/underscore.js"></script>
+  <script type="text/javascript" src="../../libs/taffy-db.js"></script>
+  <script type="text/javascript" src="taffy-db2.js"></script>
+  </body>
+</html>
+
+
+
diff --git a/code/taffy-db/taffy-db2.js b/code/taffy-db/taffy-db2.js
@@ -0,0 +1,196 @@
+// fetch our hero json file...
+$.get('../../data/all.json', function(heroes) {
+
+  // create a database of heroes
+  heroes = TAFFY(heroes);
+
+  // find all heroes that have all their ability scores.
+  var gendered_heroes = heroes({
+      combat : { isUndefined : false },
+      power :  { isUndefined : false },
+      durability :  { isUndefined : false },
+      intelligence : { isUndefined : false },
+      speed :  { isUndefined : false }
+  });
+
+  // build scatterplot!
+  var height = 400, 
+      width = 400, 
+      r = 4,
+      y_attr = $('#ySelect').val(), 
+      x_attr = $('#xSelect').val();
+
+  var chart = d3.select("#scatterplot")
+    .style('width', width)
+    .style('height', height)
+    .append('svg');
+
+  var heightRange = d3.scale.linear()
+    .domain([
+      gendered_heroes.min(y_attr), 
+      gendered_heroes.max(y_attr)
+    ])
+    .range([height - 16 - r,0 + r]);
+
+  var widthRange = d3.scale.linear()
+    .domain([
+      gendered_heroes.min(x_attr),
+      gendered_heroes.max(x_attr)
+    ])
+    .range([24, width-r]);
+
+  // make x axis
+  var xAxis = d3.svg.axis()
+    .scale(widthRange)
+    .orient('bottom')
+    .tickSize(1)
+    .ticks(10);
+
+  chart.append("g")
+    .attr("class", "x axis")
+    .attr("transform", "translate(0, " + (height - 20) + ")")
+    .call(xAxis);
+
+  // make y axis
+  var yAxis = d3.svg.axis()
+    .scale(heightRange)
+    .orient('left')
+    .tickSize(1)
+    .ticks(10);
+  window.c = chart;
+  chart.append("g")
+    .attr("class", "y axis")
+    .attr("transform", "translate(24,0)")
+    .call(yAxis);
+
+  // start drawing dots
+  var dots = chart.append("g")
+    .attr("class", "dots")
+    .selectAll("circle")
+    .data(gendered_heroes.get())
+    .enter()
+      .append("circle")
+      .attr("type", function(d) {
+        return d.type;
+      })
+      .attr("xv", function(d) {
+        return d[x_attr];
+      })
+      .attr("yv", function(d) {
+        return d[y_attr];
+      })
+      .attr('gender', function(d) {
+        return d.Gender;
+      })
+      .attr("cx", function(d) {
+        return widthRange(d[x_attr]);
+      })
+      .attr("cy", function(d) { 
+        return heightRange(d[y_attr]);
+      })
+      .attr("opacity", "0.3")
+      .attr("stroke", "none")
+      .attr("fill", function(d) {
+        if (d.Gender === "female") {
+          return "red";
+        } else {
+          return "blue";
+        }
+      })
+      .attr("r", r)
+
+  // attach to dropdowns:
+  // x axis dropdown
+  $('#xSelect').on("change", function(e) {
+    x_attr = $(e.target).val();
+
+    widthRange.domain([
+      gendered_heroes.min(x_attr),
+      gendered_heroes.max(x_attr)
+    ]);
+
+    // reset our x&y values (mostly for debugging)
+    dots.attr("xv", function(d) {
+        return d[x_attr];
+      })
+      .attr("yv", function(d) {
+        return d[y_attr];
+      });
+
+    dots.transition()
+      .attr("cx", function(d) {
+        return widthRange(d[x_attr]);
+      })
+  });
+
+   // attach to dropdowns
+   // y_axis dropdown
+  $('#ySelect').on("change", function(e) {
+    y_attr = $(e.target).val();
+
+    heightRange.domain([
+      gendered_heroes.min(y_attr),
+      gendered_heroes.max(y_attr)
+    ]);
+
+    // reset our x&y values (mostly for debugging)
+    dots.attr("xv", function(d) {
+        return d[x_attr];
+      })
+      .attr("yv", function(d) {
+        return d[y_attr];
+      });
+
+    dots.transition()
+      .attr("cy", function(d) {
+        return heightRange(d[y_attr]);
+      })
+  });
+
+  // hero type
+  $('select#type').on("change", function(e) {
+    var s = $(e.target).val();
+    $('circle').show();
+    if (s === "hero") {
+      $('circle[type="villain"]').hide();  
+    } else if (s === "villain") {
+      $('circle[type="hero"]').hide();  
+    }
+
+  });
+  // gender selection
+  $('select#gender').on("change", function(e) {
+    var s = $(e.target).val();
+    if (s === "both") {
+      // unhide all dots, in case
+      $('circle').show();
+      dots
+        .transition()
+        .attr("fill", function(d) {
+        if (d.Gender === "female") {
+          return "red";
+        } else {
+          return "blue";
+        }
+      })
+    } else if (s === "female") {
+      $('circle').hide();
+      $('circle[gender="female"]').show();
+      dots
+        .transition()
+        .attr("fill", "red"); 
+    } else if (s === "male") {
+      $('circle').hide();
+      $('circle[gender="male"]').show();
+      dots
+        .transition()
+        .attr("fill", "blue");
+    } else {
+      // unhide all dots, in case
+      $('circle').show();
+      dots
+        .transition()
+        .attr("fill", "#000");
+    }
+  })
+});