FDL - TEDx attendee tags

Show attendees with interests

by dlaliberte

HTML

<script src="http://www.google.com/jsapi?fake=.js"></script>
<script src="http://d3js.org/d3.v2.js"></script>
<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->

<div id="chart"></div>

CSS

body {
    background-color: black;
}
svg.selecting circle {
    fill-opacity: 0.2;
    stroke-opacity: 0.3;
}
svg.selecting line {
    stroke-opacity: 0.05;
}
svg.selecting circle.person.selected,
svg.selecting circle.tag.selected,
svg.selecting line.link.selected{
    fill-opacity: .9;
    stroke-opacity: .9;
}
svg.selecting circle.person.selected {
    fill: pink;
}
circle.person {
  stroke: #fff;
  stroke-width: 1.5px;
  fill-opacity: .5;
  fill: pink;
}
circle.tag {
  stroke: #000;
  stroke-width: 1.5px;
  fill-opacity: .7;
}

line.link {
  /* stroke: #999; */
  stroke-opacity: .46;
  stroke-width: 0.5px;
}
.loading {
    color: white;
}

JavaScript

// Some experiments in integrating GViz and D3.
google.load('visualization', '1', {
    packages: ['corechart', 'treemap']
});

google.setOnLoadCallback(function () {
    
    // Fetch data
    var query = new google.visualization.Query(
      'https://docs.google.com/spreadsheet/ccc?key=0ApFdflRJmBWcdGFTN09ZWFA0OEhaYTI3UjUtd2U5MGc');
    
    // Send the query with a callback function.
    query.send( drawVisualization );
});



function getColumn(colIndex) {
    var numRows = this.getNumberOfRows();
    var column = [];
    for (var i = 0; i < numRows; i++) {
        column[i] = this.getValue(i, colIndex);
    }
    return column;
}

function forEachRow (data, handler) {
  var numRows = data.getNumberOfRows();
  for (var i = 0; i < numRows; i++) {
    handler(i);
  }
};

function mapRows (data, handler) {
    // data is a DataTable
    // handler should take a single argument, a row object.
    // The result of calling the handler for each row is appended to the result.
    var result = [];
    var json = JSON.parse(data.toJSON());
    var rows = json['rows'];
    for (var i = 0; i < rows.length; i++) {
        var cellArray = rows[i];
        result.push(handler(cellArray));
    }
    return result;
}

// Return a flattened hierarchy containing all leaf nodes under the root.
function flatten(root) {
    var rows = [];

    function recurse(name, node) {
          var row = [
            node.name,
            name,
            node.size
            ];
        //console.log('row', row);
        rows.push(row);
        if (node.children) {
            node.children.forEach(function(child) {
                recurse(node.name, child);
            });
        }
    }

    recurse(null, root);
    return rows;
}

function fluff(datatable) {
    // Inverse of flatten, reconstruct the tree structure from the flattened structure.
    var root = {};
    var nodes = {}; // keep track of all nodes, in case one becomes a parent.
    var numRows =...