JSFiddle - React, Tailwind, and code Playground
by MituVinci
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Daily Star Suicide Data Visualization</title>
<meta http-equiv="content-type" content="text/html; charset=UTF8">
<link rel="stylesheet" type="text/css" href="./css/dc.css" media="screen" />
<link rel="stylesheet" type="text/css" href="./css/mainstyles.css" />
<link href="./css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="./js/d3.js"></script>
<script type="text/javascript" src="./js/crossfilter.js"></script>
<script type="text/javascript" src="./js/dc.js"></script>
<script type="text/javascript" src="./js/topojson.v1.min.js"></script>
<h1>Daily Star Suicide Visualization</h1>
<div class="viewer" style="color:#0000FF"></div>
<script type="text/javascript" src="./js/drawMap.js"></script>
<div id="bubblechart">
<a class="reset" href="javascript:suicideBarChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
</div>
<div class = "visualcontrols">
<div id="chart-ring-year"></div>
<div id="chart-ring-age-group"></div>
<div id="chart-ring-gender"></div>
<div id="chart-ring-profession"></div>
<div id="chart-ring-methodology"></div>
<div id="chart-ring-reason"></div>
</div>
<script type="text/javascript">
var distDim;
var distSum;
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")...JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<title>Daily Star Suicide Data Visualization</title>
<meta http-equiv="content-type" content="text/html; charset=UTF8">
<link rel="stylesheet" type="text/css" href="./css/dc.css" media="screen" />
<link rel="stylesheet" type="text/css" href="./css/mainstyles.css" />
<link href="./css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="./js/d3.js"></script>
<script type="text/javascript" src="./js/crossfilter.js"></script>
<script type="text/javascript" src="./js/dc.js"></script>
<script type="text/javascript" src="./js/topojson.v1.min.js"></script>
<h1>Daily Star Suicide Visualization</h1>
<div class="viewer" style="color:#0000FF"></div>
<script type="text/javascript" src="./js/drawMap.js"></script>
<div id="bubblechart">
<a class="reset" href="javascript:suicideBarChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
</div>
<div class = "visualcontrols">
<div id="chart-ring-year"></div>
<div id="chart-ring-age-group"></div>
<div id="chart-ring-gender"></div>
<div id="chart-ring-profession"></div>
<div id="chart-ring-methodology"></div>
<div id="chart-ring-reason"></div>
</div>
<script type="text/javascript">
var distDim;
var distSum;
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")...