diff options
| author | Freeyorp <TheFreeYorp@NOSPAM.G.m.a.i.l.replace> | 2013-05-02 21:59:34 +1200 |
|---|---|---|
| committer | Freeyorp <TheFreeYorp@NOSPAM.G.m.a.i.l.replace> | 2013-05-02 21:59:34 +1200 |
| commit | bcf2d2fea64340412c0e2ffa9be565f21e3c4fde (patch) | |
| tree | c4057b9d018ec4bb380793926e6821491137ef65 | |
| parent | a7da1fafe2ca8c9115ce76f99a903e1b3da692a3 (diff) | |
| download | manavis-bcf2d2fea64340412c0e2ffa9be565f21e3c4fde.tar.gz manavis-bcf2d2fea64340412c0e2ffa9be565f21e3c4fde.tar.bz2 manavis-bcf2d2fea64340412c0e2ffa9be565f21e3c4fde.tar.xz manavis-bcf2d2fea64340412c0e2ffa9be565f21e3c4fde.zip | |
Pack pie charts in tighter
| -rw-r--r-- | css/style.css | 10 | ||||
| -rw-r--r-- | index.html | 8 | ||||
| -rw-r--r-- | js/mv/chart.js | 14 |
3 files changed, 22 insertions, 10 deletions
diff --git a/css/style.css b/css/style.css index 8571fa9..0d2ec08 100644 --- a/css/style.css +++ b/css/style.css @@ -26,8 +26,15 @@ body { font-size: smaller; } -.side { +.med { width: 400px; +} + +.thin { + width: 250px; +} + +.side { font-size: smaller; } @@ -35,7 +42,6 @@ body { #loadinfo { width: 647px; -/* height: 400px; */ border: 1px grey solid; margin: auto; } @@ -5,7 +5,7 @@ <link rel="stylesheet" type="text/css" href="js/dc/test/dc.css" /> <body onload="mv.init();"> - <div class="side"> + <div class="side med"> <div class="vis-hide"> <div id="blvl-chart"> <h3>Instance breakdown by Character Base Level <a class="reset" style="display: none;" href="javascript:mv.charts.blvl.filterAll();dc.redrawAll();">clear</a></h3> @@ -15,17 +15,17 @@ </div> </div> </div> - <div class="side"> + <div class="side thin"> <div class="vis-hide"> <div id="type-chart"> - <h3>Instance breakdown by Type <a class="reset" style="display: none;" href="javascript:mv.charts.type.filterAll();dc.redrawAll();">clear</a></h3> - </div> <div id="target-chart"> <h3>Instance breakdown by Target <a class="reset" style="display: none;" href="javascript:mv.charts.target.filterAll();dc.redrawAll();">clear</a></h3> </div> <div id="wpn-chart"> <h3>Instance breakdown by Weapon <a class="reset" style="display: none;" href="javascript:mv.charts.wpn.filterAll();dc.redrawAll();">clear</a></h3> </div> + <h3>Instance breakdown by Type <a class="reset" style="display: none;" href="javascript:mv.charts.type.filterAll();dc.redrawAll();">clear</a></h3> + </div> <div id="def-chart"> <h3>Definedness of records <span class="help" title="If logs are missing between server boot and the logs provided, not all information will be available for all records. Definedness of records falls into three categories. Records with undefined data; records with well defined data, but mixed in with records having undefined data, limiting validity of inferences; and records after any uncertain times, which are fully well defined. It is highly recommended that you filter results to only include records which are in fully well defined times; however, this may not always be possible.">[?]</span> <a class="reset" style="display: none;" href="javascript:mv.charts.def.filterAll();dc.redrawAll();">clear</a></h3> </div> diff --git a/js/mv/chart.js b/js/mv/chart.js index 74d7b85..779a612 100644 --- a/js/mv/chart.js +++ b/js/mv/chart.js @@ -13,7 +13,7 @@ var mv = function(mv) { mv.charts.pc = bar(monoGroup(wide(dc.barChart("#player-chart")), "pc")) .x(d3.scale.linear().domain([mv.heap.pc.dim.bottom(1)[0].pc, mv.heap.pc.dim.top(1)[0].pc]).nice()) ; - mv.charts.blvl = bar(monoGroup(thin(dc.barChart("#blvl-chart")), "blvl")) + mv.charts.blvl = bar(monoGroup(med(dc.barChart("#blvl-chart")), "blvl")) .x(d3.scale.linear().domain([0, mv.heap.blvl.dim.top(1)[0].pcstat.blvl])) ; mv.charts.type = pie(monoGroup(dc.pieChart("#type-chart"), "type")) @@ -71,11 +71,16 @@ var mv = function(mv) { .width(700) ; } - function thin(chart) { + function med(chart) { return chart .width(380) ; } + function thin(chart) { + return chart + .width(250) + ; + } function short(chart) { return chart .height(130) @@ -89,6 +94,7 @@ var mv = function(mv) { return chart .dimension(mv.heap[name].dim) .group(mv.heap[name].group) + .transitionDuration(500) ; } function bar(chart) { @@ -101,8 +107,8 @@ var mv = function(mv) { ; } function pie(chart) { - return thin(short(chart)) - .radius(60) + return thin(chart) + .radius(90) .colorCalculator(d3.scale.category20c()) ; } |