-
Notifications
You must be signed in to change notification settings - Fork 0
/
d3_grid3.html
103 lines (74 loc) · 2.47 KB
/
d3_grid3.html
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
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<title>DOM Manipulation</title>
</head>
<body>
<div id="grid"></div>
<!-- <div class="data-view"></div> -->
<!-- Made a small change here -->
<script type="text/javascript" src="d3.js"></script>
<script>
var dimension = 20;
function maxof(firstNumber,secondNumber) {if (firstNumber > secondNumber) {return firstNumber } else {return secondNumber;}};
function minof(firstNumber,secondNumber) {if (firstNumber < secondNumber) {return firstNumber } else {return secondNumber;}};
function gridData() {
var data = new Array();
var xpos = 1; //starting xpos and ypos at 1 so the stroke will show when we make the grid below
var ypos = 1;
var width = Math.floor((minof(innerWidth,innerHeight)-50)/dimension);
var height = width;
var click = 0;
// iterate for rows
for (var row = 0; row < dimension; row++) {
data.push( new Array() );
// iterate for cells/columns inside rows
for (var column = 0; column < dimension; column++) {
data[row].push({
x: xpos,
y: ypos,
width: width,
height: height,
click: click
})
// increment the x position. I.e. move it over by 50 (width variable)
xpos += width;
}
// reset the x position after a row is complete
xpos = 1;
// increment the y position for the next row. Move it down 50 (height variable)
ypos += height;
}
return data;
}
var gridData = gridData();
// I like to log the data to the console for quick debugging
console.log(gridData);
var grid = d3.select("#grid")
.append("svg")
.attr("width",innerWidth-20)
.attr("height",innerHeight-20);
var row = grid.selectAll(".row")
.data(gridData)
.enter().append("g")
.attr("class", "row");
var column = row.selectAll(".square")
.data(function(d,i) { return d; })
.enter().append("rect")
.attr("class","square")
.attr("x", function(d) { return d.x; })
.attr("y", function(d) { return d.y; })
.attr("width", function(d) { return d.width; })
.attr("height", function(d) { return d.height; })
.style("fill", "#fff")
.style("stroke", "#222")
.on('click', function(d) {
d.click ++;
if ((d.click)%4 == 0 ) { d3.select(this).style("fill","#fff"); }
if ((d.click)%4 == 1 ) { d3.select(this).style("fill","#2C93E8"); }
if ((d.click)%4 == 2 ) { d3.select(this).style("fill","#F56C4E"); }
if ((d.click)%4 == 3 ) { d3.select(this).style("fill","#838690"); }
});
</script>
</body>
</html>