JSFiddle - React, Tailwind, and code Playground

by Gordon Woodhull

HTML

<link rel="stylesheet" href="http://dc-js.github.io/dc.js/css/dc.css">
<script src="http://dc-js.github.io/dc.js/js/d3.js"></script>
<script src="http://dc-js.github.io/dc.js/js/crossfilter.js"></script>
<script src="http://dc-js.github.io/dc.js/js/dc.js"></script>
	<div id="bubblechart">
		
		<a class="reset" href="javascript:suicideBarChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
	</div>

        <pre id='data' style="display:none">Date	Age	Gender	Profession	Methodology	Reason	Time	District	Source
1/5/2010	19	Female	Housewife	Hanging	Family feud	13:00:00	Dhaka	http://archive.thedailystar.net/newDesign/news-details.php?nid=120721
1/5/2010	22	Male	Police	Shooting	Family feud	0:10:00	Dinajpur	http://archive.thedailystar.net/newDesign/news-details.php?nid=120657
1/7/2010	45	Male	Police	Shooting	Family feud	21:15:00	Bogra	http://archive.thedailystar.net/newDesign/news-details.php?nid=121012
1/11/2010	9	Male	Student	Hanging	-	2:00:00	Sirajganj	http://archive.thedailystar.net/newDesign/news-details.php?nid=121476
1/12/2010	17	Female	Student	Hanging	-	13:30:00	Dhaka	http://archive.thedailystar.net/newDesign/news-details.php?nid=121590
1/14/2010	28	Female	Housewife	Jumped in front of train	Family fued	Morning	Magura	http://archive.thedailystar.net/newDesign/news-details.php?nid=122540
1/22/2010	32	Female	Housewife	Hanging	Family fued	Morning	Narayanganj	http://archive.thedailystar.net/newDesign/news-details.php?nid=123380
1/16/2010	30	Male	Not given	Poison	Personal problem	22:30:00	Bogra	http://archive.thedailystar.net/newDesign/news-details.php?nid=123679
1/28/2010	14	Female	Student	Poison	Family fued	-	Satkhira	http://archive.thedailystar.net/newDesign/news-details.php?nid=124183
1/28/2010	76	Female	Student	Poison	Family feud	Afternoon	Satkhira	http://archive.thedailystar.net/newDesign/news-details.php?nid=124183
1/28/2010	11	Female	Not...

JavaScript

var distDim;
    var distSum;
    var Districts = [];

	function print_filter(filter){
		var f=eval(filter);
		if (typeof(f.length) != "undefined") {}else{}
		if (typeof(f.top) != "undefined") {f=f.top(Infinity);}else{}
		if (typeof(f.dimension) != "undefined") {f=f.dimension(function(d) { return "";}).top(Infinity);}else{}
		console.log(filter+"("+f.length+") = "+JSON.stringify(f).replace("[","[\n\t").replace(/}\,/g,"},\n\t").replace("]","\n]"));
	} 

	function loadMapValues(filter){
		var f=eval(filter);
		if (typeof(f.length) != "undefined") {}else{}
		if (typeof(f.top) != "undefined") {f=f.top(Infinity);}else{}
		if (typeof(f.dimension) != "undefined") {f=f.dimension(function(d) { return "";}).top(Infinity);}else{}
		//console.log(filter+"("+f.length+") = "+JSON.stringify(f).replace("[","[\n\t").replace(/}\,/g,"},\n\t").replace("]","\n]"));
		var x= JSON.stringify(f).split("{\"key\":\"");
		for(var i=0;i<x.length;i++)
		{
			z =  x[i].split("\",\"value\":")
			if(z.length==2)
			{ z[1]=z[1].split("}")[0];Districts[z[0]]=parseInt(z[1]);}
		}
		//redrawMap();
	}

	function getAgeGroup(age){
		if(age<15) return "<15";
		if(age<25) return "15-25";
		if(age<35) return "25-35";
		if(age<45) return "35-45";
		return "45<";
	}
	
	function getProfession(profession){
		if(profession=="housewife") return "Housewife";
		if(profession=="student") return "Student";
		if(profession=="housemaid") return "Housemaid";
		return profession;
	
	}
	
		
	function getMethodology(method){
		if(method=="hanging") return "Hanging";
		return method;
	
	}
	
	function getReason(reason){
		if(reason=="family feud" || reason=="Family fued") return "Family feud";
		if(reason=="-") return "not given";
		if(reason=="Not known") return "not given";
		return reason;
	
	}
	
  var data2 = d3.tsv.parse(d3.select("pre#data").text()); //, function (data2){
    var dateFormat = d3.time.format('%m/%d/%Y');
    var suicideBubbleChart  = dc.bubbleChart("#bubblechart");
   

   ...