Relationship Chart

by rolfsf

HTML

<script src="//code.jquery.com/jquery-1.11.2.min.js&quot;"></script>
<div class="relationship-chart" id="who-buys-chart"></div>

CSS

.relationship-chart rect{cursor:pointer;shape-rendering:geometricPrecision;-moz-transition-property:opacity;-o-transition-property:opacity;-webkit-transition-property:opacity;transition-property:opacity;-moz-transition-duration:0.5s;-o-transition-duration:0.5s;-webkit-transition-duration:0.5s;transition-duration:0.5s}
.relationship-chart .label{fill:#999;pointer-events:none;font-size:0.8125em}
.relationship-chart .value{fill:#FFF;pointer-events:none;font-size:.6875em}
.relationship-chart .chart:hover rect{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=30);opacity:0.3}
.relationship-chart .col1 rect{fill:#fff;stroke:#93b522}
.relationship-chart .col1 .label{fill:#93b522}
.relationship-chart .col1 .active rect{fill:#93b522;stroke:#93b522;filter:progid:DXImageTransform.Microsoft.Alpha(enabled=false);opacity:1}
.relationship-chart .col1 .active .label{fill:#FFF}.relationship-chart .col2 rect{fill:#639dea}
.relationship-chart .col2 .label{fill:#FFF;text-anchor:middle}
.relationship-chart .col2 .active rect{fill:#639dea;filter:progid:DXImageTransform.Microsoft.Alpha(enabled=false);opacity:1}
.relationship-chart .col3 rect{fill:#fff;stroke:#fd7c23}
.relationship-chart .col3 .label{fill:#fd7c23}
.relationship-chart .col3 .active rect{fill:#fd7c23;stroke:#fd7c23;filter:progid:DXImageTransform.Microsoft.Alpha(enabled=false);opacity:1}
.relationship-chart .col3 .active .label{fill:#FFF}
.relationship-chart.win-loss .col1 rect{stroke:#df583e;cursor:default}
.relationship-chart.win-loss .col1 .label{fill:#df583e}
.relationship-chart.win-loss .col1 .active rect{fill:#df583e;stroke:#df583e}
.relationship-chart.win-loss .col1 .active .label{fill:#FFF}
.relationship-chart.win-loss .col3 rect{stroke:#9bbb58;cursor:default}
.relationship-chart.win-loss .col3 .label{fill:#9bbb58}
.relationship-chart.win-loss .col3 .active rect{fill:#9bbb58;stroke:#9bbb58}
.relationship-chart.win-loss .col3 .active .label{fill:#FFF}
.relationship-chart .col1...

JavaScript

/**
 * Relationship chart for d3.js
 *
 **/

/**
 * Move to front function for d3
 **/
d3.selection.prototype.moveToFront = function() {
    return this.each(function() {
        this.parentNode.appendChild(this);
    });
};

d3.selection.prototype.parents = function() {
    var s = this;
    return this.each(function(d, i) {
        s[0][i] = this.parentNode;
    });
};

function relsChart() {
    var width = 1200,
        height = 240,
        itemWidth = 300,
        itemHeight = 24,
        padding = 8,    //  vertical space betwen items
        margin = {top: 16, right: 16, bottom: 16, left: 16},
        headersOffset = 20,
        showHeaders = true,
        col1term = 'col1', col2term = 'col2', col3term = 'col3',
        col1class = 'c1', col2class = 'c2', col3class = 'c3',
        label = {x: 8, y: 17}, //  padding of label text (for value too, but from right and x*2)
        rx = itemHeight/2, ry = itemHeight/2,
        col1value = function(d) { return d; },
        col2value = function(d) { return d; },
        col3value = function(d) { return d; },
        secondDegree = true,
        onItemMouseOver = null,
        onItemClick = null,
        showBothValues = false,
        secondValue = function(d) { return d.d[1]; };

    //  Arrays fo storing data separately
    var arr1 = [], arr2 = [], arr3 = [], rels = [];

    //  Function for highlight elements
    function highlightRels(svg, cli, val) {
        svg.selectAll('g.item')
            .filter(function(d) {
                return $.inArray(cli, d.links) >= 0;
            })
            .classed('active', val);


        svg.selectAll('.link')
            .filter(function(d) {
                return $.inArray(cli, d.links) >= 0;
            })
            .classed('active', val);

        svg.selectAll('.value')
            .filter(function(d) {
                if ($.inArray(cli, d.links) >= 0) {
                    if (showBothValues) return true;

                    if...