Skip to content

Instantly share code, notes, and snippets.

@eeeschwartz

eeeschwartz/P5.6---Scalable-width,-accessible-tree-map-with-min-size---using-tables-and-D3.js(v3).markdown

Created March 31, 2015 00:33
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save eeeschwartz/e1aa97d24ab158b251b0 to your computer and use it in GitHub Desktop.
Save eeeschwartz/e1aa97d24ab158b251b0 to your computer and use it in GitHub Desktop.
Download ZIP
P5.6 - Scalable width, accessible tree map with min size - using tables and D3.js(v3)
Raw
index.html
<h1>Scalable TreeMap</h1>
<div id="blam">
<div id='QGTreeMap'></div>
</div>
<h2>Table data</h2>
<p>The data in this table directly feeds the TreeMap.</p>
<p>Currently only the Title and Services column are consumed.</p>
<p> It will not live update if you change something within dev tools, update the code in the pen and on reload the TreeMap will look different.</p>
<p> No hidden attributes - just TD data.</p>
<p> Having said that it does find the content based on column class names.</p>
<p> More documentation will be provided when the pen is finalised.</p>
<table class="data-table-tree-map">
<caption>Department data </caption>
<thead>
<tr>
<th class="dttm-title">Title</th>
<th>Etc</th>
<th>Desc</th>
<th class="dttm-value">Services</th>
</tr>
</thead>
<tbody>
</tbody>
<tr><td>Business and industry</td><td>fddfsag</td><td>This is something else</td><td>78</td></tr>
<tr><td>Homes and housing</td><td>asghdrrd</td><td>This is something else</td><td>32</td></tr>
<tr><td>Your rights, crime and the law</td><td>asghdrrd</td><td>This is something else</td><td>27</td></tr>
<tr><td>Employment and jobs</td><td>asghdrrd</td><td>This is something else</td><td>26</td></tr>
<tr><td><a href="#transport-is-thunderbird-is-goooooooo">Transport and motoring</a></td><td>adfsaasfasf</td><td>Thistem ofhing</td><td>25</td></tr>
<tr><td>Health and wellbeing</td><td>34</td><td>This is an item of something</td><td>25</td></tr>
<tr><td>Community Support</td><td>fddfsag</td><td>This is something else</td><td>25</td> </tr>
<tr><td>Recreation, sports and arts</td><td>asghdrrd</td><td>This is something else</td><td>15</td> </tr>
<tr><td>Emergency services and safety</td><td>asghdrrd</td><td>This is something else</td><td>14</td></tr>
<tr><td>Environment, land and water</td><td>fddfsag</td><td>This is something else</td><td>11</td> </tr>
<tr><td>Education and training</td><td>asghdrrd</td><td>This is something else</td><td>10</td></tr>
<tr><td>People with disability</td><td>asghdrrd</td><td>This is something else</td><td>9</td> </tr>
<tr><td>Seniors</td><td>asghdrrd</td><td>This is something else</td><td>8</td></tr>
<tr><td>Parents and families</td><td>asghdrrd</td><td>This is something else</td><td>7</td> </tr>
<tr><td>Youth</td><td>asghdrrd</td><td>This is something else</td><td>7</td> </tr>
<tr><td>Aboriginal and Torres Strait Islander peoples</td><td>asghdrrd</td><td>This is something else</td><td>3</td> </tr>
</table>
<h2>Colour range example</h2>
<p>The Tree will be built based on the following colours (in displayed order - by row) set by CSS</p>
<p>
<div class="node qgtm-col-set-1" style="float: left; height: 32px; width: 32px; "></div>
<div class="node qgtm-col-set-2" style="float: left; height: 32px; width: 32px; "></div>
<div class="node qgtm-col-set-3" style="float: left; height: 32px; width: 32px; "></div>
<div class="node qgtm-col-set-4" style="float: left; height: 32px; width: 32px; "></div>
<div class="node qgtm-col-set-5" style="float: left; height: 32px; width: 32px; "></div>
<div class="node qgtm-col-set-6" style="float: left; height: 32px; width: 32px; "></div>
<div class="node qgtm-col-set-7" style="float: left; height: 32px; width: 32px; "></div>
<div class="node qgtm-col-set-8" style="float: left; height: 32px; width: 32px; "></div>
<div class="node qgtm-col-set-9" style="float: left; height: 32px; width: 32px; "></div>
<div class="node qgtm-col-set-10" style="float: left; height: 32px; width: 32px; "></div>
<div class="node qgtm-col-set-12" style="float: left; height: 32px; width: 32px; "></div>
<div class="node qgtm-col-set-13" style="float: left; height: 32px; width: 32px; "></div>
<div class="node qgtm-col-set-14" style="float: left; height: 32px; width: 32px; "></div>
<div class="node qgtm-col-set-15" style="float: left; height: 32px; width: 32px; "></div>
<div class="node qgtm-col-set-16" style="float: left; height: 32px; width: 32px; "></div>
<div class="node qgtm-col-set-17" style="float: left; height: 32px; width: 32px; "></div>
<div class="node qgtm-col-set-18" style="float: left; height: 32px; width: 32px; "></div>
<div class="node qgtm-col-set-19" style="float: left; height: 32px; width: 32px; "></div>
<div class="node qgtm-col-set-20" style="float: left; height: 32px; width: 32px; "></div>
<div class="node qgtm-col-set-21" style="float: left; height: 32px; width: 32px; "></div>
<div class="node qgtm-col-set-22" style="float: left; height: 32px; width: 32px; "></div>
<div class="node qgtm-col-set-23" style="float: left; height: 32px; width: 32px; "></div>
<div class="node qgtm-col-set-24" style="float: left; height: 32px; width: 32px; "></div>
<div class="node qgtm-col-set-25" style="float: left; height: 32px; width: 32px; "></div>
<div class="node qgtm-col-set-26" style="float: left; height: 32px; width: 32px; "></div>
<div class="node qgtm-col-set-27" style="float: left; height: 32px; width: 32px; "></div>
<div class="node qgtm-col-set-28" style="float: left; height: 32px; width: 32px; "></div>
<h2>Still in development...</h2>
<p>Please check the description of this pen for <a href="http://codepen.io/boars/details/guHap/">more detailed information</a> on current status and direction of the pen. Additionally would love to have some feedback and thoughts... thanks <3</p>
<p> For more treemaps and information check my <a href="ttp://codepen.io/boars/details/guHap/">TreeMap series of pens</a> or check out my other <a href="http://codepen.io/collection/CLFJv/">D3.JS charts collection</a> I am working on. </p>
Raw
P5.6---Scalable-width,-accessible-tree-map-with-min-size---using-tables-and-D3.js(v3).markdown

