JSFiddle - React, Tailwind, and code Playground

by YOUNY zhu

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.3.11/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="graph"></div>

CSS

svg {
  display: inline-block;
  transform-style: preserve-3d; }

path.top {
  fill: none;
  stroke: lime; }

path.btm {
  fill: none;
  stroke: red; }

JavaScript

var data = '{"error":"false","data":{"date_windows":{"start":"2013-09-01","end":"2013-10-01"},"total_journeys":77198,"num_customers":63671,"number_valid_journeys":77169,"bucket_counts":{"S3":8228,"S1":21868,"S2":12361,"L":15521,"S4":3037,"J":2656},"journey_counts":{"S2_to_S3":5966,"L_to_S1":8476,"S1_to_S3":386,"S1_to_S2":7998,"S3_to_S2":3213,"S1_to_L":10076,"S2_to_L":3767,"S3_to_S4":3226,"J_to_S2":1331,"S2_to_S1":3384,"S4_to_L":310,"S3_to_L":1571,"S4_to_S3":2198,"S4_to_S2":285,"J_to_S1":10301,"S3_to_S1":890,"L_to_S2":489,"S4_to_S1":119,"L_to_S3":69,"S2_to_S4":38,"J_to_S3":285,"J_to_L":453,"S1_to_S4":9,"N_to_J":12325,"J_to_S4":4}}}';

$(function() {

    var json = $.parseJSON(data);
    // console.log(json);

    // ------ basic ------ //

    $.each(json.data.bucket_counts, function(k, v) {
        $('.bucket_counts').append(k+': '+v+'<br />');
    });
    $.each(json.data.journey_counts, function(k, v) {
        $('.journey_counts').append(k+': '+v+'<br />');
    });
    $('.num_customers').append(json.data.num_customers);
    $('.number_valid_journeys').append(json.data.number_valid_journeys);
    $('.total_journeys').append(json.data.total_journeys);


    // --------------------------------------------------------------------- //
    // ---------------------------- PARSE DATA ----------------------------- //
    // --------------------------------------------------------------------- //

    // ------ Bucket Data ------ //

    var index, buckets = [];
    $.each(json.data.bucket_counts, function(k, v) {

        // Assign bucket names to index
        if(k == 'L')  index = 0;
        if(k == 'J')  index = 1;
        if(k == 'S1') index = 2;
        if(k == 'S2') index = 3;
        if(k == 'S3') index = 4;
        if(k == 'S4') index = 5;

        buckets.push({
            'index': index,
            'name': k,
            'content': v
        });
    });

    // Order by index
    buckets.sort(function(a, b){
        var a1 = a.index, b1 = b.index;
       ...