JSFiddle - React, Tailwind, and code Playground

by YOUNY zhu

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>

CSS

body{
        width:1200px;
        margin:100px auto;
    }
    svg text{
        font-size:12px;
    }
    rect{
        shape-rendering:crispEdges;
    }
    .tooltip {
        position: absolute;
        left: 0;
        top: 0;
        background-color: #fff;
        width: 60px;
        border: 1px #ccc solid;
        border-radius: 6px;
        box-shadow: #333 2px 2px 4px;
        padding: 8px;
        font-family: arial, helvetica, sans-serif;
        opacity:0;
    }

JavaScript

var datawa=  [
        ['Lite','CA'],
        ['Grand','WA'],
        ['Small','WV'],
        ['Medium','WV'],
        ['Grand','WV'],
        ['Elite','WV']
    ];
    var width = 400, height = 400, margin ={b:0, t:40, l:170, r:50};
    var d3Div = d3.select("body")
            .append("div").attr('width',width).attr('height',(height+margin.b+margin.t));

    var svg =d3Div
            .append("svg").attr('width',width).attr('height',(height+margin.b+margin.t))
            .append("g");
    !function(){
        var bP={};
        var b=30, bb=150, height=600, buffMargin=1, minHeight=7;
        var c1=[-130, 40], c2=[-50, 100], c3=[-10, 140]; //Column positions of labels.
        var colors =["#3366CC", "#DC3912",  "#FF9900","#109618", "#990099", "#0099C6"];
        var d3Colors = d3.scale.category20c();
        var drawSvg;
        bP.partData = function(data){
            var sData={};

            sData.keys=[
                d3.set(data.map(
                        function(d){
                            return d[0];
                        }
                )).values().sort(function(a,b){ return ( a<b? -1 : a>b ? 1 : 0);}),
                d3.set(data.map(function(d){ return d[1];})).values().sort(function(a,b){ return ( a<b? -1 : a>b ? 1 : 0);})
            ];
            //initialize the relationship
            sData.data = [
                sData.keys[0].map(
                        function(d){
                            return sData.keys[1].map( function(v){ return 0; });
                        }),
                sData.keys[1].map( function(d){ return sData.keys[0].map( function(v){ return 0; }); })
            ];

            data.forEach(function(d){
                sData.data[0][sData.keys[0].indexOf(d[0])][sData.keys[1].indexOf(d[1])]=1;      // The relationship from left to right
                sData.data[1][sData.keys[1].indexOf(d[1])][sData.keys[0].indexOf(d[0])]=1;     // The relationship from right to left
//           ...