Alice/index.html at master · Shanfan/Alice · GitHub

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<html>
  <head>
    <title>Alice In Wonderland Vis</title>
    <link rel="stylesheet" type="text/css" href="css/normalize.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
  </head>
<body>
  <h1>- Alice In Wonderland -</h1>

    <div id="vis"></div>

  <div class="tooltip"></div>

  <script type="text/javascript" src="vendor/d3.js" charset="utf-8"></script>
  <script>

d3.csv('data/alice.csv', function(data) {

    //level of aggregation
    var aggregation = 1;

    //do aggregation
    data = data.reduce(function(prev, curr, currIndex, arr) {

      var arrayIndex = Math.floor( currIndex / aggregation );

      // do we already have item for this agregation?
      if(!prev[arrayIndex]) {
        prev[arrayIndex] = {sentence: "", len: 0};
      }

      prev[arrayIndex].sentence += curr.sentence;
      prev[arrayIndex].len += curr.len;

      return prev;
    }, []);

    var unit = 15;
    var x_num = Math.floor(Math.sqrt(data.length)),
        y_num = x_num + 1;

    var vis = d3.select('#vis').append('svg').attr({'height': y_num * unit,
                                                    'width': x_num * unit });
    var min = d3.min(data, function(d) { return +d.len; });
    var max = d3.max(data, function(d) { return +d.len; });

    var tooltip = d3.select(".tooltip");

    var scale = d3.scale.log();
    scale.domain([min, max]);
    scale.range(['#C8E9A0', '#172D2C']);

    vis.selectAll('rect')
      .data(data).enter()
      .append('rect')
      .attr({
            'x': function(d,i) { return (i%x_num) * unit;},
            'y': function(d,i) { return Math.floor(i/x_num) * unit;},
            'width': unit,
            'height': unit,
            'fill': function(d){ return scale(+d.len);}
          })
      .on("mouseover", function(d) {
        tooltip.text(d.sentence);
        tooltip.classed('displayed', true);

        var boundingRect = this.getBoundingClientRect();
        var x = boundingRect.right;
        var y = (boundingRect.top + boundingRect.bottom) / 2;

        x += 15;
        y -= tooltip.node().getBoundingClientRect().height/2; // center it

        //  add possible scroll of the page
        x += window.pageXOffset;
        y += window.pageYOffset;

        tooltip.style({
          "left": x + "px",
          "top": y + "px"
        });
      })
      .on("mouseout", function(d) {
        tooltip.classed('displayed', true);
      });
});


  </script>
</body>
</html>