Как сделать интерактивную систему бронирование столов?
https://d3js.org/
Логику реализовать при помощи головы и немного рук и жопы.
Не нужны графические библиотеки. Нужны riot.js. и jquery для аякса.
Каждый квадрат объект в массиве. По клику менять состояние объекта<my-field >
    <div class="fields-wrap">
        <div each="{row in fields}" class="fields-row">
            <button onclick="{toggleActive}" each="{field in row}" class="fields-item {active: field.isActive}">{field.place}</button>    
        </div>
    </div>
    <script>
        var fields = [
            [
                {place:1,isActive:false},
                {place:2,isActive:false},
                {place:3,isActive:false},
                {place:4,isActive:false},
                {place:5,isActive:false}
            ],
            [
                {place:1,isActive:false},
                {place:2,isActive:false},
                {place:3,isActive:false},
                {place:4,isActive:false},
                {place:5,isActive:false}
            ],
            [
                {place:1,isActive:false},
                {place:2,isActive:false},
                {place:3,isActive:false},
                {place:4,isActive:false},
                {place:5,isActive:false}
            ],
            [
                {place:1,isActive:false},
                {place:2,isActive:false},
                {place:3,isActive:false},
                {place:4,isActive:false},
                {place:5,isActive:false}
            ],
            [
                {place:1,isActive:false},
                {place:2,isActive:false},
                {place:3,isActive:false},
                {place:4,isActive:false},
                {place:5,isActive:false}
            ]
        ]
        toggleActive(e){
            e.item.isActive = !e.item.isActive;
        }
    </script>
</my-field>