Permalink
Browse files

Added second taffy-db example with awesome d3 things

  • Loading branch information...
1 parent 36186b6 commit df2539f187ec46b9268a31757106c5c0b2f77405 @iros committed Sep 12, 2012
Showing with 259 additions and 0 deletions.
  1. +63 −0 code/taffy-db/index2.html
  2. +196 −0 code/taffy-db/taffy-db2.js
View
@@ -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>
+
+
+
View
@@ -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");
+ }
+ })
+});

0 comments on commit df2539f

Please sign in to comment.