Skip to content

[Abandoned] A few basic building blocks for making an app with d3

License

Notifications You must be signed in to change notification settings

gmaclennan/d3-vertebrae

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

ABANDONED

This was just an idea / experiment. Not going to be doing any more work on this.

#d3-vertebrae

d3-vertebrae (d3v) is a small collection of building blocks for building a web app, for when you don't need a full backbone, but just a couple of vertebrae. It is heavily inspired (and borrowed from) Backbone.js but with an API for people who like writing declarative code d3.js style.

d3-vertebrae depends on d3.js and borrows from its coding style. It implements Backbone style models, with d3 events and d3 maps for attribute maps. It provides minimal help, cutting out many convenience methods from Backbone. The aim is to just keep the bare minimum.

Collections are implemented as subclassed arrays, which can be fed directly to d3.selection.data().

##Extending built in classes

Rather than Backbone style Backbone.Model.extend({ method: function, method: function }) you extend d3v models:

d3v.Model.extend()
    .initialize(*initializeFuntion*)
    .sync(*customSyncFunction*)
    .method(*yourOwnMethod*, *customFunction*)

Backbone style will also work though, if you prefer that.

In general the use of {options} objects is completely removed, preferring a more declarative style that might be repulsive to some...

##Views

For now I don't plan to add views, instead implementing views with d3 with the module pattern, as opposed to the classical objects used for models and collections. A typical pattern would be:

MyView = function() {
    // Initialize...
    return function(selection) {
        var data
        var exports = {}

        exports.data(collection) {
            data = collection
            // render whenever the collection changes
            data.on('change', exports.render)
            return exports
        }

        exports.render = function() {

            var divs = selection.selectAll('div')
                .data(data)

            divs.enter()
                // Do what you want with the enter selection

            divs // Update selection

            divs.exit()
                // actions on the exit selection
        }

        return exports
    }
}

About

[Abandoned] A few basic building blocks for making an app with d3

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages