JSFiddle - React, Tailwind, and code Playground

by TJ VanToll

HTML

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.default.min.css">
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.2.805/js/kendo.all.min.js"></script>

<div id="chart"></div>

<h1>Today</h1>
<table>
	<thead>
		<tr>
			<td>Browser</td>
			<td># of outliers</td>
			<td>Missing features (no support)</td>
			<td>Missing features (partial support)</td>
		</tr>
	</thead>
	<tbody id="today">
	</tbody>
</table>

<h1>End of 2014</h1>
<table>
	<thead>
		<tr>
			<td>Browser</td>
			<td># of outliers</td>
			<td>Missing feature (no support)</td>
			<td>Missing feature (partial support)</td>
		</tr>
	</thead>
	<tbody id="end-of-2014">
	</tbody>
</table>

<h1>End of 2013</h1>
<table>
	<thead>
		<tr>
			<td>Browser</td>
			<td># of outliers</td>
			<td>Missing feature (no support)</td>
			<td>Missing feature (partial support)</td>
		</tr>
	</thead>
	<tbody id="end-of-2013">
	</tbody>
</table>

<h1>End of 2012</h1>
<table>
	<thead>
		<tr>
			<td>Browser</td>
			<td># of outliers</td>
			<td>Missing feature (no support)</td>
			<td>Missing feature (partial support)</td>
		</tr>
	</thead>
	<tbody id="end-of-2012">
	</tbody>
</table>

<h1>End of 2011</h1>
<table>
	<thead>
		<tr>
			<td>Browser</td>
			<td># of outliers</td>
			<td>Missing feature (no support)</td>
			<td>Missing feature (partial support)</td>
		</tr>
	</thead>
	<tbody id="end-of-2011">
	</tbody>
</table>

</html>

CSS

table { border-collapse: collapse; }
thead td { font-weight: bold; }
td {
    padding: 1em;
    border: 1px solid black;
}

JavaScript

// Get the raw data from caniuse
$.getJSON("https://rawgit.com/Fyrd/caniuse/master/fulldata-json/data-2.0.json", function(caniuse) {

var features = caniuse.data;

var data = {
	today: {
		table: document.querySelector("#today"),
		html: "",
		counts: {
			"edge": { count: 0, features: [], partialFeatures: [] },
			"chrome": { count: 0, features: [], partialFeatures: [] },
			"firefox": { count: 0, features: [], partialFeatures: [] },
			"safari": { count: 0, features: [], partialFeatures: [] }
		},
		unsupportedBrowsers: [],
		partiallySupportedBrowsers: []
	},
	2014: {
		table: document.querySelector("#end-of-2014"),
		html: "",
		counts: {
			"ie": { count: 0, features: [], partialFeatures: [] },
			"chrome": { count: 0, features: [], partialFeatures: [] },
			"firefox": { count: 0, features: [], partialFeatures: [] },
			"safari": { count: 0, features: [], partialFeatures: [] }
		},
		unsupportedBrowsers: [],
		partiallySupportedBrowsers: [],
		versions: {
			"ie": 11,
			"firefox": 34,
			"chrome" : 39,
			"safari": 8
		}
	},
	2013: {
		table: document.querySelector("#end-of-2013"),
		html: "",
		counts: {
			"ie": { count: 0, features: [], partialFeatures: [] },
			"chrome": { count: 0, features: [], partialFeatures: [] },
			"firefox": { count: 0, features: [], partialFeatures: [] },
			"safari": { count: 0, features: [], partialFeatures: [] }
		},
		unsupportedBrowsers: [],
		partiallySupportedBrowsers: [],
		versions: {
			"ie": 11,
			"firefox": 26,
			"chrome" : 31,
			"safari": 7
		}
	},
	2012: {
		table: document.querySelector("#end-of-2012"),
		html: "",
		counts: {
			"ie": { count: 0, features: [], partialFeatures: [] },
			"chrome": { count: 0, features: [], partialFeatures: [] },
			"firefox": { count: 0, features: [], partialFeatures: [] },
			"safari": { count: 0, features: [], partialFeatures: [] }
		},
		unsupportedBrowsers: [],
		partiallySupportedBrowsers: [],
		versions: {
			"ie": 10,
			"firefox": 17,
			"chrome" : 23,
			"safari":...