Built with blockbuilder.org
Last active
July 11, 2020 10:16
-
-
Save ninjakx/8e2c0b407fdb1991c9cc5e81e447ebe2 to your computer and use it in GitHub Desktop.
age_sex_filter
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<head> | |
<!-- <title>Test-Dashboard</title> --> | |
<style> | |
line { | |
stroke: #000000; | |
stroke-width: 1.5; | |
} | |
#interval { | |
float: right; | |
/* position: absolute; */ | |
} | |
select | |
{ | |
/*color: #ccc;*/ | |
} | |
option | |
{ | |
color: #000; | |
} | |
option:first-child | |
{ | |
background-color: #bdbdff; | |
} | |
</style> | |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/3.0.9/dc.min.css"> | |
<meta charset="utf-8"> | |
<script src="https://d3js.org/d3.v5.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.7/crossfilter.js"></script> | |
<!-- <script src="d3.slider.js"></script> --> | |
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.1/d3.js"></script> --> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/3.2.1/dc.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/reductio/1.0.0/reductio.js"></script> | |
</head> | |
<body> | |
<div class="col-lg-6 col-md-6"> | |
<div class="row"> | |
<div class="col-lg-12 col-md-12"> | |
<div class="chart-wrapper"> | |
<div class="chart-stage"> | |
<div id="pie-chart" class="svg-container"> | |
<div class="chart-title"> | |
<span> | |
<strong>Pie Types</strong> | |
</span> | |
<span> | |
<a href="javascript:pieChart.filterAll(); dc.redrawAll();" style="display:none;" class="reset">reset</a> | |
</span> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
<!-- column 3 for row --> | |
<div class="col-lg-6 col-md-6"> | |
<!-- row in column 3 --> | |
<div class="row"> | |
<!-- Bar Chart --> | |
<div class="col-lg-12 col-md-12"> | |
<div class="chart-wrapper"> | |
<div class="chart-stage"> | |
<div id="bar-chart" class="svg-container"> | |
<div class="chart-title"> | |
<span> | |
<strong>Bar Types</strong> | |
</span> | |
<span> | |
<a href="javascript:barChart.filterAll(); dc.redrawAll();" style="display:none;" class="reset">reset</a> | |
</span> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
<!-- column 3 for row --> | |
<div class="col-lg-6 col-md-6"> | |
<!-- row in column 3 --> | |
<div class="row"> | |
<!-- Bar Chart --> | |
<div class="col-lg-12 col-md-12"> | |
<div class="chart-wrapper"> | |
<div class="chart-stage"> | |
<div id="bar-chart2" class="svg-container"> | |
<div class="chart-title"> | |
<span> | |
<strong>Bar Types</strong> | |
</span> | |
<span> | |
<a href="javascript:barChart2.filterAll(); dc.redrawAll();" style="display:none;" class="reset">reset</a> | |
</span> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
<script type="text/javascript" src="http://d3js.org/queue.v1.min.js"></script> | |
<script> | |
var log = console.log; | |
var pieChart = dc.pieChart("#pie-chart"); | |
const barChart = dc.barChart("#bar-chart"); | |
const barChart2 = dc.barChart("#bar-chart2"); | |
// d3.json("https://api.covid19india.org/deaths_recoveries.json").then((json_data) => { | |
Promise.all([ | |
d3.json("https://api.covid19india.org/raw_data1.json"), | |
d3.json("https://api.covid19india.org/raw_data2.json"), | |
d3.json("https://api.covid19india.org/raw_data3.json"), | |
d3.json("https://api.covid19india.org/raw_data4.json"), | |
d3.json("https://api.covid19india.org/raw_data5.json"), | |
d3.json("https://api.covid19india.org/raw_data6.json"), | |
d3.json("https://api.covid19india.org/raw_data7.json"), | |
d3.json("https://api.covid19india.org/raw_data8.json") | |
// d3.json("https://api.rootnet.in/covid19-in/unofficial/covid19india.org/statewise/history") | |
]).then(([data1,data2,data3,data4,data5,data6,data7,data8]) => { | |
log("!@!@!:", data1); | |
var datas = [data1,data2,data3,data4,data5,data6,data7,data8] | |
var data_mod = new Array(); | |
for (var dat=0; dat<8; dat++) | |
{ | |
var data = datas[dat].raw_data; | |
// log("data:", data); | |
var co=0; | |
for (var i=0; i<data.length; i++) | |
{ | |
if (!(data[i].agebracket =="") && !(data[i].gender =="") && (['M','F'].includes(data[i].gender))) | |
{ | |
data_mod.push(data[i]); | |
co = co+1 | |
} | |
} | |
} | |
cf = crossfilter(data_mod); | |
let pieTypeDimension = cf.dimension(function(d) { return d.gender}); | |
// This will give histogram for overall | |
var binwidth = 10; | |
var dim = cf.dimension(function(d) { | |
return parseInt(d.agebracket); }); | |
var group = dim.group(function(d) { | |
return binwidth * Math.floor(d/binwidth); }); | |
// ------------------------------------------ | |
var age_by_cases= dim.group().reduce( | |
// add | |
(p, v) => { | |
p[v.currentstatus] = (p[v.currentstatus] || 0) + 1; | |
return p; | |
}, | |
// remove | |
(p, v) => { | |
p[v.currentstatus] -= 1; | |
return p; | |
}, | |
// init | |
() => ({}) | |
); | |
// log("=====<:",age_by_cases.top(Infinity)); | |
var group1 = pieTypeDimension.group().reduce( | |
function(p, v) { // add | |
// ++p.count; | |
// log("count:::", p.count); | |
p[v.currentstatus] = (p[v.currentstatus] || 0) + 1; | |
return p; | |
}, | |
function(p, v) { // remove | |
// --p.count; | |
p[v.currentstatus] -= 1; | |
return p; | |
}, | |
function() { // initial | |
return {}; | |
}); | |
// log("group1:::", group1.top(Infinity)); | |
function plot_gender_pie(type) { | |
pieChart | |
.height(500) | |
.dimension(pieTypeDimension) | |
.group(group1) | |
.valueAccessor(function(kv) | |
{ | |
return kv.value[type] || 0; | |
}) | |
.othersGrouper(null) | |
.innerRadius(40) | |
.externalLabels(30) | |
.externalRadiusPadding(30) | |
.drawPaths(true) | |
.legend(dc.legend()); | |
} | |
var type_c = "Deceased" | |
plot_gender_pie(type_c); | |
function plot_age_bar(type) { | |
barChart | |
.height(300) | |
.width(500) //give it a width | |
// .margins({top: 10, right: 10, bottom: 20, left: 100})//give it margin left of 100 so that the y axis ticks dont cut off | |
.dimension(dim) | |
.group(age_by_cases, type) | |
.elasticY(true) | |
.valueAccessor(function(p) { | |
return p.value[type_c]; | |
// return (binwidth * Math.floor(parseInt(p.value[type_c])/binwidth)) ; | |
}) | |
.x(d3.scaleLinear().domain([1,101])) | |
.xUnits(dc.units.fp.precision(binwidth)) | |
.elasticX(true); | |
// .gap(2); | |
} | |
plot_age_bar(type_c); | |
barChart2 | |
.height(300) | |
.width(500) //give it a width | |
// .margins({top: 10, right: 10, bottom: 20, left: 100})//give it margin left of 100 so that the y axis ticks dont cut off | |
.dimension(dim) | |
.group(group) | |
.elasticY(true) | |
.valueAccessor(function(p) { | |
return p.value ; | |
}) | |
.x(d3.scaleLinear().domain([0,101])) | |
.xUnits(dc.units.fp.precision(binwidth)) | |
.elasticX(true); | |
dc.renderAll(); | |
}); | |
</script> | |
</body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment