How do I access data in Firebase and visualize with D3.js?

Question

I have my data stored as JSON in Firebase. I want to use D3.js to create a visualization from that data. My previous experience in D3 has always been to load in specific files:

d3.csv ('csv-file-here.csv', callbackfunction);

OR

d3.json('json-file-here.json', callbackfunction);

But now that I need D3 to "access" or "pull" from Firebase, I'm a little bit lost as to how to do that. Any help would be greatly appreciated.

Edit:

Okay, so I discovered this: https://github.com/mattdodge/D3Fire which can make Firebase and D3 talk to each other. However, I tried following the instructions and still can't get anything to work. That "Hello World" and console.log statement does not print anything out.

d3.select('svg').firebase(
    'https://mydatabaseURL.com',
    {
        createFunc : function(newData) {
            // callback when data is added
            console.log(newData.val());
            d3.select("body").append("span").text("Hello, world!");
            return this.append('text').text(newData.val());
        },
        updateFunc : function(changedData) {
            // data was changed, let's change the text
            this.text(changedData.val());
        }
    }
);

Edit 2:

If I did it without the above plugin, nothing is printed out either...

var ref = firebase.database().ref();

ref.on('value', function(dataSnapshot){
   console.log(dataSnapshot.val());
});

Edit 3:

My issue was in my database security rules. I reverted that back to default and now I am able to establish a connection with Firebase and get the snapshot to print out my database as an object array. Now, I need to figure out how to actually load that data into D3. I tried d3.json(dataSnapshot.val(), function(rawdata){}) but that didn't load it in.

Edit 4:

Okay, the D3 docs seem to indicate that d3.json() takes a URL for the location where the request for the JSON can be made. So, if it is in a local folder, data.json will suffice. Because I want to get it from Firebase, I need to find out a way to load in that Firebase as a JSON. So I tried

d3.json('https://mydatabasename.firebaseio.com/.json', update);

which still did not work. Printing out the raw data gives me undefined.

Do you have any errors in the console? What version of Firebase are you using? You second edit suggests it's version 3. Have you initialized Firebase? Also, D3Fire has not been updated for a long time, so it won't work with the latest Firebase API. — cartant
@cartant Yes, I have initialized Firebase as I have email/password authentication working as well. Yes, Firebase version 3 and no, no errors in the console. If D3Fire does not work, then for my "Edit 2," I put console.log statements everywhere and it seems to run the ref.on statement but doesn't print anything out. — noblerare

ksav ksav · Accepted Answer · 2016-11-08T15:53:56

Make a reference to your firebase. Wait for it to load data. Then draw your d3 visualization.

var ref = firebase.database().ref();

ref.on('value', function(snapshot) {

  var data = snapshot.val();
  // draw your d3 vis here using the data

});

How do I access data in Firebase and visualize with D3.js?

1 Answers