Skip to content

Instantly share code, notes, and snippets.

@ninjakx

ninjakx/.block

Last active July 16, 2020 09:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ninjakx/61d405cb0aaeda3be960e836f803cdd5 to your computer and use it in GitHub Desktop.
Save ninjakx/61d405cb0aaeda3be960e836f803cdd5 to your computer and use it in GitHub Desktop.
Download ZIP
age_sex_filter_pie
Raw
.block
license: mit
Raw
index.html
<!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;
}
.dc-chart .pie-slice {
font-size: medium !important;
}
</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(([p1,p2,p3,p4,p5,p6,p7,p8]) => {
log("!@!@!:", p1);
var datas = [p1,p2,p3,p4,p5,p6,p7,p8]
var data_mod = new Array();
for (var dat=0; dat<8; dat++)
{
var p_data = datas[dat].raw_data;
// log("data:", data);
var co=0;
for (var i=0; i<p_data.length; i++)
{
if (!(p_data[i].agebracket =="") && !(p_data[i].gender =="") && (['M','F'].includes(p_data[i].gender)))
{
data_mod.push(p_data[i]);
co = co+1
}
}
}
cf = crossfilter(data_mod);
log(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(300)
.dimension(pieTypeDimension)
.group(group1)
.valueAccessor(function(kv)
{
return kv.value[type] || 0;
})
.othersGrouper(null)
.innerRadius(50)
// .externalLabels(30)
// .externalRadiusPadding(30)
.drawPaths(true)
.legend(dc.legend())
.label(function(d) {
log("-->:",d.value[type]);
return d.key+": " + (d.value[type]/pieTypeDimension.groupAll().reduceCount().value() * 100).toFixed(2) + "%";
})
;
}
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