Mozilla Mobile developer research results

by codepo8

HTML

<h1>What platforms are you targeting with your apps? <span>Answers from 590 developers</span></h1>
<div id="graphs"></div>
<table summary="" id="datatable">
<thead>
    <tr>
        <th>Platform</th>
        <th>Focus</th>
        <th>Must have</th>
        <th>Supported</th>
        <th>Sometimes</th>
        <th>Not at all</th>
    </tr>
</thead>
<tbody>
    <tr>
        <th>Web</th><td>370</td><td>153</td><td>33</td><td>23</td><td>11</td>
    </tr>
    <tr>
        <th>iOS</th><td>261</td><td>207</td><td>53</td><td>28</td><td>41</td>
    </tr>
    <tr>
        <th>Android</th><td>182</td><td>221</td><td>102</td><td>47</td><td>38</td>
    </tr>    
    <tr>
        <th>Windows</th><td>10</td><td>46</td><td>131</td><td>173</td><td>230</td>
    </tr>    
    <tr>
        <th>Blackberry</th><td>8</td><td>15</td><td>100</td><td>164</td><td>303</td>
    </tr>    
</tbody>
</table>

CSS

*{margin:0;padding:0}
    nav,output {
        display:block;
    }
    h1 {
        text-transform: uppercase;
    }
    h1 span {
        display: block;
        color: #999;
        font-size: 12px;
    }    
    nav {float:left;padding-right:20px}
    body{padding: 0;font-family: "Open Sans",arial,sans-serif}
    button.current {
        background: #6cf;
        background:-webkit-linear-gradient(#369, #6cf);
        background:-moz-linear-gradient(#369, #6cf);
        background:-ms-linear-gradient(#369, #6cf);
        background:-o-linear-gradient(#369, #6cf);
        background:linear-gradient(#369, #6cf);
    }
    .resultbars {
        padding-top: 30px;
    }
    .progress {
        float: left;
        width: 236px;
        height: 1em;
        border: 1px solid #ccc;
        background:-webkit-linear-gradient(#ccc, #eee);
        background:-moz-linear-gradient(#ccc, #eee);
        background:-ms-linear-gradient(#ccc, #eee);
        background:-o-linear-gradient(#ccc, #eee);
        background:linear-gradient(#ccc, #eee);
    }
    button {
        padding: 5px 10px;
        font-size: 14px;
        width: 9em;
        border: none;
        background: #ccc;
        background:-webkit-linear-gradient(#ccc, #eee);
        background:-moz-linear-gradient(#ccc, #eee);
        background:-ms-linear-gradient(#ccc, #eee);
        background:-o-linear-gradient(#ccc, #eee);
        background:linear-gradient(#ccc, #eee);
    }
    li{
        list-style: none;
        margin:0;
        padding: 0 0 5px 0;
    }
    .value {padding: 0 1em}
    ul{ margin: 1em 0;}
    h1{font-size: 20px;}
    .os {
        display: block;
        float:left;
        width: 100px;
    }
    .progress span {
                background:#ccc;
                background: -webkit-linear-gradient(0deg, #060, #0c0);
                background: -moz-linear-gradient(0deg, #060, #0c0);
                background: -ms-linear-gradient(0deg, #060, #0c0);
                background:...

JavaScript

var table = document.querySelector('#datatable'),
            graphs = document.querySelector('#graphs');
            weights = table.querySelectorAll('#datatable thead th'),
            rows = table.querySelectorAll('tbody tr'), cells = null,
            bars = null, fields = null, oldbutton = null,
            osname = '', dataset = {}, out = '', outputs = {};
i = rows.length;
while(i--){
    cells = rows[i].querySelectorAll('td');
    osname = rows[i].querySelector('th')
    j = cells.length;
    dataset[osname.innerHTML] = {};
    while(j--){
        dataset[osname.innerHTML][weights[j+1].innerHTML] = +cells[j].innerHTML;
    }
}
out = '<nav><ul>';
for(i = 1; i < weights.length; i++) {
    out += '<li><button>' + weights[i].innerHTML + '</button></li>';
}
out += '</ul></nav>';
graphs.innerHTML += out;

out = '<ul class="resultbars">';
for(i in dataset) {
    out += '<li><span class="os">' + i + '</span> '+
                 '<div class="progress"><span></span></div>'+
                ' <span class="value">0</span></li>';
}
out += '</ul></nav>';
graphs.innerHTML += out;
bars = document.querySelectorAll('.resultbars .progress span');
fields = document.querySelectorAll('.resultbars .value');

document.querySelector('#graphs nav').addEventListener('click', function(ev){
    if (ev.target.tagName === 'BUTTON') {
        if(oldbutton) {oldbutton.className = ''}
        ev.target.className = 'current';
      oldbutton = ev.target;
        var elm = ev.target.innerHTML;
        out = 0;        
        for(i in dataset) {
            fields[out].innerHTML = dataset[i][elm];
            bars[out].style.width = dataset[i][elm]/2.5 + 'px';
            out++;
        }
    }
}, false);
document.querySelector('#graphs button').click();