-
Notifications
You must be signed in to change notification settings - Fork 18
/
index.html
124 lines (119 loc) · 4.46 KB
/
index.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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<meta charset="utf-8">
<title>Pokémon Interactive Type Chart - Now git flow supported!</title>
<!-- Social Media Stuff -->
<meta property="og:title" content="Pokémon Interactive Type Chart">
<meta property="og:description" content="An interactive type chart with Pokémon Type Strengths">
<meta property="og:url" content="http://filipekiss.github.io/pokemon-type-chart/">
<meta property="og:image" content="http://i.imgur.com/drWhvRJ.png">
<meta property="og:site_name" content="Pokémon Type Chart">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:creator" content="@filipekiss">
<meta name="twitter:url" content="http://filipekiss.github.io/pokemon-type-chart/">
<meta name="twitter:title" content="Pokémon Type Chart">
<meta name="twitter:description" content="An interactive type chart with Pokémon Type Strengths">
<meta name="twitter:image:src" content="http://i.imgur.com/drWhvRJ.png"/>
<link rel="stylesheet" href="typechart.css">
<script src="d3.v3.min.js"></script>
<body>
<div id="typechart">
<div id="details"><h1 title="Pokémons Type Chart">Pokémons Type Chart</h1>
<h2 title="Gen VI">Gen VI Weaknesses</h2>
<h3>To view the Strengths chart, please, click <a href='strengths.html'>here</a></h3>
<h3><a href="about.html">More about the project</a></h3>
<p>
Just click a type name and it will show you that type weaknesses. Clicking a second type will make the graph behave for dual types. You can keep clicking to override the selected types or you can click 'Reset' and start over.
</p>
<table id="dualtype">
<thead>
<tr>
<th colspan="2">Dual Type</th>
</tr>
</thead>
<tr>
<td id="type1"></td>
<td id="type2"></td>
</tr>
<tr><a href="#" onclick="reset(); return false;">Reset</a></tr>
</table>
<table id="legend">
<thead>
<tr>
<th colspan="2">Legend</th>
</tr>
</thead>
<tr>
<td>Takes Double Damage</td>
<td><span class="legend is-weak-against"></span></td>
</tr>
<tr>
<td>Takes Half Damage</td>
<td><span class="legend resists-against"></span></td>
</tr>
<tr>
<td>Is Immune</td>
<td><span class="legend is-immune"></span></td>
</tr>
<tr>
<td colspan="2">
<small>If the label becomes colored, the following rules may apply</small>
</td>
</tr>
<tr>
<td>Takes 4x Damage</td>
<td><span class="legend double-strengths-node"></span></td>
</tr>
<tr>
<td>Takes 1/4 Damage</td>
<td><span class="legend double-weaknesses-node"></span></td>
</tr>
<tr>
<td colspan="2">
If a label becomes colored, it will cause damage to itself, following the rules above.
</td>
</tr>
</table>
<p><small>
I've had help from a few friends to make this color-blind friendly. If you're having difficulties with this, please, send-me an e-mail at filipe [at] beij [dot] in so I can look into it. :) Thanks.
</small></p>
</div>
<div id="graph"></div>
<script>
var diameter = 750,
radius = diameter / 2,
innerRadius = radius - 120;
var cluster = d3.layout.cluster()
.size([360, innerRadius])
.sort(null)
.value(function(d) { return d.size; });
var bundle = d3.layout.bundle();
var line = d3.svg.line.radial()
.interpolate("bundle")
.tension(0.75)
.radius(function(d) { return d.y; })
.angle(function(d) { return d.x / 180 * Math.PI; });
window.colorPath = function(d, l, type) {
var type = type || 'strong';
if (type == 'strong') {
if (l.target === d) return l.source.target = true;
}
if (type == 'weak') {
for (type in d) {
if(type !== "size") {
if (l.target === d[type]) return l.source.target = true;
}
}
}
}
</script>
<script src="weaknesses-graph.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-48872215-1', 'filipekiss.github.io');
ga('send', 'pageview');
</script>
</div>