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
|
<!DOCTYPE html>
<meta charset="utf-8">
<title>Manavis</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="js/dc/test/dc.css" />
<body onload="mv.init();">
<div id="vis" class="vis-hide">
<div id="connection-warning"><b>Connection error! Refresh the page to reload.</b></div>
<div class="side med col3">
<div id="connect-status">
<h3>Manavis users</h3>
<p class="info">These are the other users currently online on manavis. If you find something interesting to show, create a channel and get people to join to take a look!</p>
<div id="users-status"></div>
</div>
<div id="blvl-chart">
<h3>Character base level</h3> <p class="filterinfo"><span class="reset" style="display: none;">Active filter: <span class="filter"></span> <a class="reset" style="display: none;" href="javascript:mv.charts.blvl.filterAll();dc.redrawAll();">clear</a></span></p>
<div class="axis-label y-axis-label">XP instances</div>
<div class="axis-label x-axis-label">Base level</div>
</div>
<div id="stat-chart">
<h3>Stat allocation</h3>
<p class="info">The more intense the color, the more XP instances.<br/>
Each subchart relates one attribute to another. This is redundant in places, such as with the str-agi chart and the agi-str chart, so the chart is symmetric.<br/>
To get an idea of how this works, try filtering a range of low levels above, then slide the filter right, watching how the stats increase as people gain more levels and can get more stats.<p>
</div>
</div>
<div class="side thin col2">
<div id="type-chart">
<h3>Experience type</h3> <p class="filterinfo"><span class="reset" style="display: none;">Active filter: <span class="filter"></span> <a href="javascript:mv.charts.type.filterAll();dc.redrawAll();">clear</a></span></p>
<p class="info">More charts shown when KILLXP is filtered.</p>
</div>
<div id="killxp-charts">
<div id="target-chart">
<h3>Target</h3> <p class="filterinfo"><span class="reset" style="display: none;">Active filter: <span class="filter"></span> <a class="reset" style="display: none;" href="javascript:mv.charts.target.filterAll();dc.redrawAll();">clear</a></span></p>
</div>
<div id="wpn-chart">
<h3>Weapon</h3> <p class="filterinfo"><span class="reset" style="display: none;">Active filter: <span class="filter"></span> <a class="reset" style="display: none;" href="javascript:mv.charts.wpn.filterAll();dc.redrawAll();">clear</a></span></p>
</div>
<div id="num-attackers-chart">
<h3>Number of attackers</h3> <p class="filterinfo"><span class="reset" style="display: none;">Active filter: <span class="filter"></span> <a class="reset" style="display: none;" href="javascript:mv.charts.numAttackers.filterAll();dc.redrawAll();">clear</a></span></p>
<p class="info">The number of characters responsible for attacking the mob. One character attacking a mob directly, and another attacking it with a dozen summons, would count as two attackers.</p>
<div class="axis-label y-axis-label">XP instances</div>
<div class="axis-label x-axis-label">Characters</div>
</div>
</div>
</div>
<div id="main" class="col1">
<div id="date-chart">
<h3>Date</h3> <p class="filterinfo"><span class="reset" style="display: none;">Active filter: <span class="filter"></span> <a class="reset" style="display: none;" href="javascript:mv.charts.date.filterAll();dc.redrawAll();">clear</a><span></p>
<div class="axis-label y-axis-label">XP instances</div>
<div class="axis-label x-axis-label">Date</div>
</div>
<div id="map-chart">
<h3>Map</h3> <p class="filterinfo"><span class="reset" style="display: none;">Active filter: <span class="filter"></span> <a class="reset" style="display: none;" href="javascript:mv.charts.map.filterAll();dc.redrawAll();">clear</a><span></p>
<div class="axis-label y-axis-label">XP instances</div>
<div class="axis-label x-axis-label">Total level XP gain</div>
</div>
</div>
</div>
<div id="mask"><noscript><h1>Javascript is required for this website.</h1></noscript>
<div id="loadinfo" class="fader">
<h1>Manavis</h1>
<p>Manavis shows experience gain from combat logs generated by The Mana World's server, tmwAthena.<p>
<div id="loadinfo-online-desc">
<h3>Online mode</h3>
<p>Manavis can operate in two modes, offline and online, depending on the selection of the checkbox below.</p>
<p>While offline, you can still analyse everything yourself as you would normally.</p>
<p>
In online mode, active filters are made public, similar to multiplayer notepad or etherpad. This can help others understand manavis and the logs, and could be used to improve manavis and the game.
</p>
<input id="connect-option" name="connect" type="checkbox" checked></input>
<label for="connect">Online mode</label>
</div>
<div class="column-container column-container-separated loader-column-container">
<div>
<h2>Select your own dataset(s)</h2>
<p>Both raw server logs (.log) and scrubbed datasets (.scrubbed) will work fine. If using the latter, make sure it has .scrubbed in the file name!</p>
<p>You can load any number of files at once.</p>
<input type="file" id="input" name="records[]" multiple disabled />
<output id="list"></output>
</div>
<div>
<h2>Or use the latest dataset</h2>
<a id="latest-link" href="javascript:mv.loader.use(['/logs/map.scrubbed.latest.zip']);" class="button disabled-button">Latest dataset from server</a>
</div>
</div>
<p>Please note that this is very js intensive. The tab may briefly lock up as it loads everything.</p>
<div id="filesbar" class="progressbar fader">
<div class="percent">0%</div>
</div>
<div id="loadbar" class="progressbar fader">
<div class="percent">0%</div>
</div>
</div>
</div>
</body>
<!-- Libs -->
<script src="js/util/memoize.js"></script>
<script src="js/util/progress.js"></script>
<script src="js/zip/WebContent/zip.js"></script>
<script src="js/d3/d3.js"></script>
<script src="js/crossfilter/crossfilter.js"></script>
<script src="js/dc/dc.js"></script>
<script src="socket.io/socket.io.js"></script>
<!-- Components -->
<script src="js/comp/item.js"></script>
<script src="js/comp/map.js"></script>
<script src="js/comp/mob.js"></script>
<script src="js/comp/stat.js"></script><!-- Depends on crossfilter for crossfilter.bisect -->
<!-- Processing -->
<script src="js/mv/chart.js"></script>
<script src="js/mv/connect.js"></script>
<script src="js/mv/heap.js"></script>
<script src="js/mv/load.js"></script>
<script src="js/mv/main.js"></script>
<script src="js/mv/parse.js"></script>
<script src="js/util/trellis-chart.js"></script>
|
