Row bar with hist in tooltip

Attempt to create a row bar graph with a tooltip that display an histogram.

by JaelB

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.5/dc.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.0-dev/dc.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.5/dc.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.min.js"></script>
<link rel="stylesheet" href="//rawgithub.com/Caged/d3-tip/master/examples/example-styles.css">
<div id="hist" style = "display: none;"></div>
<div id="rate"></div>

JavaScript

function draw_hist(pos){
    var experiments = [
        0.16,  1.03, -0.19, -0.52, -1.21,  0.45, -1.8 ,  0.01,  0.47,
        0.35, -0.04,  0.7 , -0.76,  1.25,  1.43,  0.44, -0.77, -0.65,
       -0.23, -0.05, -1.64,  1.67,  0.9 ,  1.48, -0.25, -0.  , -0.94,
       -0.17,  0.8 , -0.86,  1.43, -1.3 ,  0.55,  0.55, -0.03, -1.78,
       -0.51,  0.62, -0.34,  -2.5, -0.61,  0.71, -1.06,  0.49,  2.2 ,
       -0.18, -0.37, -1.86,  0.87, -0.99,  0.43,  1.6,  1.13, -1.22,
       -2.56, -0.32, -0.17, -0.39, -0.31, -0.4 , -1.04, -2.5,
    ];
    var data = crossfilter(experiments);
    var binw = 0.5;
    var _dim = data.dimension(function(d) {return d;});
    var _group = _dim.group(function(d){return binw * Math.floor(d/binw); });
    var _chart = dc.lineChart(pos);//'#hist_kpv');
    _chart.width(300).height(300)
        .xUnits(dc.units.fp.precision(binw))
        .x(d3.scale.linear().domain([-5, 5]))
       .y(d3.scale.linear().domain([0, 20]))
       .brushOn(false)
        .dimension(_dim)
        .group(_dim.group())
        /* .columns([ 
        {
        label: 'Voyage',
        format: function (d) {
                      return d; }},
                {
        label: 'Sub-Voyage',
        format: function (d) {
                      return 1; }}
        ]); */
        //.gap(1)
        //.renderHorizontalGridLines(true).renderVerticalGridLines(true);
    return _chart;
}

function draw_row(pos){
    var locations = [{'rate': 94, 'loct': '13R'}, {'rate': 85, 'loct': '19'},
        {'rate': 204, 'loct': '32'}, {'rate': 235, 'loct': '30'},
        {'rate': 215, 'loct': '13L'}, {'rate': 203, 'loct': '13R'},
        {'rate': 162, 'loct': '31L'}, {'rate':  58, 'loct': '31L'},
    ];
    var data = crossfilter(locations);
    var _chart = dc.rowChart(pos),
        _dim = data.dimension(function (d) {return d.loct;}),
        _group = _dim.group().reduceSum(dc.pluck('rate'));
    _chart.width(400).height(400)
        .dimension(_dim).group(_group).gap(5);
     return...