Есть библиотека ссылка, она строит графики. Вот пример её работы ссылка, здесь находится разбор кода этой диаграммы ссылка. В примере высота столбцов берётся из строки data

chart1 = new Highcharts.Chart({
     chart: {
        renderTo: 'chart_1',
        type: 'column',
        height: 350,
     },
     title: {
        text: 'Инструменты разработчиков, планирующих использовать html5 для создания игр (в %)'
     },
     xAxis: {
        categories: ['Processing.js', 'Impact.js', 'Other', 'Ease.js', 'Box2D.js', 'WebGL', 'DOM', 'CSS', 'Canvas', 'Javascript']
     },
     yAxis: {
        title: {
           text: 'Interviewed'
        }
     },
     series: [{
        name: 'Dev #1',
        data: [5, 10, 20, 22, 25, 28, 30, 40, 80, 90]
     }, {
        name: 'Dev #2',
        data: [15, 15, 18, 40, 30, 25, 60, 60, 80, 70]
     }, {
        name: 'Dev #3',
        data: [1, 3, 6, 0, 50, 25, 50, 60, 30, 100]
     }]
    });

Пожалуйста помогите.Суть проблемы: есть 2 формы, в которые можно ввести только числовые значения, в первую форму вводиться целое число и на странице рисуются квадраты связанные между собой линией, число квадратов зависит от введённого числа в форму, во вторую форму вводиться целое число и из первого квадрата расходятся шары соединённые с квадратом линией, число шаров зависит от введённого числа в поле. Можно ли всё это реализовать на чистом html и css без javascript, если можно то не могли бы вы скинуть примеры реализации или статьи где можно об этом почитать, если не обойтись без javascript, то скинте примеры с ним.

Схема