JSFiddle - React, Tailwind, and code Playground

by yonet3d

HTML

<div ng-app="app" ng-controller="DashboardController">
    <div>
        <label>Value:</label>
        <form ng-submit="addValue()">
            <input type="text" ng-model="newValue" placeholder="Enter a new percantage">
        </form>
        <hr>
    </div>
    <bar-graph graph-data="data" accessor="d.value"></bar-graph>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> <style> .chart div {
    width: 0;
    transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -webkit-transition: all 1s ease-out;
}
.chart div {
    font: 10px sans-serif;
    background-color: steelblue;
    text-align: right;
    padding: 3px;
    margin: 5px;
    color: white;
    box-shadow: 2px 2px 2px #666;
}

JavaScript

angular.module('app', [])
    .directive('barGraph', function () {
    return {
        scope: {
            data: '=graphData',
            accessor: '&accessor'
        },
        link: function (scope, element, attrs) {

            //Appends the graph to graph directive
            var graph = d3.select(element[0]);

            var divs = graph.append("div")
                .attr("class", "chart")
                .selectAll('div');

            //Render graph based on 'data'
            var render = function (data) {

                if (!data) return;

                divs = divs.data(data);
                divs.exit().remove();
                divs.enter().append('div')
                    .transition().ease("elastic")
                    .style("width", function (d) {
                        return scope.accessor({d:d}) + "%";
                     })
                    .text(function (d) {
                        
                        return scope.accessor({d:d}) + "%";
                    });
                

            };
            scope.$watch('data', render, true);
        }
    }
}).controller("DashboardController", ["$scope", function ($scope) {
        $scope.data = [{value: 10}, {value:29},{value: 59}]
   
    $scope.addValue = function () {
        if ($scope.newValue) {
            $scope.data.push(this.newValue)
            $scope.newValue = '';
        }
    }
}])