Живая гистограмма с d3 в js с использованием данных из базы данных в реальном времени

Question

Я новичок в javascript и застрял на проблеме в течение большей части 2 недель. Я пытаюсь сделать гистограмму, которая обновляется в режиме реального времени, используя данные из Firebase. Структура моей базы данных:
Название:
------- child1
------- child2
------- child3
------- child4

Данные для firebase предоставляются из скрипта python, который отлично работает и обновляет каждого потомка заголовка каждые 10 секунд. Я сделал гистограмму, которая обновляется автоматически посредством генерации случайных чисел.

   //Return array of 10 random numbers
var randArray = function() {

    for(var i = 0, array = new Array(); i<10; i++) {
        array.push(Math.floor(Math.random()*10 + 1))
    }
    return array
}

var initRandArray = randArray();
var newArray;



var w = 500;
var h = 200;
var barPadding = 1;
var mAx = d3.max(initRandArray)
var yScale = d3.scale.linear()
                .domain([0, mAx])
                .range([0, h])

var svg = d3.select("section")
    .append("svg")
    .attr("width", w)
    .attr("height", h)

svg.selectAll("rect")
    .data(initRandArray)
    .enter()
    .append("rect")
    .attr("x", function(d,i) {return i*(w/initRandArray.length)})
    .attr("y", function(d) {return h - yScale(d)})
    .attr("width", w / initRandArray.length - barPadding)
    .attr("height", function(d){return yScale(d)})
    .attr("fill", function(d) {
    return "rgb(136, 196, " + (d * 100) + ")";
});

svg.selectAll("text")
    .data(initRandArray)
    .enter()
    .append("text")
    .text(function(d){return d})
    .attr("x", function(d, i){return (i*(w/initRandArray.length) + 20)})
    .attr("y", function(d) {return h - yScale(d) + 15})
    .attr("font-family", "sans-serif")
    .attr("fill", "white")

setInterval(function() {

    newArray = randArray();

    var rects = svg.selectAll("rect")

    rects.data(newArray)
        .enter()
        .append("rect")

    rects.transition()
        .ease("cubic-in-out")
        .duration(2000)
        .attr("x", function(d,i) {return i*(w/newArray.length)})
        .attr("y", function(d) {return h - yScale(d)})
        .attr("width", w / newArray.length - barPadding)
        .attr("height", function(d){return yScale(d)})
        .attr("fill", function(d) {
            return "rgb(136, 196, " + (d * 100) + ")";
        });

    var labels = svg.selectAll("text")

    labels.data(newArray)
        .enter()
        .append("text")

    labels.transition()
        .ease("cubic-in-out")
        .duration(2000)
        .text(function(d){return d})
        .attr("x", function(d, i){return (i*(w/newArray.length) + 20)})
        .attr("y", function(d) {return h - yScale(d) + 15})
        .attr("font-family", "sans-serif")
        .attr("fill", "white")


}, 3000)

Живая гистограмма на случайном числе

Мне нужно обновить график, используя данные из Firebase. Я уже знаю, как подключить FireBase к JS, используя снимок, и уже пробовал его безрезультатно. Кроме того, нужна помощь в оформлении графика. Пожалуйста, если кто-нибудь знает, как я могу закончить это (его время чувствительно). Вот кодовая ссылка в jsfiddle: Живая гистограмма d3
Спасибо