https://github.com/mattdodge/d3fire

Power your D3 visualizations with data from Firebase
https://github.com/mattdodge/d3fire

d3 d3js firebase javascript

Last synced: about 1 month ago
JSON representation

Power your D3 visualizations with data from Firebase

• Host: GitHub
• URL: https://github.com/mattdodge/d3fire
• Owner: mattdodge
• Created: 2013-06-20T01:15:21.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2015-12-11T00:11:37.000Z (about 9 years ago)
• Last Synced: 2023-03-12T01:11:32.522Z (almost 2 years ago)
• Topics: d3, d3js, firebase, javascript
• Language: HTML
• Homepage:
• Size: 5.86 KB
• Stars: 30
• Watchers: 4
• Forks: 11
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
D3Fire

======

Plugin to easily hook up a Firebase to your D3 visualizations. D3's data binding can be quite powerful, but tends to assume that you have a working copy of the data in your script somewhere. This plugin comes in handy when you want to defer your data storage to Firebase, which provides a "realtime" database and does not require you to keep your own local copy.

Install

-----

Pretty simple, just include the script tag for this plugin after you have included the Firebase and D3 script tags. Still need an example? Try this:

```html 

```

Use It

-----

The plugin creates a new D3 function that operates on a selection called `firebase()`.  Take a selection and bind a Firebase to it; you can include callback functions for when data is added/updated/deleted from the Firebase.

```javascript

d3.select('svg').firebase(

    'https://yourfirebase.firebaseIO.com', 

    {

        createFunc : function(newData) {

            // callback when data is added, maybe we want to add a text element?

            return this.append('text').text(newData.val());

        },

        updateFunc : function(changedData) {

            // data was changed, let's change the text

            this.text(changedData.val());

        }

    }

);

```

D3Fire will take care of binding to the `__data__` attribute of each selector, giving you a copy of the Firebase snapshot to use in later calls.