JSFiddle - React, Tailwind, and code Playground

by jrab227

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<div ng-app='CohortAnalysis'>
    <d3-Histogram width='500' height='200'></d3-Histogram>
    <d3-Pie-Chart width='500' height='200'></d3-Pie-Chart>
</div>

CSS

body {
    font: 10px sans-serif;
}
.bar rect {
    fill: steelblue;
    shape-rendering: crispEdges;
}
.bar text {
    fill: #fff;
}
.axis path, .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}

JavaScript

angular.module('CohortAnalysis', [])
    .service('d3Service', function () {
    return d3
})
    .service('histogramExtractor', ['d3Service', function (d3) {
    // histogramExtractor [Numbers] -> Object
    //    Function to extract values for histogram processing
    return function (data) {

        return {
            'data': data,
                'min': d3.min(data),
                'max': d3.max(data)
        };
    }
}])
    .directive('d3Histogram', ['histogramExtractor', 'd3Service', function (histogramExtractor, d3) {
    return {
        'restrict': 'E',
            'scope': {
            'histData': '=data',
                'height': '@height',
                'width': '@width',
        },
            'link': function (scope, elems, attrs) {

            var formatCount = d3.format(",.0f");

            var margin = {
                top: 10,
                right: 30,
                bottom: 30,
                left: 30
            },
            width = scope.width - margin.left - margin.right,
                height = scope.height - margin.top - margin.bottom;

            d3.select(elems[0]).append("svg")
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom)
                .attr('class', 'histogram')

            var svg = d3.select(elems[0]).select("svg.histogram")

            svg.append("g")
            .attr('class','visualization')
            .attr("transform", 
                "translate(" + margin.left + "," + margin.top + ")");

            var viz = svg.select("g.visualization");

            scope.$watch('histData', function (newval, oldval) {

                if (newval) {

                    viz.selectAll("*").remove()

                    var x = d3.scale.linear()
                        .domain([histData.min,histData.max])
                        .range([0, width]);

                    var data = d3.layout.histogram()
                     ...