JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular.min.js"></script>
<script src="https://rawgit.com/JoeHogan/angular-risk-matrix/master/dist/js/angular-risk-matrix.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="myCtrl">
        <div style="width:300px;">
            <risk-matrix data="data.risks" likelihood="data.likelihoodValues"          impact="data.impactValues"></risk-matrix>
        </div>
        <div class="my-data">
            <div ng-repeat="r in data.risks | orderBy:'Id'">
                <span ng-bind="'Risk: '+r.Id"></span>
                <select ng-model="r.RiskLikelihood" ng-options="o as o for o in data.likelihoodValues"></select>
                <select ng-model="r.RiskImpact" ng-options="o as o for o in data.impactValues"></select>
            </div>
        </div>
    </div>
</div>

CSS

.risk-matrix{position:relative;width:100%;margin-left:20px;margin-bottom:20px}.risk-matrix .left-label{position:absolute;font-size:1.2em;font-weight:700;bottom:0;transform:rotate(270deg);-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform-origin:left bottom 0;-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0}.risk-matrix .bottom-label{position:absolute;font-size:1.2em;font-weight:700;bottom:-20px}.risk-matrix .risk-box{position:absolute;width:19%;height:19%;margin-right:1%;margin-top:1%}.risk-box.low-risk{background:rgba(153,255,51,.8);border:1px solid rgba(153,255,51,1)}.risk-box.medium-risk{background:rgba(255,153,51,.8);border:1px solid rgba(255,153,51,1)}.risk-box.high-risk{background:rgba(255,51,51,.8);border:1px solid rgba(255,51,51,1)}.risk-box.col-0{left:0}.risk-box.col-1{left:20%}.risk-box.col-2{left:40%}.risk-box.col-3{left:60%}.risk-box.col-4{left:80%}.risk-box.row-0{top:0}.risk-box.row-1{top:20%}.risk-box.row-2{top:40%}.risk-box.row-3{top:60%}.risk-box.row-4{top:80%}.risk-matrix .risk-matrix-item{border-radius:50%;width:8%;height:8%;margin-left:-4%;margin-bottom:-4%;z-index:1000;background:#fff;border:1px solid #000;cursor:pointer;overflow:hidden;-ms-transition:all 1s ease;-webkit-transition:all 1s ease;transition:all 1s ease}.risk-matrix .risk-matrix-item:hover{width:50%;height:50%;margin-left:-25%;margin-bottom:-25%;z-index:2000;border-radius:0;border:1px solid #ddd}.risk-matrix .risk-matrix-item>div.open{padding:5px;visibility:hidden;opacity:0}.risk-matrix .risk-matrix-item:hover>div.open{visibility:visible;opacity:1;-ms-transition:visibility 0s linear .5s,opacity .5s linear;-webkit-transition:visibility 0s linear .5s,opacity .5s linear;transition:visibility 0s linear .5s,opacity .5s linear;-ms-transition-delay:.5s;-webkit-transition-delay:.5s;transition-delay:.5s}.risk-matrix...

JavaScript

var app = angular.module("myApp", ['riskMatrix']);

app.controller("myCtrl", function($scope){
    $scope.data = {};
    
    $scope.data.risks = [
        {
            Id: 1,
            RiskLikelihood: 'High',
            RiskImpact: 'Low'
        },
        {
            Id: 2,
            RiskLikelihood: 'Medium',
            RiskImpact: 'High'
        },
        {
            Id: 3,
            RiskLikelihood: 'Low',
            RiskImpact: 'Very High'
        },
        {
            Id: 4,
            RiskLikelihood: 'Very High',
            RiskImpact: 'Very High'
        }
    ];
    
    $scope.data.likelihoodValues = [
        'Very Low','Low','Medium','High','Very High'
    ];
    
    $scope.data.impactValues = [
        'Very Low','Low','Medium','High','Very High'
    ];
    
});