JSFiddle - React, Tailwind, and code Playground

by jrab227

HTML

<script src="http://d3js.org/d3.v3.js"></script>
<div ng-app='Mev.GeneBoxPlotVisualization'>
    <div ng-controller="testCtrl">
        <box-Plot data="groups"></box-Plot>
        
    </div>
</div>

CSS

line {
    fill: #fff;
    stroke: #000;
    stroke-width: 1.5px;
}
line.int-lines {
    stroke-dasharray: 7, 5;
}

JavaScript

angular.module('Mev.GeneBoxPlotVisualization', [])
    .service('D3Service', [function () {
    //Untestable
    return d3;
}])
    .service('D3BoxPlots', ['greaterThan', 'extractValues', 'D3Service', 'extractQuantiles',

function (gT, eV, d3, eQ) {
    
    //D3BoxPlots :: String, D3Selection -> Object
    //  Service to build a Box Plot visualization taking a string
    //  to unique ID the specific plot, and a D3 selection 
    return function (id, element) {

        var width = 30, //width of the box
            padding = 10, //spacing on one side of the box
            geneSpacing = 2 * (width + (padding * 2)); //2 times the space required for a box

        return {
            draw: function (groups) {
                //assume groups = {
                // data : [
                //   {'control':{
                //       values:[{'row':String, 'column':String, 'value':Number}, ...],
                //    'experiment':{
                //       values:[{'row':String, 'column':String, 'value':Number}, ...]},
                //    'geneName': String,
                //    'pValue': Number
                //   }, ...],
                // min: Number,
                // max: Number
                //}

                this.clear();

                element.append('svg')
                    .attr({
                    'width': groups.data.length * geneSpacing,
                        'height': 300,
                        'id': "svg-" + id
                });

                var svg = d3.select('svg#svg-' + id);

                svg.append('g').attr('id', 'quantiles' + id);

                var quantiles = d3.select('g#quantiles' + id);

                yScale = d3.scale.linear().domain([groups.min, groups.max])
                    .range([280, 10]);

                groups.data.map(function (group, index) {

                    quantiles.append('g').attr('id', 'quantile-' + index);

                    var box = quantiles.select('g#quantile-' + index);

   ...