SVG browser compatibility tables, c/o Jeff Schiller, http://www.codedread.com/svg-support-table.html

Where does this beautiful data come from?

All data here was compiled by Jeff Schiller.

What does it do?

It powers this d3.js grid data visualization.

Cool. How do I regenerate it?

1. go to http://www.codedread.com/svg-support-table.html

2. in chrome, open the devtools console and paste:

   function I(i) { return i; }
   function array(a) { return [].slice.call(a, 0); }
   function row(t,r) { return array(t.rows[r].cells); }
   function col(t,c) { return array(t.rows).map(function(r){return r.cells[c];}); }
   function cell(t,r,c) { return t.rows[r].cells[c]; }
   function browser_class(b, i) {
     var cn = i + 2
       , ua = b.textContent.trim()
       , re = /(.*?)\s*((?:r?[\d.-]+|[+()]|Alpha|Beta|DevPrev|Nightly).*)/
       , is = ua.replace(re, '$1').replace(/Minefield/i, 'Firefox')
       , no = ua.replace(re, '$2')
       , ok = col(tb, 2 + i).slice(3);
     return { date:     ok[daterow].textContent.trim()
            , family:   is
            , version:  no === is ? '' : no.replace(/[()]/g, '')
            , name:     ua
            , grade:    cell(tb, 1, cn).textContent
            , percent:  cell(tb, 2, cn).textContent
            , scores:   Number(cell(tb, scores, cn).textContent)
            , maxscore: Number(cell(tb, max_sc, cn).textContent)
            , tests:    ok.slice(0, ntests).map(test)
            };
   }
   function test(td) { 
     var data = { status: td.textContent.trim() };
     if ('#000000' === td.getAttribute('bgcolor'))
       data.crash = true;
     else
       return data.status;
     return data;
   }
   
   var table = $$('table[frame="VOID"]')[0]
     , tb    = table.tBodies[0]
     , thr   = tb.rows[0]
     , tests, ntests, nbrowsers, notescol, daterow, browsers, scores, max_sc, 
     , renderers
     ;
   
   browsers = row(tb, 0).slice(2).map(function(h){return h.querySelector('b'); });
   nbrowsers = notescol = browsers.indexOf(null)
   
   tests = col(tb, 1).slice(3).map(function(td){ return td.querySelector('a'); });
   ntests = daterow = tests.indexOf(null);
   scores = ntests + 8;
   max_sc = ntests + 9;
   
   tests = tests.filter(I).map(function(a, i) {
     var rn   = 3 + i
       , data = { id:  a.textContent.replace(/^[\d.\s]+/, '')
                , url: a.href
                }
       , note = cell(tb, rn, 2 + notescol).textContent
       , ycol = cell(tb, rn, 0).textContent;
     if (note) data.note = note;
     if (ycol) data.y = 'Y'
     return data;
   });
   
   renderers = browsers.filter(I).map(function(b, i) {
     var td   = b.parentNode
       , data = browser_class(b, i)
       , test = data.tests
       ;
     delete data.tests;
     data.type = '#FFCC99' === td.getAttribute('bgcolor') ? 'native' : 'plugin';
     data.tests = test; // put the tests last in the output JSON
     return data;
   });
   

3. copy and paste the results into your json file:

   copy(JSON.stringify(tests));
   copy(JSON.stringify(renderers));