jalapic.github.io/alphabet.html at master · bigdata-vis/jalapic.github.io · 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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<meta charset="utf-8">
<html>
  <head>
  <title>My Heatmap</title>
    <style>

       rect.bordered {
        stroke: #ffffff;
        stroke-width:1.2px;

      }


      rect.cell-hover {
        stroke: #ffffff;
        stroke-width: 0.3px;
        opacity: 0.2;
      }


      body {
        font-size: 11pt;
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        fill: #777;
      }

    </style>
    <script src="http://d3js.org/d3.v3.js"></script>
  </head>
  <body>

  <h1>Dynamic Matrix</h1>
    <br>

  <br>

This is just a placeholder for some code for one way to produce matrices using <a href="http://d3js.org/">d3.js</a>.  The left-to-right transition is just a bit of a gimmick but might be useful in some contexts.The code can be found <a href="https://github.com/jalapic/jalapic.github.io">here</a>.  I very much welcome criticism and feedback.  Please get in touch via twitter - <a href="https://twitter.com/jalapic">@jalapic</a>

<br>
<br>


    <h2>ABC:</h2>
    <div id="MyChart"></div>

    <script type="text/javascript">

      var margin = { top: 20, right: 5, bottom: 100, left: 70 },
          width = 1500 - margin.left - margin.right,
          height = 950 - margin.top - margin.bottom,
          gridSize = Math.floor(width / 55),
          legendElementWidth = gridSize*2,
          colors,
          ids,
          no;


      d3.csv("alphabetty.csv",
        function(d) {
          return {
            no: +d.NO,
            value: +d.VALUE,
            idd: +d.ID,
          };
        },

        function(error, data) {
            colors = ["#f7fbff","#191970"]; // default colors
            colors2 = ["#FFFF4D","#FF0000"]; //  colors for hover - defined below

// first color scheme
          var colorScale = d3.scale.linear()
              .domain([0, 5]) // this equates to range of color scale
              .range(colors);

// second color scheme
          var colorScale2 = d3.scale.linear()
              .domain([0, 5]) // this equates to range of color scale
              .range(colors2);

          var svg = d3.select("#MyChart").append("svg")
              .attr("width", width + margin.left + margin.right)
              .attr("height", height + margin.top + margin.bottom)
              .append("g")
              .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

          var heatMap = svg.selectAll(".no")
              .data(data)
              .enter().append("rect")
              .attr("x", function(d) { return (d.no - 1) * gridSize; })
              .attr("y", function(d) { return (d.idd - 1) * gridSize; })
              .attr("rx", 2)
              .attr("ry", 2)
              .attr("class", "no bordered")
              .attr("width", gridSize)
              .attr("height", gridSize)
              .style("fill", "white") //default colors
              .on("mouseover", function(d){

                      tempcolor = this.style.fill

                      d3.select(this).classed("cell-hover",true)
                      .style('fill', function(d) { return colorScale2(d.value); });
                  })
              .on("mouseout", function(){
                      d3.select(this).classed("cell-hover",false)
                      .style('fill',tempcolor);
                  })
              ;

    // Transitions
            heatMap.transition()
              .delay(function(d,i){return i * 40;})
              .ease('elastic')
              .duration(2000)
              .style("fill", function(d) { return colorScale2(d.value); })


      });


    </script>


  </body>
</html>