forked from filipekiss/pokemon-type-chart
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstrengths.html
96 lines (90 loc) · 3.6 KB
/
strengths.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
<!DOCTYPE html>
<meta charset="utf-8">
<title>Pokémon Interactive Type Chart</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 Strengths</h2>
<h3>To view the Weaknesses chart, please, click <a href='index.html'>here</a></h3>
<p>
Just click a type name and it will show you that type strenghts. 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="legend">
<thead>
<tr>
<th colspan="2">Legend</th>
</tr>
</thead>
<tr>
<td>Super Effective</td>
<td><span class="legend super-effective-against"></span></td>
</tr>
<tr>
<td>Not Very Effective</td>
<td><span class="legend not-very-effective-against"></span></td>
</tr>
<tr>
<td>Does Not Affect</td>
<td><span class="legend does-not-affect"></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') {
if (l.target === d) return l.source.target = true;
}
return false;
}
</script>
<script src="strength-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>