richardbutler

import { dropWhile, forOwn, find } from 'lodash';
import React from 'react/addons';
import { Col, Grid, Row } from 'react-bootstrap';
import Icon from './Icon.jsx';

const CSSTransitionGroup = React.addons.CSSTransitionGroup;

export default React.createClass({

    displayName: 'IconList',

richardbutler

Facebook's Flux architecture was originally conceived for web apps that use React as its view layer. However, it is also the perfect foil for interactive applications built with D3, with its emphasis on functional reactive programming and immutability.

This quick prototype - a remake of Mike Bostock's General Update Pattern III - illustrates how this can be achieved using Reflux.

richardbutler

$numbers: one two three four five six seven eight nine ten eleven twelve thirteen fourteen fifteen sixteen;

$i: 0;

.brick {
  background: rgba(255, 255, 255, 0.5); //rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  float: left;
  height: 50px;

richardbutler

/*global TimelineLite,TweenMax,Expo,Back,Ease,BezierEasing,_ */

(function () {
    'use strict';

    /**
     * Returns the expected container width and height based on
     * the child items that it contains. Should the container not
     * have an explicit size, we need to calculate it.
     */

richardbutler

/*global module */
(function(root, factory) {
    if (typeof define === 'function' && define.amd) {
        define(['React', 'gsap'], factory);
    } else if (typeof exports === 'object') {
        module.exports = factory(require('React'), require('gsap'));
    } else {
        factory(root.React, root.TweenMax);
    }
})(this, function(React, TweenMax) {

richardbutler

/*global _*/

/**
 * Emulates d3's data binding mechanism for non-DOM selections. It will either
 * maintain a set of data directly, or map it to objects if given a factory
 * method. Provides enter and exit selections, and all() for a "merged"
 * selection containing the update and enter selections combined, i.e. all
 * objects contained in the current data set.
 * 
 * For more information on D3's selections, please see the D3 docs.

richardbutler

//------------------------------------------------------------------------------
//
//  Dependencies
//
//------------------------------------------------------------------------------

var Emitter     = require('component-emitter');
var Bindable    = require('./Bindable');

//------------------------------------------------------------------------------

richardbutler

var neo4j = require('neo4j'),
    async = require('async');

var db = new neo4j.GraphDatabase('http://localhost:7474');

function createIndex(done) {
    db.createNodeIndex('programmers', {}, done);
}

function createNode(done) {

richardbutler

function brightness(el) {
    var bgColor, rgba, y, parent;
    bgColor = el.style.backgroundColor;
    parent = el.parentNode;

    function reportParent() {
        return parent ? brightness(parent) : undefined;
    }

    if ((bgColor !== null) && bgColor.length) {