video_game_genre/theme.js

data_heatmap2.csv

row_id	col_id vgfre
1	1	0.01596532
2	1	0.11035727
3	1	0.37692163
4	1	0.028026815
5	1	0.015992246
6	1	0.00325768
7	1	0.001615378
8	1	0.0005384595
1	2	0.026357591
2	2	0.022346068
3	2	0.011926877
4	2	0.12069569
5	2	0.123037988
6	2	0.074468944
7	2	0.0033115257
8	2	0.026303745
1	3	0.018226853
2	3	0.057453625
3	3	0.002503837
4	3	0.001507687
5	3	0.0053576717
6	3	0.009046119
7	3	0.037584471
8	3	0.003015373
1	4	0.0007538433
2	4	0.01456533
3	4	0.0215922246
4	4	0.011980723
5	4	0.0089384272
6	4	0.03114988
7	4	0.15491479
8	4	0.0634036
1	5	0.021296072
2	5	0.36984089
3	5	0.47012896
4	5	0.021538379
5	5	0.029830654
6	5	0.0238268314
7	5	0.0281345072
8	5	0.001023073
1	6	0.009099965
2	6	0.0055192095
3	6	0.00226153
4	6	0.14722274
5	6	0.2422441
6	6	0.01876277
7	6	0.006409066
8	6	0.00445848
1	7	0.005851756
2	7	0.00167193
3	7	0.00037154
4	7	0.030280513
5	7	0.028794353
6	7	0.246238157
7	7	0.17973249
8	7	0.008545421
1	8	0.002879435
2	8	0.0023221252
3	8	0
4	8	0.00167193
5	8	0.127995542
6	8	0.228682891
7	8	0.133940182
8	8	0.0300947427
1	9	0.00260078
2	9	0.00352963
3	9	0.007895226
4	9	0.0006501951
5	9	0.00464425
6	9	0.00037154
7	9	0.001764815
8	9	0
1	10	0.014954486
2	10	0.50603753
3	10	0.02888724
4	10	0.007616571
5	10	0.18224039
6	10	0.01430429
7	10	0.018577002
8	10	0.00520156
1	11	0.0197845068
2	11	0
3	11	0.000464425
4	11	0.019041427
5	11	0.0017648152
6	11	0.142671373
7	11	0.01210962
8	11	0.02294455
1	12	0.11727215
2	12	0.005098789
3	12	0.126832377
4	12	0.036966221
5	12	0.01848311
6	12	0.0197578075
7	12	0.01402167
8	12	0
1	13	0.078393881
2	13	0.06118547
3	13	0.014659018
4	13	0.026131294
5	13	0.0599107712
6	13	0.005736138
7	13	0.024219248
8	13	0.022307202
1	14	0.022307202
2	14	0.012746973
3	14	0.0140216699
4	14	0.077756533
5	14	0.001274697
6	14	0.01402167
7	14	0.0503505417
8	14	0.02039516
1	15	0.0095602294
2	15	0.002549395
3	15	0.0101975781
4	15	0.001912046
5	15	0.50350542
6	15	0.08094328
7	15	0.061822817
8	15	0.09369025
1	16	0.05226259
2	16	0.023581899
3	16	0.001274697
4	16	0.0063734863
5	16	0.0133843212
6	16	0.0044614404
7	16	0.041427661
8	16	0.0031867431
1	17	0.001274697
2	17	0.06687103
3	17	0.41133061
4	17	0.01419164
5	17	0.024523161
6	17	0.007606721
7	17	0.012375114
8	17	0.001475931
1	18	0
2	18	0.010558583
3	18	0.032697548
4	18	0.012375114
5	18	0.66723433
6	18	0.04359673
7	18	0.005222525
8	18	0.0007947321
1	19	0
2	19	0.00397366
3	19	0.023841962
4	19	0.028383288
5	19	0.01260218
6	19	0.0004541326
7	19	0.023160763
8	19	0.013169846
1	20	0.001475931
2	20	0
3	20	0.00397366
4	20	0.0006811989
5	20	0.098319709
6	20	0.0002270663
7	20	0.046662125
8	20	0.06641689
1	21	0.21253406
2	21	0.002951862
3	21	0.21650772
4	21	0.05642598
5	21	0.002043597
6	21	0.008855586
7	21	0.0042007266
8	21	0.0002270663
1	22	0.0001135332
2	22	0.482742961
3	22	0
4	22	0.004087193
5	22	0.01633298
6	22	0.06796628
7	22	0.41938883
8	22	0.017386723
1	23	0.033719705
2	23	0.014752371
3	23	0.015279241
4	23	0
5	23	0.033719705
6	23	0.039515279
7	23	0.024236038
8	23	0.03477345
1	24	0.089567966
2	24	0.087987355
3	24	0.0068493151
4	24	0.029504742
5	24	0.001580611
6	24	0.020547945
7	24	0.002107482
8	24	0
1	25	0.0036880927
2	25	0.034773446
3	25	0.006322445
4	25	0.003161222
5	25	0.0031612223
6	25	0.03266596
7	25	0.0152792413
8	25	0.014225501
1	26	0.0057955743
2	26	0.070073762
3	26	0.10800843
4	26	0.05374078
5	26	0.012644889
6	26	0.34351949
7	26	0.40990516
8	26	0.035827187
1	27	0.020021075
2	27	0.0057955743
3	27	0.04056902
4	27	0.0026343519
5	27	0.01317176
6	27	0.0036880927
7	27	0
8	27	0.04617767
1	28	0.09897227
2	28	0.0654653
3	28	0.021962551
4	28	0.034774039
5	28	0.037589751
6	28	0.055187949
7	28	0.0046459243
8	28	0.002393355
1	29	0.004082782
2	29	0.011685203
3	29	0.03364775
4	29	0.012389131
5	29	0.275658173
6	29	0.0222441222
7	29	0.068703365
8	29	0.128396452
1	30	0.005490638
2	30	0.006616922
3	30	0.002111784
4	30	0.0068984936
5	30	0.254117978
6	30	0.002111784
7	30	0.014782486
8	30	0.0018302126
1	31	0.06588765
2	31	0.0045051387
3	31	0.020695481
4	31	0.0229480501
5	31	0.011544418
6	31	0.05518795
7	31	0.20033789
8	31	0.033929326
1	32	0.17570041
2	32	0.15162607
3	32	0.010981276
4	32	0.007743207
5	32	0.0009854991
6	32	0.0402646769
7	32	0.0254821906
8	32	0.087146276
1	33	0.0021117838
2	33	0.009854991
3	33	0.01042874
4	33	0.10892236
5	33	0.28794902
6	33	0.003476246
7	33	0.067207416
8	33	0.033024334
1	34	0.019119351
2	34	0.0052143685
3	34	0.00811124
4	34	0.005214368
5	34	0.005214368
6	34	0.05561993
7	34	0.152954809
8	34	0.034183082
1	35	0.0139049826
2	35	0.015643105
3	35	0.003476246
4	35	0.01216686
5	35	0.002896871
6	35	0.002317497
7	35	0.0075318656
8	35	0.338933951
1	36	0.040556199
2	36	0.005793743
3	36	0
4	36	0.01274623
5	36	0.044032445
6	36	0.009849363
7	36	0.0057937428
8	36	0.00405562
1	37	0.08053302
2	37	0.06836616
3	37	0.023174971
4	37	0.12746234
5	37	0.11819235
6	37	0.005214368
7	37	0.013904983
8	37	0.0052143685
1	38	0.0110081112
2	38	0
3	38	0.071263036
4	38	0.0052143685
5	38	0
6	38	0.03661631
7	38	0.10800369
8	38	0.06458309
1	39	0.023296044
2	39	0.12126629
3	39	0.092030908
4	39	0.022142775
5	39	0.021681467
6	39	0.006227655
7	39	0.007842233
8	39	0.008245877
1	40	0.15027102
2	40	0.016549418
3	40	0.019374928
4	40	0.0178180141
5	40	0.007323261
6	40	0.114346673
7	40	0.009168493
8	40	0.002767847
1	41	0.001268596
2	41	0.0013262599
3	41	0.12541806
4	41	0.002075885
5	41	0.007496252
6	41	0.0059970015
7	41	0.03632799
8	41	0.0053627033
1	42	0.010091108
2	42	0.002421866
3	42	0.015972783
4	42	0.30630838
5	42	0.31853304
6	42	0.005189713
7	42	0.1705109
8	42	0.04993657
1	43	0.007899896
2	43	0.005824011
3	43	0.0021912121
4	43	0.0260062277
5	43	0.0066889632
6	43	0.267270211
7	43	0.0009802791
8	43	0.00265252

index.html

<!DOCTYPE html>
<meta charset="utf-8">

<style>
      svg *::selection {
         background : transparent;
         width: 700px;
         height: 500px;
         margin-left: 30px;
         font-size: 13px;	
      }
     
      svg *::-moz-selection {
         background:transparent;
      } 
     
      svg *::-webkit-selection {
         background:transparent;
      }
      rect.selection {
        stroke          : #333;
        stroke-dasharray: 4px;
        stroke-opacity  : 0.5;
        fill            : transparent;
      }

      rect.cell-border {
        stroke: #eee;
        stroke-width:0.3px;   
      }

      rect.cell-selected {
        stroke: rgb(51,102,153);
        stroke-width:0.5px;   
      }

      rect.cell-hover {
        stroke: #F00;
        stroke-width:0.3px;   
      }

      text.mono {
        font-size: 9pt;
        font-family: Andale Mono, Andale Mono;
        fill: #4a4a4a;
      }

      text.text-selected {
        fill: #000;
      }

      text.text-highlight {
        fill: #c00;
      }
      text.text-hover {
        fill: #00C;
      }
      #tooltip {
        position: absolute;
        width: 200px;
        height: auto;
        padding: 10px;
        background-color: white;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
        box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
        pointer-events: none;
      }

      #tooltip.hidden {
        display: none;
      }

      #tooltip p {
        margin: 0;
        font-family: Andale Mono;
        font-size: 12px;
        line-height: 20px;
      }
</style>


<div id="tooltip" class="hidden">
	<p><span id="value"></span></p>
</div>

<script src="http://d3js.org/d3.v3.min.js"></script>

<div id="chart2"></div>

<script type="text/javascript">
$(function (d) {
var margin = { top: 175, right: 10, bottom: 50, left: 175 },
  cellSize=12;
  columns=43;
  rows=8;
  width = cellSize*columns, // - margin.left - margin.right,
  height = cellSize*rows , // - margin.top - margin.bottom,
  //gridSize = Math.floor(width / 24),
  keyElementWidth = cellSize*2.5,
  colorBuckets = 11,
  colors = ['#FFFFFF','#F1EEF6','#E6D3E1','#DBB9CD','#D19EB9','#C684A4','#BB6990','#B14F7C','#A63467','#9B1A53','#91003F'];
  hdrow = [1,2,3,4,5,6,7,8],
  hdcol = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43],
  rLabel = ['Action','Adventure','Educational','RPG','Racing','Simulation','Sports','Strategy'],
  cLabel = ['Adult','Anime/Manga','Arcade','BattleMech','Board/PartyGame','Cards/Tiles','Casino','Chess','Comics','Cyberpunk/DarkSci-Fi','Detective/Mystery','Fantasy','Fighting','Flight','GameShow','Helicopter','HistoricalBattle','Horror','InteractiveFiction (IF)','IF (w/Graphics)','InteractiveMovie','Managerial','MartialArts','Meditative/Zen','Mentaling','Naval','Paddle/Pong','PersistentUniverse','Pinball','Post-Apocalyptic','Puzzle-Solving','Real-Time','Rhythm/Music','Sci-Fi/Futuristic','Shooter','Spy/Espionage','Stealth','Survival','Tank','Train','Turn-based','VideoBackdrop','VisualNovel'];

d3.csv("data_heatmap2.csv",
function(d) {
  return {
    rw:   +d.row_id,
    col:   +d.col_id,
    value: +d.vgfre
  };
},
function(error, data) {
  var colorScale = d3.scale.linear()
      .domain([ 0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0])
      .range(colors);
  
  var chartb = d3.select("div#chart2").append("svg")
      .attr("width", widthy + margin.left + margin.right)
      .attr("height", heighty + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
      ;
  var rwSortOrder=false;
  var colSortOrder=false;
  var rwLabels = chartb.append("g")
      .selectAll(".rwLabelg")
      .data(rwLabel)
      .enter()
      .append("text")
      .text(function (d) { return d; })
      .attr("x", 0)
      .attr("y", function (d, i) { return hcrw.indexOf(i+1) * cellSize; })
      .style("text-anchor", "end")
      .attr("transform", "translate(-6," + cellSize / 1.5 + ")")
      .attr("class", function (d,i) { return "rwLabel mono r"+i;} ) 
      .on("mouseover", function(d) {d3.select(this).classed("text-hover",true);})
      .on("mouseout" , function(d) {d3.select(this).classed("text-hover",false);})
      .on("click", function(d,i) {rwSortOrder=!rwSortOrder; sortbylabel("r",i,rwSortOrder);d3.select("#order").property("selectedIndex", 4).node().focus();;})
      ;

  var colLabels = chartb.append("g")
      .selectAll(".colLabelg")
      .data(colLabel)
      .enter()
      .append("text")
      .text(function (d) { return d; })
      .attr("x", 0)
      .attr("y", function (d, i) { return hccol.indexOf(i+1) * cellSize; })
      .style("text-anchor", "left")
      .attr("transform", "translate("+cellSize/2 + ",-6) rotate (-90)")
      .attr("class",  function (d,i) { return "colLabel mono c"+i;} )
      .on("mouseover", function(d) {d3.select(this).classed("text-hover",true);})
      .on("mouseout" , function(d) {d3.select(this).classed("text-hover",false);})
      .on("click", function(d,i) {colSortOrder=!colSortOrder;  sortbylabel("c",i,colSortOrder);d3.select("#order").property("selectedIndex", 4).node().focus();;})
      ;

  var heat = chartb.append("g").attr("class","g3")
        .selectAll(".cellg")
        .data(data,function(d){return d.rw+":"+d.col;})
        .enter()
        .append("rect")
        .attr("x", function(d) { return hccol.indexOf(d.col) * cellSize; })
        .attr("y", function(d) { return hcrw.indexOf(d.rw) * cellSize; })
        .attr("class", function(d){return "cell cell-border cr"+(d.rw-1)+" cc"+(d.col-1);})
        .attr("width", cellSize)
        .attr("height", cellSize)
        .style("fill", function(d) { return colorScale(d.value); })
        /* .on("click", function(d) {
               var rwtext=d3.select(".r"+(d.rw-1));
               if(rwtext.classed("text-selected")==false){
                   rwtext.classed("text-selected",true);
               }else{
                   rwtext.classed("text-selected",false);
               }
        })*/
        .on("mouseover", function(d){
               //highlight text
               d3.select(this).classed("cell-hover",true);
               d3.selectAll(".rwLabel").classed("text-highlight",function(r,ri){ return ri==(d.rw-1);});
               d3.selectAll(".colLabel").classed("text-highlight",function(c,ci){ return ci==(d.col-1);});
        
               //Update the tooltip position and value
               d3.select("#tooltip")
                 .style("left", (d3.event.pageX+10) + "px")
                 .style("top", (d3.event.pageY-10) + "px")
                 .select("#value")
                 .text("Category:"+colLabel[d.col-1]+" Theme:"+rwLabel[d.rw-1]+"\nFrequency:"+d.value);  
               //Show the tooltip
               d3.select("#tooltip").classed("hidden", false);
        })
        .on("mouseout", function(){
               d3.select(this).classed("cell-hover",false);
               d3.selectAll(".rwLabel").classed("text-highlight",false);
               d3.selectAll(".colLabel").classed("text-highlight",false);
               d3.select("#tooltip").classed("hidden", true);
        })
        ;

  var legend = chartb.selectAll(".legend")
      .data([0,0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1.0])
      .enter().append("g")
      .attr("class", "legend");
 
  legend.append("rect")
    .attr("x", function(d, i) { return legendElementWidth * i; })
    .attr("y", heighty+(cellSize*2))
    .attr("width", legendElementWidth)
    .attr("height", cellSize)
    .style("fill", function(d, i) { return colors[i]; });
 
  legend.append("text")
    .attr("class", "mono")
    .text(function(d) { return d; })
    .attr("width", legendElementWidth)
    .attr("x", function(d, i) { return legendElementWidth * i; })
    .attr("y", heighty + (cellSize*4));

// Change ordering of cells

  function sortbylabel(rORc,i,sortOrder){
       var t = chartb.transition().duration(3000);
       var vgfre=[];
       var sorted; // sorted is zero-based index
       d3.selectAll(".c"+rORc+i) 
         .filter(function(ce){
            vgfre.push(ce.value);
          })
       ;
       if(rORc=="r"){ // sort vgfre of a genre
         sorted=d3.range(col_number).sort(function(a,b){ if(sortOrder){ return vgfre[b]-vgfre[a];}else{ return vgfre[a]-vgfre[b];}});
         t.selectAll(".cell")
           .attr("x", function(d) { return sorted.indexOf(d.col-1) * cellSize; })
           ;
         t.selectAll(".colLabel")
          .attr("y", function (d, i) { return sorted.indexOf(i) * cellSize; })
         ;
       }else{ // sort vgfre of a theme
         sorted=d3.range(rw_number).sort(function(a,b){if(sortOrder){ return vgfre[b]-vgfre[a];}else{ return vgfre[a]-vgfre[b];}});
         t.selectAll(".cell")
           .attr("y", function(d) { return sorted.indexOf(d.rw-1) * cellSize; })
           ;
         t.selectAll(".rwLabel")
          .attr("y", function (d, i) { return sorted.indexOf(i) * cellSize; })
         ;
       }
  }

  d3.select("#order").on("change",function(){
    order(this.value);
  });
  

  var sa=d3.select(".g3")
      .on("mousedown", function() {
          if( !d3.event.altKey) {
             d3.selectAll(".cell-selected").classed("cell-selected",false);
             d3.selectAll(".rwLabel").classed("text-selected",false);
             d3.selectAll(".colLabel").classed("text-selected",false);
          }
         var p = d3.mouse(this);
         sa.append("rect")
         .attr({
             rx      : 0,
             ry      : 0,
             class   : "selection",
             x       : p[0],
             y       : p[1],
             widthy   : 1,
             heighty  : 1
         })
      })
      .on("mousemove", function() {
         var s = sa.select("rect.selection");
      
         if(!s.empty()) {
             var p = d3.mouse(this),
                 d = {
                     x       : parseInt(s.attr("x"), 10),
                     y       : parseInt(s.attr("y"), 10),
                     widthy   : parseInt(s.attr("width"), 10),
                     heighty  : parseInt(s.attr("height"), 10)
                 },
                 move = {
                     x : p[0] - d.x,
                     y : p[1] - d.y
                 }
             ;
      
             if(move.x < 1 || (move.x*2<d.widthy)) {
                 d.x = p[0];
                 d.widthy -= move.x;
             } else {
                 d.widthy = move.x;       
             }
      
             if(move.y < 1 || (move.y*2<d.heighty)) {
                 d.y = p[1];
                 d.heighty -= move.y;
             } else {
                 d.heighty = move.y;       
             }
             s.attr(d);
      
                 // deselect all temporary selected state objects
             d3.selectAll('.cell-selection.cell-selected').classed("cell-selected", false);
             d3.selectAll(".text-selection.text-selected").classed("text-selected",false);

             d3.selectAll('.cell').filter(function(cell_d, i) {
                 if(
                     !d3.select(this).classed("cell-selected") && 
                         // inner circle inside selection frame
                     (this.x.baseVal.value)+cellSize >= d.x && (this.x.baseVal.value)<=d.x+d.widthy && 
                     (this.y.baseVal.value)+cellSize >= d.y && (this.y.baseVal.value)<=d.y+d.heighty
                 ) {
      
                     d3.select(this)
                     .classed("cell-selection", true)
                     .classed("cell-selected", true);

                     d3.select(".r"+(cell_d.rw-1))
                     .classed("text-selection",true)
                     .classed("text-selected",true);

                     d3.select(".c"+(cell_d.col-1))
                     .classed("text-selection",true)
                     .classed("text-selected",true);
                 }
             });
         }
      })
      .on("mouseup", function() {
            // remove selection frame
         sa.selectAll("rect.selection").remove();
      
             // remove temporary selection marker class
         d3.selectAll('.cell-selection').classed("cell-selection", false);
         d3.selectAll(".text-selection").classed("text-selection",false);
      })
      .on("mouseout", function() {
         if(d3.event.relatedTarget.tagName=='html') {
                 // remove selection frame
             sa.selectAll("rect.selection").remove();
                 // remove temporary selection marker class
             d3.selectAll('.cell-selection').classed("cell-selection", false);
             d3.selectAll(".rwLabel").classed("text-selected",false);
             d3.selectAll(".colLabel").classed("text-selected",false);
         }
      })
      ;
});
</script>