JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//pastebin.com/raw/wZ82vVEb"></script>

<main ng-app="app" ng-controller="MainController">
  <figure ng-controller="ChartController">
    <svg ng-repeat="c in columns" viewBox="0 0 100 1">
      <g ng-repeat="sel in falseTrue" ng-class="{selected:sel}">
        <rect ng-repeat="r in c | truthy : 'isSelected' : sel"
              bind-attrs="{x:r.y, fill:r.color}" y="0" height="100%" width="1" />
      </g>
    </svg>
  </figure>
  <div ng-controller="SelectionController">
    <label ng-repeat="item in data"><input type="checkbox" ng-model="item.isSelected"></label>
  </div>
</main>

CSS

html { margin: 1em; }
figure { margin: 0 0 1em 0; border: 1px dotted; }
svg { display: block; width: 100%; }
g { opacity: .1; }
g.selected { opacity: 1; }
input { margin: 0; vertical-align: middle; }
label { display: inline-block; line-height: 1em; width: 1em; }

JavaScript

angular.module('app', [])

.controller('MainController', function ($scope) {
	var data = $scope.data = window.data; // See pastebin script
})

.controller('ChartController', function ($scope, $filter) {
  $scope.columns = [];
  for (var q=0; q<32; ++q) {
  	$scope.columns.push($scope.data.filter(function (item) {
    	return item.col === q;
    }));
  }
  
  $scope.falseTrue = [false, true];
})

.controller('SelectionController', function ($scope) {
})

.directive('bindAttrs', function () {
	return function (scope, element, attrs) {
    scope.$watch(attrs.bindAttrs, function (val) {
    	element.attr(val);
    })
  }
})

.filter('truthy', function () {
	return function (items, prop, val) {
		return items.filter(function (item) {
  		return !!item[prop] === val;
  	})
  }
})