JSFiddle - React, Tailwind, and code Playground

by MituVinci

HTML

<title>Data visualization</title>
	
 
<!-- load D3js -->
<script src="http://www.d3plus.org/js/d3.js"></script>
 
<!-- load D3plus after D3js -->
<script src="http://www.d3plus.org/js/d3plus.js"></script>
 
<!-- create container element for visualization -->
<div id="viz"></div>

JavaScript

var sample_data = [
    {"Male": 18,"Female": 52, "year": 2010,"Reason": "Family Feud"},
   
    { "Male": 30,"Female": 64,"year": 2011, "Reason": "Family Feud"},
   
    { "Male": 37, "Female": 63, "year": 2012, "Reason": "Family Feud" },
    
    { "Male": 24, "Female": 49, "year": 2013, "Reason": "Family Feud" },
   
    { "Male": 24, "Female": 23, "year": 2014, "Reason": "Family Feud" },
   
    {"Male": 8, "Female": 21, "year": 2010, "Reason": "Information Not Given" },
   
    { "Male": 24, "Female": 57, "year": 2011, "Reason": "Information Not Given"},
   
    { "Male": 29, "Female": 61, "year": 2012, "Reason": "Information Not Given" },
  
    {"Male": 16,"Female": 39,"year": 2013, "Reason": "Information Not Given"},
  
    { "Male": 20, "Female": 35, "year": 2014, "Reason": "Information Not Given"},
   
    { "Male": 0, "Female": 2,"year": 2010,"Reason": "Medical Reason" },
   
    { "Male": 0,"Female": 0, "year": 2011, "Reason": "Medical Reason" },
   
    {"Male": 3, "Female": 1,  "year": 2012, "Reason": "Medical Reason" },
   
    {"Male": 0, "Female": 0, "year": 2013, "Reason": "Medical Reason"},
   
    { "Male": 0,  "Female": 0, "year": 2014,  "Reason": "Medical Reason" },
   
    { "Male": 4, "Female": 3, "year": 2010, "Reason": "Mental Reason"},
   
    { "Male": 3, "Female": 4,"year": 2011, "Reason": "Mental Reason"},
  
    {"Male": 4,"Female": 9,"year": 2012, "Reason": "Mental Reason" },
  
    {"Male": 8, "Female": 7, "year": 2013, "Reason": "Mental Reason" },
   
    { "Male": 7, "Female": 5, "year": 2014,"Reason": "Mental Reason"},
   
    { "Male": 4, "Female": 6,  "year": 2010, "Reason": "Personal Problem"},
   
    { "Male": 1, "Female": 3, "year": 2011,"Reason": "Personal Problem"},
 
    { "Male": 16, "Female": 11, "year": 2012, "Reason": "Personal Problem" },
  
    { "Male": 3, "Female": 5, "year": 2013, "Reason": "Personal Problem"},
  
    { "Male": 5,  "Female": 5, "year": 2014,"Reason": "Personal Problem" },
  
    {"Male": 2,...