JSFiddle - React, Tailwind, and code Playground

by petran

HTML

<link rel="stylesheet" href="http://nvd3.org/css/syntax.css">
<link rel="stylesheet" href="http://nvd3.org/css/common.css">
<script src="http://d3js.org/d3.v2.min.js"></script>
<link rel="stylesheet" href="http://nvd3.org/src/nv.d3.css">
<script src="http://nvd3.org/nv.d3.js"></script>
<svg id="test_graph"></svg>

JavaScript

var data =  [
    {
      key: "Traveler Type",
      values: [
    {
      'label': 'International',
    //  y: (this.model.get('guestProfiles').active.traveler.international[0])
      'value': 5
    },
    {
      'label': "Local",
      //y: (this.model.get('guestProfiles').active.traveler.local[0])
      'value': 3
    },
    {
      'label': "NA",
      //y: (this.model.get('guestProfiles').active.traveler.regional[0])
      'value': 6
    },
    {
      'label': "Regional",
      //y: (this.model.get('guestProfiles').total-this.model.get('guestProfiles').active.traveler.international[0]-this.model.get('guestProfiles').active.traveler.local[0]-this.model.get('guestProfiles').active.traveler.regional[0])
       'value': 3
    }
  ]
        
    }];


nv.addGraph(function() {
     var chart = nv.models.pieChart()
         .x(function(d) { return d.label; })
         .y(function(d) { return d.value; })
         .showLabels(true);
   
       d3.select("#test_graph")
           .datum(data)
         .transition().duration(1200)
           .call(chart);
   
     return chart;
    });