joemfox
6/18/2013 - 7:43 PM

gistfile1.js

index.html
content_copyfile_download
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>   
</head>
<body>
 
<script>
var sqwidth = 15;
var svg = d3.select("body")
    .append("svg:svg")
    .attr("width", 600)
    .attr("height", 600);
var key = ["ARI", "ATL", "BAL", "BOS", "CHC", "CHW", "CIN", "CLE", "COL", "DET", "HOU", "KCR", "LAA", "LAD", "MIA", "MIL", "MIN", "NYM", "NYY", "OAK", "PHI", "PIT", "SDP", "SEA", "SFG", "STL", "TBR", "TEX", "TOR", "WSN"];
var colors = ["#C51230", "#01487E", "#DF4601", "#BD3039", "#0E3386", "#555B66", "#EB184B", "#023465", "#333366", "#10293F", "#FF7F00", "#74B4FA", "#CE1141", "#005596", "#F46634", "#012143", "#B50131", "#F7742C", "#1C2841", "#00483A", "#CA1F2C", "#FFB40B", "#1C3465", "#1C8B85", "#FB5B1F", "#C41E3A", "#79BDEE", "#BD1021", "#003DA5", "#BA122B"];
var opac = [".10",".40",".60",".80","1"];
var csv = d3.csv("https://docs.google.com/spreadsheet/pub?key=0AtUL7G-Osv2ddDE3VmZNRThwMTlua3ZXR3NfeV8yTXc&output=csv", function (csv) {
    var labels = svg.selectAll(".label")
        .data(key)
        .enter()
        .append("text")
        .attr("transform", "rotate(90)")
    .attr("transform", function(d,i){
      return "translate(" + i*(sqwidth+1)+2*sqwidth + "," +2*sqwidth +")";  
    })
    .text(function(d){return d;});
    
    var row = svg.selectAll(".row")
        .data(csv)
        .enter()
        .append("g")
        .attr("class", "row")
        .attr("id", function (d) {
        return d.team;
    })
        .attr("transform", function (d, i) {
        var tr = "translate(0," + (i * (sqwidth+1) + 2*sqwidth) + ")";
        return tr;
    });

    var col = row.selectAll(".cell")
        .data(function (d) {
        var teamset = new Array(29);
        for (var j = 0; j < key.length; j++) {
            var k = key[j];
            if(d[k] == ""){teamset[j] = "0";}
            else{teamset[j] = d[k];}
        }
        return teamset;
    })
        .enter()
        .append("rect")
        .attr("class", "cell")
    .attr("id", function(d,i){
          return key[i];  
    })
        .attr("x", function (d, i) {
        return i * (sqwidth+1)+2*sqwidth;
    })
        .attr("width", sqwidth)
        .attr("height", sqwidth)
    .style("fill", function(d,i){
        if(d == "X"){return "white";}
        else{return colors[i];}
    })
    .style("opacity", function(d){
            return opac[d];
    });
});
</script>
</body>
gistfile1.js
content_copyfile_download
var sqwidth = 15;
var svg = d3.select("div.graphic")
    .append("svg:svg")
    .attr("width", 600)
    .attr("height", 600);
var key = ["ARI", "ATL", "BAL", "BOS", "CHC", "CHW", "CIN", "CLE", "COL", "DET", "HOU", "KCR", "LAA", "LAD", "MIA", "MIL", "MIN", "NYM", "NYY", "OAK", "PHI", "PIT", "SDP", "SEA", "SFG", "STL", "TBR", "TEX", "TOR", "WSN"];
var colors = ["#C51230", "#01487E", "#DF4601", "#BD3039", "#0E3386", "#555B66", "#EB184B", "#023465", "#333366", "#10293F", "#FF7F00", "#74B4FA", "#CE1141", "#005596", "#F46634", "#012143", "#B50131", "#F7742C", "#1C2841", "#00483A", "#CA1F2C", "#FFB40B", "#1C3465", "#1C8B85", "#FB5B1F", "#C41E3A", "#79BDEE", "#BD1021", "#003DA5", "#BA122B"];
var opac = [".10",".40",".60",".80","1"];
var csv = d3.csv("https://docs.google.com/spreadsheet/pub?key=0AtUL7G-Osv2ddDE3VmZNRThwMTlua3ZXR3NfeV8yTXc&output=csv", function (csv) {
    var labels = svg.selectAll(".label")
        .data(key)
        .enter()
        .append("text")
        .attr("transform", "rotate(90)")
    .attr("transform", function(d,i){
      return "translate(" + i*(sqwidth+1)+2*sqwidth + "," +2*sqwidth +")";  
    })
    .text(function(d){return d;});
    
    var row = svg.selectAll(".row")
        .data(csv)
        .enter()
        .append("g")
        .attr("class", "row")
        .attr("id", function (d) {
        return d.team;
    })
        .attr("transform", function (d, i) {
        var tr = "translate(0," + (i * (sqwidth+1) + 2*sqwidth) + ")";
        return tr;
    });

    var col = row.selectAll(".cell")
        .data(function (d) {
        var teamset = new Array(29);
        for (var j = 0; j < key.length; j++) {
            var k = key[j];
            if(d[k] == ""){teamset[j] = "0";}
            else{teamset[j] = d[k];}
        }
        return teamset;
    })
        .enter()
        .append("rect")
        .attr("class", "cell")
    .attr("id", function(d,i){
          return key[i];  
    })
        .attr("x", function (d, i) {
        return i * (sqwidth+1)+2*sqwidth;
    })
        .attr("width", sqwidth)
        .attr("height", sqwidth)
    .style("fill", function(d,i){
        if(d == "X"){return "white";}
        else{return colors[i];}
    })
    .style("opacity", function(d){
            return opac[d];
    });
});