D3 Examples - In-browser stack

xxxxxxxxxx
 
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/sass.js/0.4.0/sass.min.js"></script>
        <script>
            $.get('gist.sass').done(function (sass) {
                var css = Sass.compile(sass);
                $('<style>').html(css).appendTo('head');
            });
        </script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/react/0.11.0/react-with-addons.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/react/0.11.0/jsxtransformer.js"></script>
        <script type="text/jsx">
            /** @jsx React.DOM */
​
            var defaults = {
                    theme: 'light'
                };
​
            var data = JSON.parse(localStorage.getItem('gist_app')) || defaults;
​
            console.log('Initial data', data);
​
            var Model = new Backbone.Model(data);
​
            var App = React.createClass({
​
                getInitialState: function () {
                    //stackoverflow.com/questions/21709905/can-i-avoid-forceupdate-when-using-react-with-backbone
                    return _.extend({
                        app_working: true,
                        app_done: false,
                        app_fail: false
                    }, this.props.model.toJSON());
                },
​
                componentDidMount: function () {
                    var component = this;
                    component.props.model.on('change', function (model) {
                        var json = model.toJSON();
                        component.setState(json);
                        localStorage.setItem('gist_app', JSON.stringify(json));
                    });
                },
​
                render: function () {
​
                    console.log('render', this.state);
​
                    var classes = React.addons.classSet({
                        app: true,
                        working: this.state.app_working,
                        done: this.state.app_done,
                        fail: this.state.app_fail
                    });
​
                    classes += ' '+ this.state.theme;
​
                    return (
<div className={classes}>
    <button onClick={this.demoDone}>Done</button>
    <button onClick={this.demoReset}>Reset</button>
    <button onClick={this.demoFail}>Fail</button>
    <button onClick={this.theme}>Toggle Theme</button>
</div>
                    );
                },
​
                demoDone: function () {
                    this.setState({
                        app_working: false,
                        app_done: true
                    });
                },
​
                demoFail: function () {
                    this.setState({
                        app_working: false,
                        app_fail: true
                    });
                },
​
                demoReset: function () {
                    this.setState({
                        app_working: true,
                        app_done: false,
                        app_fail: false
                    });
                },
​
                theme: function () {
                    if (this.state.theme === 'light') {
                        this.props.model.set({theme: 'dark'});
                    } else {
                        this.props.model.set({theme: 'light'});
                    }
                }
​
            });
​
            React.renderComponent(<App model={Model} />, document.body);
        </script>
    </head>
    <body>
    </body>
</html>
    