ninjakx/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>dc.js - Resizing Scatter Plot using ResizeObserver</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="https://dc-js.github.io/dc.js/css/dc.css"/>
    <style>
      body,.container {
          /*position: absolute;*/
          left: 0; top: 0; right: 0; bottom: 0;
      }
      .container {
          display: flex;
          flex-direction: column;
          position: relative;
      }
      .controls {
          flex: 0;
      }
      .chart-holder {
          flex: 1;
          display: flex;
          flex-direction: row;
          min-height: 0;
      }
      #kpi-confirmed,#test2, #test3, #test4 {
          /*min-width: 10%;*/
          /*position: absolute;*/
          max-height: 20%;
          max-width: 20%;
          /*max-width: 340px;*/
          display: flex;
          flex: 1;
    background: #fff;
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);
    border-radius: 10px;
    margin: 5px 5px;

      }

.kpi-box.diff {
    top:24px;
    left:50px;
    font-size: 1rem;
    line-height: 1em;
    font-weight: 700;
    /*display: inline;*/
    word-wrap: none;
    z-index:10;
    position: absolute;
}

.kpi-box .value {
    top:24px;
    font-size: 1.4rem;
    font-weight: 800;
    /*display: inline;*/
    z-index:10;
    position: absolute;
}

.kpi-box .label {
    color: #000a12;
    font-size: 0.9rem;
    font-weight: 800;
    /*z-index:10;*/
    /*position: relative;*/
    /*margin-bottom: 0.5rem;*/
}

.kpi-box .chart-caption {
  position: absolute;
  bottom: 5px;
  /*left: 5px;*/
  z-index: 13;
}

* {
  box-sizing: border-box;
}

    </style>
</head>
<body>

  <div class="container">
    <div class="chart-holder">
      <div id="kpi-confirmed" class="kpi-box">
              <div class="label">Death</div>
              <div class="value">123</div>
              <div class="diff">12345</div>
              <div class="description"></div>
              <div id="daily_dcsd"></div>
              <div class="chart-caption">&nbsp;&nbsp;&nbsp;Daily new cases</div>
      </div>
      <div id="test2" class="kpi-box">
<!--               <div class="label">Death</div>
              <div class="value">123</div>
              <div class="diff">12345</div>
              <div class="description"></div>
              <div id="daily_dcsd"></div>
              <div class="chart-caption">&nbsp;&nbsp;&nbsp;Daily new cases</div>  -->
              <!-- <br>        -->
      </div>
      <div id="test3" class="kpi-box">
<!--               <div class="label">Death</div>
              <div class="value">123</div>
              <div class="diff">12345</div>
              <div class="description"></div>
              <div id="daily_dcsd"></div>
              <div class="chart-caption">&nbsp;&nbsp;&nbsp;Daily new cases</div>     -->

      </div>
      <div id="test4" class="kpi-box">
<!--               <div class="label">Death</div>
              <div class="value">123</div>
              <div class="diff">12345</div>
              <div class="description"></div>
              <div id="daily_dcsd"></div>
              <div class="chart-caption">&nbsp;&nbsp;&nbsp;Daily new cases</div>    -->
      </div>

    </div>

  <script type="text/javascript" src="https://dc-js.github.io/dc.js/js/d3.js"></script>
  <script type="text/javascript" src="https://dc-js.github.io/dc.js/js/crossfilter.js"></script>
  <script type="text/javascript" src="https://dc-js.github.io/dc.js/js/dc.js"></script>
  <script type="text/javascript" src="https://dc-js.github.io/dc.js/resizing/dc-restore-transition-duration.js"></script>
    <!--Plugin CSS file with desired skin-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/css/ion.rangeSlider.min.css"/>

    <!--jQuery-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <!--Plugin JavaScript file-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/js/ion.rangeSlider.min.js"></script>

  <script type="text/javascript">

const urlParams = new URLSearchParams(window.location.search),
    useCanvas = !!urlParams.get('canvas');

d3.select('#canvas').property('checked', useCanvas).on('change', function() {
    window.location.href = window.location.href.split('?')[0] + (this.checked ? '?canvas=t' : '');
})

    dc.constants.EVENT_DELAY = 0;

  </script>


<script>

map_state = {"Andaman and Nicobar Islands": "AN",
"Andhra Pradesh": "AP",
"Arunachal Pradesh": "AR",
"Assam": "AS",
"Bihar": "BR",
"Chandigarh": "CG",
"Chhattisgarh": "CH",
"Delhi" : "DL",
"Goa" : "GA",
"Gujarat" : "GJ",
"Haryana" : "HR",
"Himachal Pradesh" : "HP",
"Jammu and Kashmir" : "HK",
"Jharkhand" : "JH",
"Karnataka" : "KA",
"Kerala" : "KL",
"Ladakh" : "LD",
"Lakshadweep" : "LK",
"Madhya Pradesh" : "MP",
"Maharashtra" : "MH",
"Manipur" : "MN",
"Meghalaya" : "MH",
"Mizoram" : "MZ",
"Nagaland" :"NL",
"Odisha" : "OD",
"Puducherry" : "PY",
"Punjab" : "PB",
"Rajasthan" : "RJ",
"Tamil Nadu" : "TN",
"Telangana" : "TS",
"Tripura" : "TR",
"Sikkim": "SK",
"Uttar Pradesh" : "UP",
"Uttarakhand" : "UK",
"West Bengal" : "WB",

}

    var log = console.log;

var daily_recov = dc.lineChart("#test2");
var daily_conf = dc.lineChart("#test3");
var daily_dcsd = dc.lineChart("#test4");
var daily_actv = dc.lineChart("#kpi-confirmed");


Promise.all([
  d3.json("https://api.covid19india.org/data.json"),
  d3.json("https://api.rootnet.in/covid19-in/unofficial/covid19india.org/statewise/history")
]).then(([data1,data2]) => {
    var data = data1.cases_time_series;

var from = new Date(2020,0,31);
var to = new Date()

var co = 0, count=0;
// log("=============:::", data[data.length-1]);
for (var start = 0; start <= data.length-1; start++) {

  var day = new Date(data[start].date+"2020");
  // log("day:",day);
  // date = day.toISOString().slice(0, 10);
  date = day.toDateString().split(" ")
  date = date[2]+"-"+date[1]+"-"+date[3]
  // log("day:", day," date:", date);
  if (new Date(date)<=new Date('2020-03-14'))
  {
      conf = parseInt(data[co]['totalconfirmed']);
      recov = parseInt(data[co]['totalrecovered']);
      dcsd = parseInt(data[co]['totaldeceased']);
      actv = conf - recov - dcsd;

      d_conf = parseInt(data[co]['dailyconfirmed']);
      d_recov = parseInt(data[co]['dailyrecovered']);
      d_dcsd = parseInt(data[co]['dailydeceased']);
      d_actv = d_conf - d_recov - d_dcsd;
      data[co] = {"day":date, "daily_confirmed": d_conf, "daily_recovered": d_recov, "daily_deceased": d_dcsd, "daily_active": d_conf-d_recov-d_dcsd};

      data[co]['total'] = {"confirmed": conf, "recovered": recov, "deaths": dcsd, "active":actv };

      statewise_arr = new Array(35);
      for (var st=0; st<35; st++)
      {
        var state_name = Object.keys(map_state)[st];
        statewise_arr[st] = ({'state': state_name, "confirmed": 0, "recovered": 0, "deaths": 0, "active": 0})
      }
      data[co]['statewise'] = statewise_arr;
      count = count + 1;
  }
  else
  {
      data_add = data2.data.history[co-count+1];
      conf = parseInt(data_add['total'].confirmed);
      recov = parseInt(data_add['total'].recovered);
      actv = parseInt(data_add['total'].active);
      dcsd = parseInt(data_add['total'].deaths);

      d_conf = parseInt(data[co]['dailyconfirmed']);
      d_recov = parseInt(data[co]['dailyrecovered']);
      d_dcsd = parseInt(data[co]['dailydeceased']);
      d_actv = d_conf - d_recov - d_dcsd;

      // log("===>:", data_add);
      data[co] = {"day":date, "daily_confirmed": d_conf, "daily_recovered": d_recov, "daily_deceased": d_dcsd, "daily_active": d_conf-d_recov-d_dcsd};

      data[co]['total'] = {"confirmed": conf, "recovered": recov, "deaths": dcsd, "active":actv };

      var i =0;
      statewise_arr = new Array();
      for (var st=0; st<data_add['statewise'].length; st++)
      {
          // log("statewise:", data_add['statewise'][st] )
          if (data_add['statewise'][st].state!='State Unassigned')
          {
            statewise_arr[i] = (data_add['statewise'][st]);
            i=i+1;
          }
      }
      data[co]['statewise'] = statewise_arr;
  }

  co = co + 1 ;
}
log("####:", data);

var latest_data = data[data.length-1];

var dateList = data.map(function (el) {
        return new Date(el.day);
      });

stateline_chart(data);
//
})
.catch(error => log('error', error))


  function stateline_chart(data) {

            var data1 = "x,y,z\n" +
                "1,1,3\n" +
                "5,2,11\n" +
                "13,13,13\n"+
                "5,3,20\n"+
                "12,12,10\n"+
                "3,6,8\n"+
                "15,2,9\n"+
                "8,6,14\n"+
                "1,4,9\n"+
                "8,8,12\n";
            var data1 = d3.csvParse(data1);

            data1.forEach(function (x) {
                x.x = +x.x;
                x.y = +x.y;
                x.z = +x.z;
            });

            var ndx = crossfilter(data1),
                dim1 = ndx.dimension(function (d) {
                    return [+d.x, +d.y];
                }),
                dim2 = ndx.dimension(function (d) {
                    return [+d.y, +d.z];
                }),
                group1 = dim1.group(),
                group2 = dim2.group();

            var fudge = 40;
                let n=0;

            const callback = chart => entries => {
                redraw_chart_no_transitions(
                    chart
                        .width(null)
                        .height(null)
                        .rescale());
                };


        cf = crossfilter(data); // Main crossfilter object

        var cases_bar_d = cf.dimension(function(d) {
          return new Date(d.day)});

      var daily_cases_bar_g = cases_bar_d.group().reduce(
        // add
        (p, v) => {
           p['dailyconfirmed'] = v.daily_confirmed || 0;
           p['dailyrecovered'] = v.daily_recovered || 0;
           p['dailydeaths'] = v.daily_deceased || 0;
           p['dailyactive'] = v.daily_active || 0;

          return p;
        },
        // remove
        (p, v) => {
           p['dailyconfirmed'] -= v.daily_confirmed;
           p['dailyrecovered'] -= v.daily_recovered;
           p['dailydeaths'] -= v.daily_deceased;
           p['dailyactive'] -= v.daily_active;
          return p;
        },
        // init
        () => ({})
      );


var latest_data = data[data.length-1];


const dateList = data.map(function (el) {
  return (el.day);
});

var color = d3.scaleOrdinal(d3.schemeCategory10);

var colorScales =[
  d3.scaleOrdinal(d3.schemeCategory10),
  d3.scaleOrdinal(d3.schemeSet3)
];

const sDate = new Date(dateList[0]);
const eDate = new Date(dateList[dateList.length-1]);

// Drew SVG
var svg = d3.select("body").append("svg")
                       .attr("width", 500)
                       .attr("height", 230);


// log("height::::::", width_conf,width_conf*0.5, height_conf, height_conf*0.7)
function dailyconf()
{
    daily_conf
      .width(null)
      .height(null)
      .margins({top: 0, right: 0, bottom: -1, left: -1})

      .transitionDuration(500)
      .dimension(cases_bar_d)
      .group(daily_cases_bar_g, "dailyconfirmed")
      .valueAccessor(function(d) {
          return d.value['dailyconfirmed'];})
      .renderArea(true)
      .elasticY(true)
      .elasticX(true)
      .colors("red")
      .brushOn(false)
      .x(d3.scaleTime().domain([new Date('15 Mar 2020'), eDate]));

      return daily_conf;
}

dailyconf();

function dailyrecov()
{
    daily_recov.width(null)
      .height(null)
      .margins({top: 0, right: 0, bottom: -1, left: -1})

      .transitionDuration(500)
      .dimension(cases_bar_d)
      .group(daily_cases_bar_g, "dailyrecovered")
      .valueAccessor(function(d) {
          return d.value['dailyrecovered'];})
      .renderArea(true)
      .elasticY(true)
      .elasticX(true)
      .colors("#389e05")
      .brushOn(false)
      .x(d3.scaleTime().domain([new Date('15 Mar 2020'), eDate]));
}

dailyrecov();

function dailyactv()
{
    daily_actv.width(null)
      .height(null)
      .margins({top: 0, right: 0, bottom: -1, left: -1})

      .transitionDuration(500)
      .dimension(cases_bar_d)
      .group(daily_cases_bar_g, "dailyactive")
      .valueAccessor(function(d) {
          return d.value['dailyactive'];})
      .renderArea(true)
      .elasticY(true)
      .elasticX(true)
      .colors("#1876d3")
      .brushOn(false)
      .x(d3.scaleTime().domain([new Date('15 Mar 2020'), eDate]));
}

dailyactv();

function dailydcsd()
{
    daily_dcsd.width(null)
      .height(null)
      .margins({top: 0, right: 0, bottom: -1, left: -1})

      .transitionDuration(500)
      .dimension(cases_bar_d)
      .group(daily_cases_bar_g, "dailydeaths")
      .valueAccessor(function(d) {
          return d.value['dailydeaths'];})
      .renderArea(true)
      .elasticY(true)
      .elasticX(true)
      .colors("#36484f")
      .brushOn(false)
      .x(d3.scaleTime().domain([new Date('15 Mar 2020'), eDate]));
}

dailydcsd();
// const callback = chart => entries => {
//     redraw_chart_no_transitions(
//         chart
//             .width(null)
//             .height(null)
//             .rescale());
//     };

new ResizeObserver(callback(daily_conf)).observe(d3.select('#kpi-confirmed').node());
new ResizeObserver(callback(daily_recov)).observe(d3.select('#test2').node());

            new ResizeObserver(callback(daily_actv)).observe(d3.select('#test2').node());
            // new ResizeObserver(callback(chart3)).observe(d3.select('#test3').node());
            new ResizeObserver(callback(daily_dcsd)).observe(d3.select('#test4').node());

dc.renderAll();

};
</script>


</div>
</body>
</html>

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>dc.js - Resizing Scatter Plot using ResizeObserver</title>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="https://dc-js.github.io/dc.js/css/dc.css"/>
	<style>
	body,.container {
	/position: absolute;/
	left: 0; top: 0; right: 0; bottom: 0;
	}
	.container {
	display: flex;
	flex-direction: column;
	position: relative;
	}
	.controls {
	flex: 0;
	}
	.chart-holder {
	flex: 1;
	display: flex;
	flex-direction: row;
	min-height: 0;
	}
	#kpi-confirmed,#test2, #test3, #test4 {
	/min-width: 10%;/
	/position: absolute;/
	max-height: 20%;
	max-width: 20%;
	/max-width: 340px;/
	display: flex;
	flex: 1;
	background: #fff;
	box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);
	border-radius: 10px;
	margin: 5px 5px;

	}

	.kpi-box.diff {
	top:24px;
	left:50px;
	font-size: 1rem;
	line-height: 1em;
	font-weight: 700;
	/display: inline;/
	word-wrap: none;
	z-index:10;
	position: absolute;
	}

	.kpi-box .value {
	top:24px;
	font-size: 1.4rem;
	font-weight: 800;
	/display: inline;/
	z-index:10;
	position: absolute;
	}

	.kpi-box .label {
	color: #000a12;
	font-size: 0.9rem;
	font-weight: 800;
	/z-index:10;/
	/position: relative;/
	/margin-bottom: 0.5rem;/
	}

	.kpi-box .chart-caption {
	position: absolute;
	bottom: 5px;
	/left: 5px;/
	z-index: 13;
	}

	* {
	box-sizing: border-box;
	}

	</style>
	</head>
	<body>

	<div class="container">
	<div class="chart-holder">
	<div id="kpi-confirmed" class="kpi-box">
	<div class="label">Death</div>
	<div class="value">123</div>
	<div class="diff">12345</div>
	<div class="description"></div>
	<div id="daily_dcsd"></div>
	<div class="chart-caption">   Daily new cases</div>
	</div>
	<div id="test2" class="kpi-box">
	<!-- <div class="label">Death</div>
	<div class="value">123</div>
	<div class="diff">12345</div>
	<div class="description"></div>
	<div id="daily_dcsd"></div>
	<div class="chart-caption">   Daily new cases</div> -->
	<!-- <br> -->
	</div>
	<div id="test3" class="kpi-box">
	<!-- <div class="label">Death</div>
	<div class="value">123</div>
	<div class="diff">12345</div>
	<div class="description"></div>
	<div id="daily_dcsd"></div>
	<div class="chart-caption">   Daily new cases</div> -->

	</div>
	<div id="test4" class="kpi-box">
	<!-- <div class="label">Death</div>
	<div class="value">123</div>
	<div class="diff">12345</div>
	<div class="description"></div>
	<div id="daily_dcsd"></div>
	<div class="chart-caption">   Daily new cases</div> -->
	</div>

	</div>

	<script type="text/javascript" src="https://dc-js.github.io/dc.js/js/d3.js"></script>
	<script type="text/javascript" src="https://dc-js.github.io/dc.js/js/crossfilter.js"></script>
	<script type="text/javascript" src="https://dc-js.github.io/dc.js/js/dc.js"></script>
	<script type="text/javascript" src="https://dc-js.github.io/dc.js/resizing/dc-restore-transition-duration.js"></script>
	<!--Plugin CSS file with desired skin-->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/css/ion.rangeSlider.min.css"/>

	<!--jQuery-->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

	<!--Plugin JavaScript file-->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/js/ion.rangeSlider.min.js"></script>

	<script type="text/javascript">

	const urlParams = new URLSearchParams(window.location.search),
	useCanvas = !!urlParams.get('canvas');

	d3.select('#canvas').property('checked', useCanvas).on('change', function() {
	window.location.href = window.location.href.split('?')[0] + (this.checked ? '?canvas=t' : '');
	})

	dc.constants.EVENT_DELAY = 0;

	</script>


	<script>

	map_state = {"Andaman and Nicobar Islands": "AN",
	"Andhra Pradesh": "AP",
	"Arunachal Pradesh": "AR",
	"Assam": "AS",
	"Bihar": "BR",
	"Chandigarh": "CG",
	"Chhattisgarh": "CH",
	"Delhi" : "DL",
	"Goa" : "GA",
	"Gujarat" : "GJ",
	"Haryana" : "HR",
	"Himachal Pradesh" : "HP",
	"Jammu and Kashmir" : "HK",
	"Jharkhand" : "JH",
	"Karnataka" : "KA",
	"Kerala" : "KL",
	"Ladakh" : "LD",
	"Lakshadweep" : "LK",
	"Madhya Pradesh" : "MP",
	"Maharashtra" : "MH",
	"Manipur" : "MN",
	"Meghalaya" : "MH",
	"Mizoram" : "MZ",
	"Nagaland" :"NL",
	"Odisha" : "OD",
	"Puducherry" : "PY",
	"Punjab" : "PB",
	"Rajasthan" : "RJ",
	"Tamil Nadu" : "TN",
	"Telangana" : "TS",
	"Tripura" : "TR",
	"Sikkim": "SK",
	"Uttar Pradesh" : "UP",
	"Uttarakhand" : "UK",
	"West Bengal" : "WB",

	}

	var log = console.log;

	var daily_recov = dc.lineChart("#test2");
	var daily_conf = dc.lineChart("#test3");
	var daily_dcsd = dc.lineChart("#test4");
	var daily_actv = dc.lineChart("#kpi-confirmed");





	Promise.all([
	d3.json("https://api.covid19india.org/data.json"),
	d3.json("https://api.rootnet.in/covid19-in/unofficial/covid19india.org/statewise/history")
	]).then(([data1,data2]) => {
	var data = data1.cases_time_series;

	var from = new Date(2020,0,31);
	var to = new Date()

	var co = 0, count=0;
	// log("=============:::", data[data.length-1]);
	for (var start = 0; start <= data.length-1; start++) {

	var day = new Date(data[start].date+"2020");
	// log("day:",day);
	// date = day.toISOString().slice(0, 10);
	date = day.toDateString().split(" ")
	date = date[2]+"-"+date[1]+"-"+date[3]
	// log("day:", day," date:", date);
	if (new Date(date)<=new Date('2020-03-14'))
	{
	conf = parseInt(data[co]['totalconfirmed']);
	recov = parseInt(data[co]['totalrecovered']);
	dcsd = parseInt(data[co]['totaldeceased']);
	actv = conf - recov - dcsd;

	d_conf = parseInt(data[co]['dailyconfirmed']);
	d_recov = parseInt(data[co]['dailyrecovered']);
	d_dcsd = parseInt(data[co]['dailydeceased']);
	d_actv = d_conf - d_recov - d_dcsd;
	data[co] = {"day":date, "daily_confirmed": d_conf, "daily_recovered": d_recov, "daily_deceased": d_dcsd, "daily_active": d_conf-d_recov-d_dcsd};

	data[co]['total'] = {"confirmed": conf, "recovered": recov, "deaths": dcsd, "active":actv };

	statewise_arr = new Array(35);
	for (var st=0; st<35; st++)
	{
	var state_name = Object.keys(map_state)[st];
	statewise_arr[st] = ({'state': state_name, "confirmed": 0, "recovered": 0, "deaths": 0, "active": 0})
	}
	data[co]['statewise'] = statewise_arr;
	count = count + 1;
	}
	else
	{
	data_add = data2.data.history[co-count+1];
	conf = parseInt(data_add['total'].confirmed);
	recov = parseInt(data_add['total'].recovered);
	actv = parseInt(data_add['total'].active);
	dcsd = parseInt(data_add['total'].deaths);

	d_conf = parseInt(data[co]['dailyconfirmed']);
	d_recov = parseInt(data[co]['dailyrecovered']);
	d_dcsd = parseInt(data[co]['dailydeceased']);
	d_actv = d_conf - d_recov - d_dcsd;

	// log("===>:", data_add);
	data[co] = {"day":date, "daily_confirmed": d_conf, "daily_recovered": d_recov, "daily_deceased": d_dcsd, "daily_active": d_conf-d_recov-d_dcsd};

	data[co]['total'] = {"confirmed": conf, "recovered": recov, "deaths": dcsd, "active":actv };

	var i =0;
	statewise_arr = new Array();
	for (var st=0; st<data_add['statewise'].length; st++)
	{
	// log("statewise:", data_add['statewise'][st] )
	if (data_add['statewise'][st].state!='State Unassigned')
	{
	statewise_arr[i] = (data_add['statewise'][st]);
	i=i+1;
	}
	}
	data[co]['statewise'] = statewise_arr;
	}

	co = co + 1 ;
	}
	log("####:", data);

	var latest_data = data[data.length-1];

	var dateList = data.map(function (el) {
	return new Date(el.day);
	});

	stateline_chart(data);
	//
	})
	.catch(error => log('error', error))


	function stateline_chart(data) {

	var data1 = "x,y,z\n" +
	"1,1,3\n" +
	"5,2,11\n" +
	"13,13,13\n"+
	"5,3,20\n"+
	"12,12,10\n"+
	"3,6,8\n"+
	"15,2,9\n"+
	"8,6,14\n"+
	"1,4,9\n"+
	"8,8,12\n";
	var data1 = d3.csvParse(data1);

	data1.forEach(function (x) {
	x.x = +x.x;
	x.y = +x.y;
	x.z = +x.z;
	});

	var ndx = crossfilter(data1),
	dim1 = ndx.dimension(function (d) {
	return [+d.x, +d.y];
	}),
	dim2 = ndx.dimension(function (d) {
	return [+d.y, +d.z];
	}),
	group1 = dim1.group(),
	group2 = dim2.group();

	var fudge = 40;
	let n=0;

	const callback = chart => entries => {
	redraw_chart_no_transitions(
	chart
	.width(null)
	.height(null)
	.rescale());
	};



	cf = crossfilter(data); // Main crossfilter object

	var cases_bar_d = cf.dimension(function(d) {
	return new Date(d.day)});

	var daily_cases_bar_g = cases_bar_d.group().reduce(
	// add
	(p, v) => {
	p['dailyconfirmed'] = v.daily_confirmed \|\| 0;
	p['dailyrecovered'] = v.daily_recovered \|\| 0;
	p['dailydeaths'] = v.daily_deceased \|\| 0;
	p['dailyactive'] = v.daily_active \|\| 0;

	return p;
	},
	// remove
	(p, v) => {
	p['dailyconfirmed'] -= v.daily_confirmed;
	p['dailyrecovered'] -= v.daily_recovered;
	p['dailydeaths'] -= v.daily_deceased;
	p['dailyactive'] -= v.daily_active;
	return p;
	},
	// init
	() => ({})
	);


	var latest_data = data[data.length-1];


	const dateList = data.map(function (el) {
	return (el.day);
	});

	var color = d3.scaleOrdinal(d3.schemeCategory10);

	var colorScales =[
	d3.scaleOrdinal(d3.schemeCategory10),
	d3.scaleOrdinal(d3.schemeSet3)
	];

	const sDate = new Date(dateList[0]);
	const eDate = new Date(dateList[dateList.length-1]);

	// Drew SVG
	var svg = d3.select("body").append("svg")
	.attr("width", 500)
	.attr("height", 230);


	// log("height::::::", width_conf,width_conf0.5, height_conf, height_conf0.7)
	function dailyconf()
	{
	daily_conf
	.width(null)
	.height(null)
	.margins({top: 0, right: 0, bottom: -1, left: -1})

	.transitionDuration(500)
	.dimension(cases_bar_d)
	.group(daily_cases_bar_g, "dailyconfirmed")
	.valueAccessor(function(d) {
	return d.value['dailyconfirmed'];})
	.renderArea(true)
	.elasticY(true)
	.elasticX(true)
	.colors("red")
	.brushOn(false)
	.x(d3.scaleTime().domain([new Date('15 Mar 2020'), eDate]));

	return daily_conf;
	}

	dailyconf();

	function dailyrecov()
	{
	daily_recov.width(null)
	.height(null)
	.margins({top: 0, right: 0, bottom: -1, left: -1})

	.transitionDuration(500)
	.dimension(cases_bar_d)
	.group(daily_cases_bar_g, "dailyrecovered")
	.valueAccessor(function(d) {
	return d.value['dailyrecovered'];})
	.renderArea(true)
	.elasticY(true)
	.elasticX(true)
	.colors("#389e05")
	.brushOn(false)
	.x(d3.scaleTime().domain([new Date('15 Mar 2020'), eDate]));
	}

	dailyrecov();

	function dailyactv()
	{
	daily_actv.width(null)
	.height(null)
	.margins({top: 0, right: 0, bottom: -1, left: -1})

	.transitionDuration(500)
	.dimension(cases_bar_d)
	.group(daily_cases_bar_g, "dailyactive")
	.valueAccessor(function(d) {
	return d.value['dailyactive'];})
	.renderArea(true)
	.elasticY(true)
	.elasticX(true)
	.colors("#1876d3")
	.brushOn(false)
	.x(d3.scaleTime().domain([new Date('15 Mar 2020'), eDate]));
	}

	dailyactv();

	function dailydcsd()
	{
	daily_dcsd.width(null)
	.height(null)
	.margins({top: 0, right: 0, bottom: -1, left: -1})

	.transitionDuration(500)
	.dimension(cases_bar_d)
	.group(daily_cases_bar_g, "dailydeaths")
	.valueAccessor(function(d) {
	return d.value['dailydeaths'];})
	.renderArea(true)
	.elasticY(true)
	.elasticX(true)
	.colors("#36484f")
	.brushOn(false)
	.x(d3.scaleTime().domain([new Date('15 Mar 2020'), eDate]));
	}

	dailydcsd();
	// const callback = chart => entries => {
	// redraw_chart_no_transitions(
	// chart
	// .width(null)
	// .height(null)
	// .rescale());
	// };

	new ResizeObserver(callback(daily_conf)).observe(d3.select('#kpi-confirmed').node());
	new ResizeObserver(callback(daily_recov)).observe(d3.select('#test2').node());

	new ResizeObserver(callback(daily_actv)).observe(d3.select('#test2').node());
	// new ResizeObserver(callback(chart3)).observe(d3.select('#test3').node());
	new ResizeObserver(callback(daily_dcsd)).observe(d3.select('#test4').node());

	dc.renderAll();

	};
	</script>



	</div>
	</body>
	</html>