P5.6 - Scalable width, accessible tree map with min size - using tables and D3.js(v3)

This Tree Map is width scalable (based on parent), pulls the data in from table cells, has a minimum size on it's smallest elements (readability) a small screen device view and is fairly accessible (can tab into and through etc).

Please note this is not yet feature complete. This is a work in progress pen...

  • Pulls data from table TD's based on class names applied to the table header.
  • Script sets a min size (basically around 1/10th the max value) for data so they're generally readable and don't end up being tiny dots next to one massive box (some data isn't even close to being similar!) - This loses a little bit of the context but makes up for it by being more readable/usable in my opinion.
  • Each cell can now be tabbed through via keyboard (will be functional links shortly) - order is dependent on table row order - firefox has a bit of an issue with order - not sure why
  • When browser gets below certain threshold in width alternate formatting takes over (otherwise starts to get pretty unusable when small). It's a very minimal view - no longer a tree map - rather a list with icons sized to represent overall size of item.
  • Fixed (june/14) (minimal) ie 8/9 support (browsers older than 8 unlikely to be supported - they can have just the table :P)

To do:

- Pull links from table title and apply - Clean up CSS - make use of SASS variables to make management of colour/themes far easier. - Clean up JavaScript - it's pretty messy :) still WIP - Add ability for multiple tree-maps per page (for the insane) - this means cleaning up the html naming. - Fix CSS/JS/html naming conventions - make it a little less haphazard and less likely to conflict with other JS/CSS/etc. Might shorten and append with odxSTM or qgSTM. - More thorough testing in more versions of IE/safari/mobile - double check IE 8/9 fixes - had to add some "!important" in the styles to override some inline code appearing in IE8 - annoying... need time to invesitate if I did something silly...

Would like to do (time willing) but probably wont implement (any time soon at least):

- somehow set a min width on cells, can get pretty hard to read - or alternatively some other styling - might change from displaying below to having a tooltip like popup on hover. - multiple colour modes - ie have a table col that gets hidden by the script (or potentially an atrib/class on row - up for debate) that sets a colour manually ie .r1 - r10 (red range), b1 - b10 (blue range), etc.

History/info

Info

This is a fork of the UK Gov "Service Explorer Tree Map" available at: https://github.com/alphagov/service-explorer-tree-map

Additionally I looked at the live data page here: https://www.gov.uk/performance/transactions-explorer/all-services/by-transactions-per-year/descending

Unlike the P4 UK.GOV example, this tree map pulls the actual data from the table cells. The UK.gov tree map pulls the data from attributes on the rows of the table. P5 requires no special code, just a table in the correct format and a class name on the table column headings relevant (only pulling in title and number from unit at present).

The final version of this pen will be available on GitHub (will be linked from here when ready).

Pens in this series:

A Pen by William Savage on CodePen.

License.

Raw
script.js
// https://www.gov.uk/performance/transactions-explorer/all-services/by-transactions-per-year/descending
//https://assets.digital.cabinet-office.gov.uk/transactions-explorer/javascripts/table-to-tree-map.js?ca075cdc7ee8a4416903d7070ccf8e0b
var tableData = [];
var chartBGColor = 'qgtm-col-set-';
var valueLabel = $( '.dttm-value' ).text();
function initTreeData(){
var titleCol;
var titleColUrl;
var valueCol;
var max;
// Find table columns with title and value class - set col number
$('.data-table-tree-map thead tr').each(function(col, td){
titleCol = $(td).find('.dttm-title').index();
//titleColUrl = $(td).find('.dttm-title').index();
valueCol = $(td).find('.dttm-value').index();
//window.console.log(titleCol + ' : ' + valueCol);
});
// build array of table content based on cols identified
$('.data-table-tree-map tr').each(function(row, tr){
tableData[row]={
'title' : $(tr).find('td:eq('+ titleCol +')').text(),
'value' : $(tr).find('td:eq('+ valueCol +')').text(),
'adjValue' : '',
'adjMiniValue' : ''
}
});
tableData.shift(); // remove table header contents from array
var maxArr = [];
$.each(tableData, function(){
maxArr.push(this.value);
});
var maxVal = Math.max.apply(Math, maxArr);
var minVal = Math.min.apply(Math, maxArr);
var miniMax = 50;
var miniMin = 5;
var divisor = miniMax/maxVal;
if(minVal < maxVal / 9.5){
//window.console.log('Large dataset gap detected');
$.each(tableData, function(i){
var adjVal = parseFloat(this.value);
var minorNum = this.value;
minorNum.toString().replace('.', '');
if(this.value < maxVal/9.5 ){
adjVal = (maxVal/10) + minorNum;
}
// insert adjVal into data array in adjValue - this value is used to determine full tree map item sizing
tableData[i].adjValue = adjVal;
var adjMiniVal;
adjMiniVal = Math.floor(adjVal * divisor);
if(adjMiniVal < 5){
adjMiniVal = 5;
}
// insert adjMiniVal into data array in adjMiniValue - later used as minival - this is for mobile view icon sizing
tableData[i].adjMiniValue = adjMiniVal;
});
}
}
initTreeData();
//window.console.log(myTableArray[0][3]);
/*window.console.log(tableData[0]);
window.console.log(tableData[1]);
*/
var Tree = (function () {
// TODO refactor into a single line of jquery when we DO jquery
var valuesFrom = function(selection) {
return selection[0].map(function (row, i, bGColor) {
bGColor = chartBGColor + (i + 1);
//window.console.log(bGColor);
return {
name: tableData[i].title,
tdValue: tableData[i].value,
size: tableData[i].adjValue,
url: tableData[i].adjValue,
minival: tableData[i].adjMiniValue,
//size: tableData[i].value,
color: bGColor,
textColor: 'white'
};
});
};
var setSize = function(values) {
var children = values;
return children;
};
return {
fromHtmlTable: function(selection) {
var values = valuesFrom(selection);
return {
name: "Service Explorer",
children: setSize(values)
};
}
};
}());
var TreeMapLayout = (function () {
var setNodeContent = function (d) {
var volumeSpan = '';
var name = '';
if (d.name){
name = '<span class="name">' + d.name + '</span>';
}
if (d.tdValue) {
volumeSpan = '<span class="amount">' + d.tdValue + ' ' + valueLabel + '</span>';
}
this.innerHTML = '<span class="wrap">' + name + volumeSpan + '</span>';
return;
}
var nodeClass = function(d) { return d.color + ' node' ? d.color + ' node' : null; }
var position = function() {
this.style("left", function(d) { return d.x + 1 + "px"; })
.style("top", function(d) { return d.y + 1 + "px"; })
.style("width", function(d) { return Math.max(0, d.dx - 1) + "px"; })
.style("height", function(d) { return Math.max(0, d.dy - 1) + "px"; })
.style('position','absolute')
.style("cursor", function(d) { return d.url ? "pointer" : ""; });
};
var makeTree = function (divId, treeData) {
var margin = {top: 0, right: 0, bottom: 0, left: 0},
width = ewidth - margin.left - margin.right,
height = eheight - margin.top - margin.bottom;
var color = d3.scale.category20c();
var treemap = d3.layout.treemap()
.size([width, height])
.value(function(d) { return d.size; })
.sort(function(a, b) {
return a.value - b.value;
});
var div = d3.select('#'+divId)
.style("width", (width + margin.left + margin.right) + "px")
.style("height", (height + margin.top + margin.bottom) + "px")
.style("left", margin.left + "px")
.style("top", margin.top + "px");
var node = div.datum(treeData).selectAll(".node")
.data(treemap.nodes)
.enter().append("a")
.attr("class", nodeClass)
.call(position)
.on("click", function(d) {
if (d.url){
console.log('TODO make me go to ' + d.url);
}
})
.style("background", function(d) { return d.color ? d.color : color(d.name); })
.style("color", function(d) { return d.textColor ? d.textColor : null; })
.attr('href',function(d){ return d.url ? d.url : null; })
.call(function (selection) {
selection
.filter(function (d) {
return !d.children;
})
.each(setNodeContent);
});
/* .append("span")
.attr("class", "tm-services")
.text(function(d) { return d.children ? null : d.size; })
.text(valueLabel); */
};
return {
display: makeTree
}
}());
var noTreeMapLayout = (function () {
var setNodeContent = function (d) {
var volumeSpan = '';
var name = '';
var visualiseSize = '';
if (d.minival){
visualiseSize = '<span class="sct-box" style="height:' + d.minival + 'px; width:' + d.minival + 'px; margin-top:' + Math.floor((50 - d.minival)/2) + 'px; left:' + Math.floor((50 - d.minival)/2) + 'px; "></span>';
}
if (d.name){
name = '<span class="name">' + d.name + '</span>';
}
if (d.tdValue) {
volumeSpan = '<span class="amount">' + d.tdValue + ' ' + valueLabel + '</span>';
}
this.innerHTML = '<span class="wrap">' + visualiseSize + name + volumeSpan + '</span>';
return;
}
var nodeClass = function(d) { return d.color + ' node mobile' ? d.color + ' node mobile' : null; }
var position = function() {
this
.style("width", "100%")
.style("min-height", "50px")
.style('float','left')
.style("cursor", function(d) { return d.url ? "pointer" : ""; });
};
var makeTree = function (divId, treeData) {
var margin = {top: 0, right: 0, bottom: 0, left: 0},
width = ewidth - margin.left - margin.right,
height = eheight - margin.top - margin.bottom;
var color = d3.scale.category20c();
var treemap = d3.layout.treemap()
.size([width, height])
.value(function(d) { return d.size; })
.sort(function(a, b) {
return a.value - b.value;
});
var div = d3.select('#'+divId)
.style("width", (width + margin.left + margin.right) + "px")
.style("height", (height + margin.top + margin.bottom) + "px")
.style("left", margin.left + "px")
.style("top", margin.top + "px");
var node = div.datum(treeData).selectAll(".node")
.data(treemap.nodes)
.enter().append("a")
.attr("class", nodeClass)
.call(position)
.on("click", function(d) {
if (d.url){
console.log('TODO make me go to ' + d.url);
}
})
.style("background", function(d) { return d.color ? d.color : color(d.name); })
.style("color", function(d) { return d.textColor ? d.textColor : null; })
.attr('href',function(d){ return d.url ? d.url : null; })
.call(function (selection) {
selection
.filter(function (d) {
return !d.children;
})
.each(setNodeContent);
});
/* .append("span")
.attr("class", "tm-services")
.text(function(d) { return d.children ? null : d.size; })
.text(valueLabel); */
};
return {
display: makeTree
}
}());
var elemD = document.getElementById('blam');
var that = this;
window.addEventListener('resize', function (e) {
that.setSize(elemD);
});
function setSize(parent){
ewidth = parent.clientWidth;
eheight = parent.clientHeight;
window.console.log('set width: ' + ewidth + ' | set height: ' + eheight );
var highlight;
if (ewidth < 400){
$("#QGTreeMap").empty();
var tree = Tree.fromHtmlTable(d3.selectAll(tableData));
noTreeMapLayout.display("QGTreeMap", tree);
highlight = false;
} else {
$("#QGTreeMap").empty();
var tree = Tree.fromHtmlTable(d3.selectAll(tableData));
TreeMapLayout.display("QGTreeMap", tree);
highlight = true;
}
drawHighlight(highlight);
}
setSize(elemD);
function drawHighlight(operator){
var divId = 'QGTreeMap';
if (operator=== true) {
if (window.$) {
var $figure = $('#' + divId);
var $cap = $('<figcaption/>').prependTo($figure);
// hide the first wrapping node
$figure.find('.node').first().hide();
$figure.find('.node').on('mouseenter',function(){
var $this = $(this),
bg = $this.css('background-color');
$('.node').removeClass('highlight');
$('.node').addClass('lowlight');
$this.removeClass('lowlight');
$this.addClass('highlight');
//tooltipText = $this.data('tooltip'),
//serviceDetails = rsplit(tooltipText, ':');
$cap.html($this.html());
$('<span class="keyBlock"/>').css('background-color',bg).prependTo($cap);
});
$figure.on('mouseleave', function () {
$cap.empty();
$('.node').removeClass('lowlight');
$('.node').removeClass('highlight');
});
}
}
}
Raw
style.css
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
color: #333;
}
h2 {clear:both;
padding: 1em 0 0 0;}
table
{
border-collapse: collapse;
border-spacing: 0;
margin: 2em 0 0 0;
}
caption, th, td
{
vertical-align: top;
font-weight: normal;
text-align: left;
border-collapse: collapse;
border-spacing: 0;
border: 1px solid gray;
}
th, td{
font-size: 95%;
padding: .5em;
}
thead th{
background: #234572;
color: #fff;
}
table caption {
font-weight: bold;
font-size: 1.5em;
}
.highlight span.name {
text-decoration: underline;
}
.node span.name {
white-space: wrap;
margin-left: 5px;
display: block;
/* text-overflow: ellipsis; */
}
.node span.amount {
text-overflow: ellipsis;
overflow: hidden;
text-indent: 5px;
}
.node span.wrap {
padding: 5px 10px 0 0;
position: absolute;
width: 100%;
height: 100%;
background: -moz-linear-gradient(top, rgba(87,93,131,0) 0%, rgba(0,0,0,.3) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(87,93,131,0)), color-stop(100%,rgba(0,0,0,.3))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(87,93,131,0) 0%,rgba(0,0,0,.3) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(87,93,131,0) 0%,rgba(0,0,0,.3) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(87,93,131,0) 0%,rgba(0,0,0,.3) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(87,93,131,0) 0%,rgba(0,0,0,.3) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00575d83', endColorstr='#575d83',GradientType=0 ); /* IE6-9 */
}
.node span.wrap:hover {
text-shadow: 2px 2px 8px rgba(0,0,0,.5);
position: absolute;
width: 100%;
height: 100%;
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(255,255,255,.2) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(255,255,255,.2))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(255,255,255,.2) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(255,255,255,.2) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(255,255,255,.2) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0) 25%,rgba(255,255,255,.2) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00575d83', endColorstr='#575d83',GradientType=0 ); /* IE6-9 */
}
.node.mobile span.wrap:hover {
text-shadow: none;
}
.node.mobile span.wrap {
position: relative;
padding: 0;
overflow: visible;
}
.node.mobile span.wrap span.amount, .node.mobile span.wrap span.name {
padding-left: 50px;
}
.node.mobile {
overflow: visible;
padding: 5px 0 0 0;
}
.node.mobile:first-child {
display: none;
}
.node.mobile .sizer {
width: 40px;
height: 40px;
background: #000;
float: left;
display: block;
}
.node {
outline: rgba(0,0,0,0.3) solid 2px;
z-index: 800;
}
.node:hover, a.node:focus {
outline: rgba(255,100,0,1) solid 4px;
z-index: 1000;
}
.undefined.node:hover {
z-index: 0;
}
.node.highlight span.name {
font-size: 1em;
}
.node span.name {
font-size: 1em;
}
.node span.amount {
font-size: .8em;
}
.tm-title {
float: left;
width: 100%;
padding: .5em;
font-size: 1.2em;
}
#blamblam {
float: left;
width: 100%;
height: 75px;
background: rgba(0,0,0,0.2);
}
#blam {
height: 450px;
width: 100%;
margin: 0 0 60px 0;
padding: 0;
position: relative;
}
#wrapper * {
-moz-box-sizing: border-box;
}
#QGTreeMap {
font-family: "ntatabularnumbers","nta",Arial,sans-serif;
height: 460px;
margin-bottom: 60px;
margin-left: 0;
position: relative;
width: 100%;
}
#QGTreeMap figcaption {
bottom: -60px;
font-weight: bold;
height: 50px;
left: 0;
padding-left: 40px;
position: absolute;
right: 0;
}
#QGTreeMap figcaption .service-details, #QGTreeMap figcaption .service-name {
float: left;
margin-right: 0.5em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
#QGTreeMap .keyBlock {
background-color: #000000;
float: left;
height: 30px;
margin-bottom: -9px;
margin-left: -40px;
width: 30px;
}
#QGTreeMap:hover .node {
opacity: 0.5;
}
#QGTreeMap:hover figcaption:hover ~ .node, #QGTreeMap:hover .node:hover {
opacity: 1;
}
figcaption span.name, figcaption span.amount {
width: 100%;
float: left;
margin: 0;
margin-top: -2px;
}
figcaption span.amount {
font-size: .8em;
}
.node .label {
border: 2px solid #FFFFFF;
height: 100%;
padding: 6px 0 0 6px;
width: 100%;
}
.node {
overflow: hidden;
}
.node a {
bottom: 0;
color: #FFFFFF;
display: block;
left: 0;
overflow: hidden;
padding: 0.5em;
position: absolute;
right: 0;
text-decoration: none;
text-overflow: ellipsis;
top: 0;
}
.node a[href]:hover {
text-decoration: underline;
}
.node .amount {
display: block;
font-weight: bold;
white-space: nowrap;
}
.node.ellipsis a {
padding: 0;
text-align: center;
}
.node.qgtm-col-set-1 {
background: none repeat scroll 0 0 #2E8B57;
}
.node.qgtm-col-set-1:hover {
background: none repeat scroll 0 0 #2B6F37;
}
.node.qgtm-col-set-2 {
background: none repeat scroll 0 0 #9F1888;
}
.node.qgtm-col-set-2:hover {
background: none repeat scroll 0 0 #7D0069;
}
.node.qgtm-col-set-3 {
background: none repeat scroll 0 0 #005ABB;
}
.node.qgtm-col-set-3:hover {
background: none repeat scroll 0 0 #063E9D;
}
.node.qgtm-col-set-4 {
background: none repeat scroll 0 0 #003479;
}
.node.qgtm-col-set-4:hover {
background: none repeat scroll 0 0 #032058;
}
.node.qgtm-col-set-5 {
background: none repeat scroll 0 0 #00857E;
}
.node.qgtm-col-set-5:hover {
background: none repeat scroll 0 0 #0D665E;
}
.node.qgtm-col-set-6 {
background: none repeat scroll 0 0 #D40072;
}
.node.qgtm-col-set-6:hover {
background: none repeat scroll 0 0 #B80057;
}
.node.qgtm-col-set-7 {
background: none repeat scroll 0 0 #003A69;
}
.node.qgtm-col-set-7:hover {
background: none repeat scroll 0 0 #042449;
}
.node.qgtm-col-set-8 {
background: none repeat scroll 0 0 #898700;
}
.node.qgtm-col-set-8:hover {
background: none repeat scroll 0 0 #6A6904;
}
.node.qgtm-col-set-9 {
background: none repeat scroll 0 0 #002878;
}
.node.qgtm-col-set-9:hover {
background: none repeat scroll 0 0 #011758;
}
.node.qgtm-col-set-10 {
background: none repeat scroll 0 0 #006C56;
}
.node.qgtm-col-set-10:hover {
background: none repeat scroll 0 0 #0A4D3A;
}
.node.qgtm-col-set-11 {
background: none repeat scroll 0 0 #00BEB7;
}
.node.qgtm-col-set-11:hover {
background: none repeat scroll 0 0 #15A59D;
}
.node.qgtm-col-set-12 {
background: none repeat scroll 0 0 #009DDB;
}
.node.qgtm-col-set-12:hover {
background: none repeat scroll 0 0 #0F80C4;
}
.node.qgtm-col-set-13 {
background: none repeat scroll 0 0 #00AD93;
}
.node.qgtm-col-set-13:hover {
background: none repeat scroll 0 0 #129276;
}
.node.qgtm-col-set-14 {
background: none repeat scroll 0 0 #002E74;
}
.node.qgtm-col-set-14:hover {
background: none repeat scroll 0 0 #021C53;
}
.node.qgtm-col-set-15 {
background: none repeat scroll 0 0 #9325B2;
}
.node.qgtm-col-set-15:hover {
background: none repeat scroll 0 0 #750095;
}
.node.qgtm-col-set-16 {
background: none repeat scroll 0 0 #0076C0;
}
.node.qgtm-col-set-16:hover {
background: none repeat scroll 0 0 #0A58A3;
}
.node.qgtm-col-set-17 {
background: none repeat scroll 0 0 #009390;
}
.node.qgtm-col-set-17:hover {
background: none repeat scroll 0 0 #0F7572;
}
.node.qgtm-col-set-18 {
background: none repeat scroll 0 0 #AF292E;
}
.node.qgtm-col-set-18:hover {
background: none repeat scroll 0 0 #90151F;
}
.node.qgtm-col-set-19 {
background: none repeat scroll 0 0 #9325B2;
}
.node.qgtm-col-set-19:hover {
background: none repeat scroll 0 0 #750095;
}
.node.qgtm-col-set-20 {
background: none repeat scroll 0 0 #4D2942;
}
.node.qgtm-col-set-20:hover {
background: none repeat scroll 0 0 #301829;
}
.node.qgtm-col-set-21 {
background: none repeat scroll 0 0 #231F20;
}
.node.qgtm-col-set-21:hover {
background: none repeat scroll 0 0 #121010;
}
.node.qgtm-col-set-22 {
background: none repeat scroll 0 0 #002663;
}
.node.qgtm-col-set-22:hover {
background: none repeat scroll 0 0 #021644;
}
.node.qgtm-col-set-23 {
background: none repeat scroll 0 0 #002663;
}
.node.qgtm-col-set-23:hover {
background: none repeat scroll 0 0 #021644;
}
.node.qgtm-col-set-24 {
background: none repeat scroll 0 0 #9C132E;
}
.node.qgtm-col-set-24:hover {
background: none repeat scroll 0 0 #7A0020;
}
.node.qgtm-col-set-25 {
background: none repeat scroll 0 0 #002663;
}
.node.qgtm-col-set-25:hover {
background: none repeat scroll 0 0 #021644;
}
.node.qgtm-col-set-26 {
background: none repeat scroll 0 0 #317023;
}
.node.qgtm-col-set-26:hover {
background: none repeat scroll 0 0 #225317;
}
.node.qgtm-col-set-27 {
background: none repeat scroll 0 0 #005747;
}
.node.qgtm-col-set-27:hover {
background: none repeat scroll 0 0 #073A2E;
}
.node.qgtm-col-set-28 {
background: none repeat scroll 0 0 #A33038;
}
.node.qgtm-col-set-28:hover {
background: none repeat scroll 0 0 #831C26;
}
/* mobile bgs *//* mobile bgs */
/* mobile bgs *//* mobile bgs */
/* mobile bgs *//* mobile bgs */
/* mobile bgs *//* mobile bgs */
/* mobile bgs *//* mobile bgs */
a.node.mobile span.name, a.node.mobile span.amount {
color: #00f;
text-decoration: underline;
}
a.node.mobile .sct-box {
border: 1px solid #000;
position: absolute;
top: -4px;
left: 0;
}
.node.mobile {
background: none;
}
.node.mobile:hover {
background: none;
}
.node.qgtm-col-set-1.mobile .sct-box {
background: #2E8B57;
}
.node.qgtm-col-set-2.mobile .sct-box:hover {
background: #2B6F37;
}
.node.qgtm-col-set-2.mobile .sct-box {
background: #9F1888;
}
.node.qgtm-col-set-2.mobile .sct-box:hover {
background: #7D0069;
}
.node.qgtm-col-set-3.mobile .sct-box {
background: #005ABB;
}
.node.qgtm-col-set-3.mobile .sct-box:hover {
background: #063E9D;
}
.node.qgtm-col-set-4.mobile .sct-box {
background: #003479;
}
.node.qgtm-col-set-4.mobile .sct-box:hover {
background: #032058;
}
.node.qgtm-col-set-5.mobile .sct-box {
background: #00857E;
}
.node.qgtm-col-set-5.mobile .sct-box:hover {
background: #0D665E;
}
.node.qgtm-col-set-6.mobile .sct-box {
background: #D40072;
}
.node.qgtm-col-set-6.mobile .sct-box:hover {
background: #B80057;
}
.node.qgtm-col-set-7.mobile .sct-box {
background: #003A69;
}
.node.qgtm-col-set-7.mobile .sct-box:hover {
background: #042449;
}
.node.qgtm-col-set-8.mobile .sct-box {
background: #898700;
}
.node.qgtm-col-set-8.mobile:hover .sct-box {
background: #6A6904;
}
.node.qgtm-col-set-9.mobile .sct-box {
background: #002878;
}
.node.qgtm-col-set-9.mobile .sct-box:hover {
background: #011758;
}
.node.qgtm-col-set-10.mobile .sct-box {
background: #006C56;
}
.node.qgtm-col-set-10.mobile .sct-box:hover {
background: #0A4D3A;
}
.node.qgtm-col-set-11.mobile .sct-box {
background: #00BEB7;
}
.node.qgtm-col-set-11.mobile .sct-box:hover {
background: #15A59D;
}
.node.qgtm-col-set-12.mobile .sct-box {
background: #009DDB;
}
.node.qgtm-col-set-12.mobile .sct-box:hover {
background: #0F80C4;
}
.node.qgtm-col-set-13.mobile .sct-box {
background: #00AD93;
}
.node.qgtm-col-set-13.mobile .sct-box:hover {
background: #129276;
}
.node.qgtm-col-set-14.mobile .sct-box {
background: #002E74;
}
.node.qgtm-col-set-14.mobile .sct-box:hover {
background: #021C53;
}
.node.qgtm-col-set-15.mobile .sct-box {
background: #9325B2;
}
.node.qgtm-col-set-15.mobile .sct-box:hover {
background: #750095;
}
.node.qgtm-col-set-16.mobile .sct-box {
background: #0076C0;
}
.node.qgtm-col-set-16.mobile .sct-box:hover {
background: #0A58A3;
}
.node.qgtm-col-set-17.mobile .sct-box {
background: #009390;
}
.node.qgtm-col-set-17.mobile .sct-box:hover {
background: #0F7572;
}
.node.qgtm-col-set-18.mobile .sct-box {
background: #AF292E;
}
.node.qgtm-col-set-18.mobile .sct-box:hover {
background: #90151F;
}
.node.qgtm-col-set-19.mobile .sct-box {
background: #9325B2;
}
.node.qgtm-col-set-19.mobile .sct-box:hover {
background: #750095;
}
.node.qgtm-col-set-20.mobile .sct-box {
background: #4D2942;
}
.node.qgtm-col-set-20.mobile .sct-box:hover {
background: #301829;
}
.node.qgtm-col-set-21.mobile .sct-box {
background: #231F20;
}
.node.qgtm-col-set-21.mobile .sct-box:hover {
background: #121010;
}
.node.qgtm-col-set-22.mobile .sct-box {
background: #002663;
}
.node.qgtm-col-set-22.mobile .sct-box:hover {
background: #021644;
}
.node.qgtm-col-set-23.mobile .sct-box {
background: #002663;
}
.node.qgtm-col-set-23.mobile .sct-box:hover {
background: #021644;
}
.node.qgtm-col-set-24.mobile .sct-box {
background: #9C132E;
}
.node.qgtm-col-set-24.mobile .sct-box:hover {
background: #7A0020;
}
.node.qgtm-col-set-25.mobile .sct-box {
background: #002663;
}
.node.qgtm-col-set-25.mobile .sct-box:hover {
background: #021644;
}
.node.qgtm-col-set-26.mobile .sct-box {
background: #317023;
}
.node.qgtm-col-set-26.mobile .sct-box:hover {
background: #225317;
}
.node.qgtm-col-set-27.mobile .sct-box {
background: #005747;
}
.node.qgtm-col-set-27.mobile .sct-box:hover {
background: #073A2E;
}
.node.qgtm-col-set-28.mobile .sct-box {
background: #A33038;
}
.node.qgtm-col-set-28.mobile:hover .sct-box {
background: #831C26;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment