Ди Ма

Вот, например, редактор svg. Вполне утилитарно)
Вообще, если нужен сложный интерфейс, с визуализацией данных и интерактивностью, то, конечно, canvas.
Простые примеры: проложить маршрут на карте, и предоставить возможность изменять ключевые точки маршрута простым перетаскиванием; Или на сайте производителя мебели нужно сделать "картинку", в которой можно изменить (подобрать) цвет любого объекта.

Событие scroll- не изменяет значение scrollTop. Это придется делать самому.
Но само событие можно генерировать и "отлавливать", в том числе, передавать с ним нужные значения.

var body = document.getElementsByTagName('body')[0];

// по клику 
window.addEventListener('click', function (e) {

  // создадим кастомное событие типа scroll
  var event = new CustomEvent("scroll", {
    detail: {
      scrollTop: 200 // передадим нужные значения
    }
  });
  // "вызовем" событие
  window.dispatchEvent(event);
});

// добавим слушателя события scroll
window.addEventListener('scroll', function (e) {
  console.log(e);
  // если событие не настоящее
  if (!e.isTrusted) {
    body.scrollTop = e.detail.scrollTop; // изменяем scrollTop на переданное значение
  }
});

Теперь по клику страница будет скролиться на 200 px. И все слушатели scroll "услышат" событие.

Превратить json в объект можно так:

// json
var json = '{"foo": "bar", "lorem": "ipsum"}';

// Парсим в объект
var obj = JSON.parse(json);

// в цикле обходим свойства объекта
// добавляя значения в таблицу
for (var i in obj) {
	var td = document.createElement('td');
	td.innerHTML = obj[i];
	tr.appendChild(td);
}

В реальности алгоритм чуть сложней, т.к. надо из ключей составить заголовки столбцов, а из значений- ячейки. Но это уже другая тема)
p.s.
Если у вас массив объектов, то надо массив обходить в одном цикле, и для каждого объекта в массиве выполнять обход в вышеприведенном цикле.

Надо "обновить".
Все, что происходит внутри обработчика load - вынести в функцию, и вызывать ее при load событии и после того, как добавили новые блоки.

function slider () {
  // ...
}

window.onload = function () {
  slider();
};

ajax( function (r) {
  div.html(r);
  slider();
});

Например:

var data = {
	name: 'Jack',
	items: {
		dog: 1,
		car: 1,
		phone: 2,
	},
};

// объект в json
var json = JSON.stringify(data); // {"name":"Jack","items":{"dog":1,"car":1,"phone":2}}

// json в объект
var obj = JSON.parse(json); // объект

Когда получаем json- преобразуем его в объект, а дальше уже в зависимости от структуры данных

var data = JSON.parse('{"name":"Jack","items":{"dog":1,"car":1,"phone":2}}');

var header = '<h2>My name is ' + data.name + '</h2>';
var list = '';

for (var i in data.items) {
	list += '<li>' + i + ': ' + data.items[i] + ' шт. </li>';
}

document.getElementById('div').innerHTML += header;
document.getElementById('div').innerHTML += '<ul>' + list + '</ul>';

// Конечно, лучше создавать элементы через
// var div = document.createElement('div');
// наполнять через div.innerHTML = "text";
// и добавлять их через element.appendChild(div);

На все инпуты вешается слушатель "change" события, и в обработчике пишем, что если переменные "длина", "ширина", "количество" определены, то высчитываем площадь.
Тогда при изменении значения любого инпута будет происходить перерасчет.

var data = {num: 1};

$('#wid, #len, #num').on('change', function (e) {

	data[e.target.id] = e.target.value;  // имена свойств объекта совпадают с айдишниками инпутов  для простоты

	if (data.wid && data.len && data.num) {
		$('.res').html(data.wid * data.len * data.num);
	}
});

<input type="text" id="wid">
<input type="text" id="len">
<input type="text" id="num" value="1">

<div class="res"></div>

Вот так еще можно:

var str = "12345678";
var res = "";

for (var i = str.length; i >= 0; i -= 3) {
	var sub = i > 3 ? str.substr(i - 3, 3) : str.substr(0, i);
	res = sub + " " + res;
}

res = res.slice(0, res.length -1);
// 12 345 678