Built with blockbuilder.org
Last active
July 9, 2020 18:55
-
-
Save ninjakx/8fa6a638604890a3a1c69b55baa21e82 to your computer and use it in GitHub Desktop.
dash_resp
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> | |
| <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, #kpi-recovery, #kpi-active, #kpi-deceased { | |
| /*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 5px 5px; | |
| /*color: #f44334;*/ | |
| } | |
| #kpi-confirmed { | |
| margin-left:8%; | |
| color: #f44334; | |
| } | |
| #kpi-active { | |
| color: #1876d3; | |
| } | |
| #kpi-recovery { | |
| color: #389e05; | |
| } | |
| #kpi-deceased { | |
| color: #36484f; | |
| } | |
| /*.kpi-box.diff { | |
| top:24px; | |
| left:50px; | |
| font-size: 1rem; | |
| line-height: 1em; | |
| font-weight: 700; | |
| word-wrap: none; | |
| z-index:13; | |
| position: absolute; | |
| }*/ | |
| .kpi-box .diff { | |
| font-size: 1rem; | |
| } | |
| .kpi-box .value { | |
| top:24px; | |
| margin-left:0.5%; | |
| font-size: 1.4rem; | |
| font-weight: 800; | |
| /*display: inline;*/ | |
| z-index:10; | |
| position: absolute; | |
| } | |
| .kpi-box .label { | |
| margin-left:0.5%; | |
| color: #000a12; | |
| font-size: 0.9rem; | |
| font-weight: 800; | |
| z-index:10; | |
| position: absolute; | |
| /*margin-bottom: 0.5rem;*/ | |
| } | |
| .kpi-box .chart-caption { | |
| position: absolute; | |
| bottom: 5px; | |
| /*left: 5px;*/ | |
| z-index: 13; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| #total_cases, #line-chart, #line-chart2 { | |
| max-height: 20%; | |
| max-width: 20%; | |
| min-width: 32vw; | |
| min-height: 40vh; | |
| /*max-width: 340px;*/ | |
| display: flex; | |
| flex: 1; | |
| margin: 5px 5px; | |
| /* margin-left:2%; | |
| margin-right:10%;*/ | |
| } | |
| #tooltip { | |
| position: absolute; | |
| width: 200px; | |
| height: auto; | |
| padding: 10px; | |
| z-index:14; | |
| background-color: white; | |
| -webkit-border-radius: 10px; | |
| -moz-border-radius: 10px; | |
| border-radius: 10px; | |
| -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4); | |
| -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4); | |
| box-shadow: 4px 4px 10px rgba(0, 100, 100, 0.4); | |
| pointer-events: none; | |
| } | |
| #tooltip.hidden { | |
| display: none; | |
| } | |
| #tooltip p { | |
| margin: 0; | |
| font-family: sans-serif; | |
| font-size: 16px; | |
| line-height: 20px; | |
| } | |
| .irs--round .irs-grid-text { | |
| color: #002bff !important; | |
| } | |
| .irs--round .irs-grid-pol { | |
| background-color: #6644df !important; | |
| } | |
| .irs--round.irs-with-grid { | |
| /*height: 65px;*/ | |
| width: 93% !important; | |
| left: 3% !important; | |
| margin-bottom: 1%; | |
| } | |
| .chart-title { | |
| margin: 15px 15px; | |
| } | |
| #combined_button { | |
| margin-left:45%; | |
| margin-bottom:1%; | |
| background-color: #2196F3; | |
| /*width:6%;*/ | |
| height: 40px; | |
| color: white | |
| /*left:10%;*/ | |
| } | |
| /*.button {background-color: #008CBA;}*/ | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="chart-holder"> | |
| <div id="kpi-confirmed" class="kpi-box", value="confirmed"> | |
| <div class="label"></div> | |
| <div class="value"></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="kpi-active" class="kpi-box", value="active"> | |
| <div class="label"></div> | |
| <div class="value"></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="kpi-recovery" class="kpi-box", value="recovered"> | |
| <div class="label"></div> | |
| <div class="value"></div> | |
| <!-- <div class="diff"></div> --> | |
| <div class="description"></div> | |
| <!-- <div id="daily_dcsd"></div> --> | |
| <div class="chart-caption"> Daily new cases</div> | |
| <!-- <br> --> | |
| </div> | |
| <div id="kpi-deceased" class="kpi-box", value="deaths"> | |
| <div class="label"></div> | |
| <div class="value"></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> | |
| </div> | |
| <div id="tooltip" class="hidden"> | |
| <p><strong id="header"></strong></p> | |
| <p><span id="value"></span></p> | |
| </div> | |
| <div id="ui"></div> | |
| <button type="button" id="combined_button">View All</button> | |
| <div class="container"> | |
| <div class="chart-holder"> | |
| <div class="column" style="background-color:#aaa;"> | |
| <!-- <h2>Column 1</h2> --> | |
| <div class="chart-title"> | |
| <span style="font-size: 1.1em"> | |
| <strong>Total Cases</strong> | |
| <br> | |
| </span> | |
| </div> | |
| <div id="total_cases" class="svg-container"> | |
| </div> | |
| </div> | |
| <div class="column" style="background-color:#aaa;"> | |
| <!-- <h2>Column 1</h2> --> | |
| <div class="chart-title"> | |
| <span> | |
| <strong>Total Cases Statewise</strong> <select id="interval"></select> | |
| <br> | |
| </span> | |
| </div> | |
| <div id="line-chart" class="svg-container"> | |
| </div> | |
| </div> | |
| <div class="column" style="background-color:#aaa;"> | |
| <!-- <h2>Column 1</h2> --> | |
| <div class="chart-title"> | |
| <span style="font-size: 1.1em"> | |
| <strong>Total Cases</strong> | |
| <br> | |
| </span> | |
| </div> | |
| <div id="line-chart2" class="svg-container"> | |
| </div> | |
| </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; | |
| const lang = 'en-US'; | |
| function dateToTS(date) { | |
| return date.valueOf(); | |
| } | |
| function tsToDate(ts) { | |
| const d = new Date(ts); | |
| return d.toLocaleDateString(lang, { | |
| year: 'numeric', | |
| month: 'long', | |
| day: 'numeric', | |
| }); | |
| } | |
| function filterData(dt, from, to, formatReq) { | |
| // log("--====--", dt, formatReq); | |
| if (!formatReq) { | |
| dt = dateToTS(new Date(dt)); | |
| } | |
| else { | |
| const parts = dt.split('/'); | |
| dt = new Date( | |
| parts[1] + '-' + parts[0] + '-' + parts[2].split(' ')[0] | |
| ); | |
| } | |
| if (dt >= from && dt <= to) { | |
| return true; | |
| } | |
| // console.log("dt::::", dt, from, to); | |
| } | |
| var daily_recov = dc.lineChart("#kpi-recovery"); | |
| var daily_conf = dc.lineChart("#kpi-confirmed"); | |
| var daily_dcsd = dc.lineChart("#kpi-deceased"); | |
| var daily_actv = dc.lineChart("#kpi-active"); | |
| var composite = dc.compositeChart("#line-chart"); | |
| var composite2 = dc.barChart("#line-chart2"); | |
| var linechart = dc.lineChart("#line-chart"); | |
| var total_chart = dc.compositeChart("#total_cases"); | |
| var total_line_chart = dc.lineChart("#total_cases"); | |
| 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); | |
| }); | |
| // log("--------->", dateList); | |
| const startDate = new Date("2020-03-15");//new Date(Math.min.apply(null, dateList)); | |
| const endDate = new Date(Math.max.apply(null, dateList)); | |
| log("sdate,edate:", startDate, endDate); | |
| const saveResult = function (datetime) { | |
| const from = datetime['from']; | |
| const to = datetime['to']; | |
| log("from-to:", from, to); | |
| const tsDataSliced = data.filter(function (d) { | |
| return filterData(d.day, from, to, false); | |
| }); | |
| stateline_chart(tsDataSliced); | |
| log("sliced_data:", tsDataSliced); | |
| return tsDataSliced; | |
| }; | |
| $('#ui').ionRangeSlider({ | |
| skin: 'round', | |
| type: 'double', | |
| grid: true, | |
| min: dateToTS(startDate), | |
| max: dateToTS(endDate), | |
| from: dateToTS(startDate), | |
| to: dateToTS(endDate), | |
| prettify: tsToDate, | |
| // onStart: function (datatime) { | |
| // saveResult(datatime) | |
| // }, | |
| onChange: saveResult, | |
| onFinish: saveResult, | |
| }) | |
| ; | |
| data = data.filter(function (d) { | |
| return filterData(d.day, dateToTS(startDate), dateToTS(endDate), false); | |
| }); | |
| stateline_chart(data); | |
| // | |
| }) | |
| .catch(error => log('error', error)) | |
| function stateline_chart(data) { | |
| 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) { | |
| // log("===>", d.day); | |
| 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 | |
| () => ({}) | |
| ); | |
| // log("!@#$:", daily_cases_bar_g.top(Infinity)); | |
| var cases_bar_g = cases_bar_d.group().reduce( | |
| // add | |
| (p, v) => { | |
| v.statewise.forEach(({state, confirmed}) => p[state] = (p[state] || 0) + confirmed); | |
| return p; | |
| }, | |
| // remove | |
| (p, v) => { | |
| v.statewise.forEach(({state, confirmed}) => p[state] -= confirmed); | |
| return p; | |
| }, | |
| // init | |
| () => ({}) | |
| ); | |
| var active_cases_bar_g = cases_bar_d.group().reduce( | |
| // add | |
| (p, v) => { | |
| v.statewise.forEach(({state, confirmed, recovered}) => p[state] = (p[state] || 0) + (confirmed - recovered) ); | |
| return p; | |
| }, | |
| // remove | |
| (p, v) => { | |
| v.statewise.forEach(function({state, confirmed, recovered}) { | |
| // log("%%%%%%%%:", state); | |
| p[state] -= (confirmed - recovered) | |
| }); | |
| return p; | |
| }, | |
| // init | |
| () => ({}) | |
| ); | |
| var recovered_cases_bar_g = cases_bar_d.group().reduce( | |
| // add | |
| (p, v) => { | |
| v.statewise.forEach(({state, recovered}) => p[state] = (p[state] || 0) + recovered ); | |
| return p; | |
| }, | |
| // remove | |
| (p, v) => { | |
| v.statewise.forEach(({state, recovered}) => p[state] -= recovered); | |
| return p; | |
| }, | |
| // init | |
| () => ({}) | |
| ); | |
| var death_cases_bar_g = cases_bar_d.group().reduce( | |
| // add | |
| (p, v) => { | |
| v.statewise.forEach(({state, deaths}) => p[state] = (p[state] || 0) + deaths); | |
| return p; | |
| }, | |
| // remove | |
| (p, v) => { | |
| v.statewise.forEach(({state, deaths}) => p[state] -= deaths); | |
| return p; | |
| }, | |
| // init | |
| () => ({}) | |
| ); | |
| var total_cases_bar_g = cases_bar_d.group().reduce( | |
| // add | |
| (p, v) => { | |
| p['totalconfirmed'] = v.total.confirmed || 0; | |
| p['totalrecovered'] = v.total.recovered || 0; | |
| p['totaldeaths'] = v.total.deaths || 0; | |
| p['totalactive'] = v.total.active || 0; | |
| return p; | |
| }, | |
| // remove | |
| (p, v) => { | |
| p['totalconfirmed'] -= v.total.confirmed; | |
| p['totalrecovered'] -= v.total.recovered; | |
| p['totaldeaths'] -= v.total.deaths; | |
| p['totalactive'] -= v.total.active; | |
| return p; | |
| }, | |
| // init | |
| () => ({}) | |
| ); | |
| const states = data[0].statewise.map(d => d.state); | |
| var latest_data = data[data.length-1]; | |
| var top_states =latest_data.statewise; | |
| const dateList = data.map(function (el) { | |
| return (el.day); | |
| }); | |
| function find_max(state, case_type){ | |
| var max_case = charts_cases_type[case_type].top(Infinity); | |
| var max = 0, val; | |
| for (var j=0; j<max_case.length;j++) | |
| { | |
| val = max_case[j].value[state]; | |
| if (max<=val){ | |
| max = val; | |
| } | |
| } | |
| return max; | |
| } | |
| 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]); | |
| var selected_state="top 10 states", selected_case_type = "confirmed"; | |
| var charts_cases_type = {confirmed: cases_bar_g, active: active_cases_bar_g, recovered: recovered_cases_bar_g, deaths: death_cases_bar_g}; | |
| $(document).ready( | |
| function() { | |
| $('#kpi-confirmed .label').text('Confirmed'); | |
| $('#kpi-confirmed .value').html(latest_data.total.confirmed); | |
| $('#kpi-confirmed .value').append('<span class="diff">( +'+latest_data.daily_confirmed+' )</span>'); | |
| // "<span class='error'>You Clicked "+"12323232"+"</span>"; | |
| // $('#kpi-confirmed .value .confirmed-diff').html("( +"+latest_data.daily_confirmed+" )"); | |
| $('#kpi-active .label').text('Active'); | |
| $('#kpi-active .value').text(latest_data.total.active); | |
| $('#kpi-active .value').append('<span class="diff">( +'+latest_data.daily_active+' )</span>') | |
| $('#kpi-recovery .label').text('Recovered'); | |
| $('#kpi-recovery .value').text(latest_data.total.recovered); | |
| $('#kpi-recovery .value').append('<span class="diff">( +'+latest_data.daily_recovered+' )</span>') | |
| $('#kpi-deceased .label').text('Deaths'); | |
| $('#kpi-deceased .value').text(latest_data.total.deaths); | |
| $('#kpi-deceased .value').append('<span class="diff">( +'+latest_data.daily_deceased+' )</span>') | |
| } | |
| ); | |
| // 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()); | |
| // }; | |
| function daily_chart() | |
| { | |
| // log("^^^^^^^^^:", daily_cases_bar_g.all().length); | |
| composite2 | |
| .width(null) | |
| .height(null) | |
| .x(d3.scaleTime().domain([new Date('15 Mar 2020'),eDate])) | |
| .xUnits(function(){ return daily_cases_bar_g.all().length} ) | |
| // .xUnits(daily_cases_bar_g.all().length * 0.8) | |
| .margins({left: 55, top: 1, right: 30, bottom: 30}) | |
| .elasticX(true) | |
| .elasticY(true) | |
| .brushOn(false) | |
| .yAxisLabel("Daily Cases") | |
| .dimension(cases_bar_d) | |
| .centerBar(true) | |
| .ordinalColors(['#389e05', '#36484f', 'red']) | |
| .group(daily_cases_bar_g, "dailyrecovered") | |
| .valueAccessor(function(d) { | |
| return d.value['dailyrecovered']}) | |
| .stack(daily_cases_bar_g, "dailydeaths", function(d) {return d.value['dailydeaths'];}) | |
| .stack(daily_cases_bar_g, "dailyactive", function(d) {return d.value['dailyactive'];}) | |
| .legend(dc.legend().x(75).y(15).gap(5).horizontal(false).legendText(function(d) { | |
| return d.name; | |
| })); | |
| composite2.on('pretransition', function(chart){ | |
| chart.xAxis().ticks(8).tickFormat(d3.timeFormat("%d %b")); | |
| chart.selectAll("g.x text") | |
| .attr('transform', "rotate(30)") | |
| .style('text-anchor','start') | |
| .style('font-weight','bold'); | |
| chart.selectAll("g.y text") | |
| .style('font-weight','bold'); | |
| }); | |
| // composite2.on('preRedraw', function(chart) { | |
| // chart.xUnits(chart.group().all().length * 0.8); | |
| // }); | |
| // composite2.on("preRedraw", function (chart) { | |
| // chart.rescale(); | |
| // }); | |
| composite2.renderTitle(false); | |
| composite2.on('postRender', chart => { | |
| log("chart_composite2:::", chart, chart.stack()); | |
| var show_tooltip = true; | |
| chart.svg().on('mousemove', () => { | |
| // find closest data point | |
| // log("!!!!!!!!!!@@@@@@@@@@:", chart.children); | |
| chart.select('g.dc-legend').on('mousemove', () => { | |
| // log("!!!!!!!!!!!!!!!!!!!!!!!!!!:"); | |
| show_tooltip = false; | |
| d3.select("#tooltip").classed("hidden", true); | |
| }); | |
| chart.select('g.dc-legend').on('mouseout', () => { | |
| log("!!!!!!!!!!!!!!!!!!!!!!!!!!:"); | |
| show_tooltip = true; | |
| d3.select("#tooltip").classed("hidden", false); | |
| }); | |
| const x = chart.x().invert(d3.mouse(chart.svg().node())[0] - chart.margins().left), | |
| xs = chart.group().all().map(kv => kv.key), | |
| right = d3.bisectLeft(xs, x); | |
| const y = chart.y().invert(d3.mouse(chart.svg().node())[1]); | |
| // log("yyyyyyyY:", xs); | |
| // log("children:", d3.mouse(d3.event.target)[0], d3.event.pageY, chart.children()[0]); | |
| log("xonst x:",y); | |
| let closest = right; | |
| if(right >= xs.length) | |
| closest = right - 1; | |
| else if(right > 0) { | |
| // see if point to the left is closer | |
| if(x - xs[right-1] < xs[right] - x) | |
| closest = right - 1; | |
| } | |
| if (show_tooltip==true) | |
| { | |
| // log("show_tooltip:", show_tooltip); | |
| // var closest_y=10000000; | |
| // var ch_y; | |
| // console.log('closest', new Date(x), closest, xs[closest]); | |
| var chart_count = 0; | |
| var all_rect = d3.selectAll('rect.bar').data(); | |
| log("!@#$$%^:", all_rect.filter(function(d) { return d["x"] == xs[closest]; })); | |
| // .filter(function(d) { return d.name == "someName"; }) | |
| // log("Max ht::::::::::::::::::::::::::", d3.max(all_rect, d=>{log("ddddddddD:", d['y']), d['y']})) | |
| // log("!@#:", closest, xs[closest], chart.stack()[2].values); | |
| chart.stack()[2].values.forEach(child => | |
| { | |
| // log("--->:", closest, all_rect[chart_count], child, all_rect[chart_count]['y']); | |
| if (child["x"]==xs[closest]) | |
| { | |
| var case_val = child['data']['value']; | |
| log("final answer:::::::::::::",child['data']['value'], xs[closest], d3.event.pageY - d3.mouse(d3.event.target)[1] ,d3.event.pageY, d3.mouse(d3.event.target)[1],d3.mouse(d3.event.target)[1] - child['y1'], child['y1'], child['y0'], child['y'], all_rect[chart_count]['y'] ); | |
| // d3.select("#tooltip").classed("hidden", false); | |
| var tooltip_cases = d3.select("#tooltip") | |
| tooltip_cases | |
| // px distance from left edge of svg | |
| .style("left", d3.event.pageX-200 + "px") | |
| // px distance from top edge of svg | |
| .style("top", d3.event.pageY + "px") | |
| // .style("top", d3.event.pageY - d3.mouse(d3.event.target)[1] + "px") | |
| // update value for label box | |
| // .select("#value") | |
| // .text("abcd"); | |
| // log("mychild is:", child['x']); | |
| tooltip_cases.select("#header").text(x.toDateString()); | |
| // tooltip_cases.select("#value").html("<div><span style=" + `color:${cases_color[case_type]}`+">" + `${case_type}`.replace(/^(.{5})(.*)$/, "$1 $2").replace(/(^\w|\s\w)/g, m => m.toUpperCase()) +": </span><strong>"+ text_cases['totalconfirmed']+"</strong><div>"); | |
| tooltip_cases.select("#value").html("<div><span style='color:red'>Total Confirmed: </span><strong>"+ case_val['dailyconfirmed']+"</strong><div>" + "<div><span style='color:#1876d3'>Total Active: </span><strong>"+ case_val['dailyactive']+"</strong><div>" + "<div><span style='color:#389e05'>Total Recovered: </span><strong>"+ case_val['dailyrecovered']+"</strong><div>" + "<div><span style='color:#36484f'>Total Deaths: </span><strong>"+ case_val['dailydeaths']+"</strong><div>"); | |
| tooltip_cases.classed("hidden", false); | |
| } | |
| // log("@######$$$$$%%%%:",all_rect[chart_count]['x'], all_rect[chart_count]['y'], child, d3.select('rect')); | |
| // //Show the tooltip | |
| chart_count = chart_count + 1; | |
| }); | |
| } // <-------- | |
| }) | |
| chart.svg().on('mouseout', () => { | |
| d3.select("#tooltip").classed("hidden", true); | |
| }); | |
| // <================= | |
| }); | |
| } | |
| daily_chart(); | |
| composite2.render(); | |
| function daily_cases_type(case_type) | |
| { | |
| // log("case_type::::", case_type); | |
| var cases_color = {'dailyconfirmed': 'red', 'dailyactive': '#1876d3', 'dailyrecovered': '#389e05', 'dailydeaths': '#36484f'}; | |
| composite2 | |
| .width(null) | |
| .height(null) | |
| .x(d3.scaleTime().domain([new Date('15 Mar 2020'),eDate])) | |
| .margins({left: 60, top: 1, right: 30, bottom: 30}) | |
| // .y(d3.scaleLinear().domain([0,1000])) | |
| .brushOn(false) | |
| .yAxisLabel("Daily Cases") | |
| .dimension(cases_bar_d) | |
| .centerBar(true) | |
| .elasticX(true) | |
| .elasticY(true) | |
| .colors(cases_color[case_type]) | |
| .group(daily_cases_bar_g, case_type) | |
| .valueAccessor(function(d) { | |
| return d.value[case_type]}) | |
| .legend(dc.legend().x(75).y(15).gap(5).horizontal(false).legendText(function(d) { | |
| return d.name; | |
| })); | |
| composite2.on('pretransition', function(chart){ | |
| chart.xAxis().ticks(8).tickFormat(d3.timeFormat("%d %b")); | |
| chart.selectAll("g.x text") | |
| .attr('transform', "rotate(30)") | |
| .style('text-anchor','start') | |
| .style('font-weight','bold'); | |
| chart.selectAll("g.y text") | |
| .style('font-weight','bold'); | |
| }); | |
| composite2.on('postRender', chart => { | |
| log("chart_composite2:::", chart, chart.stack()); | |
| var show_tooltip = true; | |
| chart.svg().on('mousemove', () => { | |
| // find closest data point | |
| // log("!!!!!!!!!!@@@@@@@@@@:", chart.children); | |
| chart.select('g.dc-legend').on('mousemove', () => { | |
| // log("!!!!!!!!!!!!!!!!!!!!!!!!!!:"); | |
| show_tooltip = false; | |
| d3.select("#tooltip").classed("hidden", true); | |
| }); | |
| chart.select('g.dc-legend').on('mouseout', () => { | |
| log("!!!!!!!!!!!!!!!!!!!!!!!!!!:"); | |
| show_tooltip = true; | |
| d3.select("#tooltip").classed("hidden", false); | |
| }); | |
| const x = chart.x().invert(d3.mouse(chart.svg().node())[0] - chart.margins().left), | |
| xs = chart.group().all().map(kv => kv.key), | |
| right = d3.bisectLeft(xs, x); | |
| const y = chart.y().invert(d3.mouse(chart.svg().node())[1]); | |
| // log("yyyyyyyY:", xs); | |
| // log("children:", d3.mouse(d3.event.target)[0], d3.event.pageY, chart.children()[0]); | |
| log("xonst x:",y); | |
| let closest = right; | |
| if(right >= xs.length) | |
| closest = right - 1; | |
| else if(right > 0) { | |
| // see if point to the left is closer | |
| if(x - xs[right-1] < xs[right] - x) | |
| closest = right - 1; | |
| } | |
| if (show_tooltip==true) | |
| { | |
| // log("show_tooltip:", show_tooltip); | |
| // var closest_y=10000000; | |
| // var ch_y; | |
| // console.log('closest', new Date(x), closest, xs[closest]); | |
| var chart_count = 0; | |
| var all_rect = d3.selectAll('rect.bar').data(); | |
| log("!@#$$%^:", chart, all_rect.filter(function(d) { return d["x"] == xs[closest]; })); | |
| // .filter(function(d) { return d.name == "someName"; }) | |
| // log("Max ht::::::::::::::::::::::::::", d3.max(all_rect, d=>{log("ddddddddD:", d['y']), d['y']})) | |
| log("!@#:", case_type, closest, xs[closest]); | |
| chart.stack()[0].values.forEach(child => | |
| { | |
| // log("--->:", closest, all_rect[chart_count], child, all_rect[chart_count]['y']); | |
| if (child["x"]==xs[closest]) | |
| { | |
| var case_val = child['data']['value']; | |
| log("final answer:::::::::::::",child['data']['value'], xs[closest], d3.event.pageY - d3.mouse(d3.event.target)[1] ,d3.event.pageY, d3.mouse(d3.event.target)[1],d3.mouse(d3.event.target)[1] - child['y1'], child['y1'], child['y0'], child['y'], all_rect[chart_count]['y'] ); | |
| // d3.select("#tooltip").classed("hidden", false); | |
| var tooltip_cases = d3.select("#tooltip") | |
| tooltip_cases | |
| // px distance from left edge of svg | |
| .style("left", d3.event.pageX-200 + "px") | |
| // px distance from top edge of svg | |
| .style("top", d3.event.pageY + "px") | |
| // .style("top", d3.event.pageY - d3.mouse(d3.event.target)[1] + "px") | |
| // update value for label box | |
| // .select("#value") | |
| // .text("abcd"); | |
| // log("mychild is:", child['x']); | |
| tooltip_cases.select("#header").text(x.toDateString()); | |
| // tooltip_cases.select("#value").html("<div><span style=" + `color:${cases_color[case_type]}`+">" + `${case_type}`.replace(/^(.{5})(.*)$/, "$1 $2").replace(/(^\w|\s\w)/g, m => m.toUpperCase()) +": </span><strong>"+ text_cases['totalconfirmed']+"</strong><div>"); | |
| tooltip_cases.select("#value").html("<div><span style=" + `color:${cases_color[case_type]}`+">" + `${case_type}`.replace(/^(.{5})(.*)$/, "$1 $2").replace(/(^\w|\s\w)/g, m => m.toUpperCase()) +": </span><strong>"+ case_val[case_type]+"</strong><div>"); | |
| tooltip_cases.classed("hidden", false); | |
| } | |
| // log("@######$$$$$%%%%:",all_rect[chart_count]['x'], all_rect[chart_count]['y'], child, d3.select('rect')); | |
| // //Show the tooltip | |
| chart_count = chart_count + 1; | |
| }); | |
| } // <-------- | |
| }) | |
| chart.svg().on('mouseout', () => { | |
| d3.select("#tooltip").classed("hidden", true); | |
| }); | |
| // <================= | |
| }); | |
| } | |
| composite2.renderTitle(false); | |
| function total_cases_type(case_type) | |
| { | |
| // log("case_type:", case_type); | |
| var cases_color = {'totalconfirmed': 'red', 'totalactive': '#1876d3', 'totalrecovered': '#389e05', 'totaldeaths': '#36484f'}; | |
| total_line_chart | |
| .width(null) | |
| .height(null) | |
| .x(d3.scaleTime().domain([new Date('15 Mar 2020'),eDate])) | |
| .margins({left: 55, top: 1, right: 20, bottom: 30}) | |
| // .y(d3.scaleLinear().domain([0,1000])) | |
| .brushOn(false) | |
| .yAxisLabel("Total Cases") | |
| .dimension(cases_bar_d) | |
| .colors(cases_color[case_type]) | |
| // .centerBar(true) | |
| .elasticY(true) | |
| .elasticX(true) | |
| .title(function(d) { return "" }) | |
| // .colors(color[case_type]) | |
| .group(total_cases_bar_g, case_type) | |
| .valueAccessor(function(d) { | |
| return d.value[case_type]}) | |
| .legend(dc.legend().x(85).y(15).gap(5).horizontal(false).legendText(function(d) { | |
| return d.name; | |
| })); | |
| total_line_chart.on('pretransition', function(chart){ | |
| chart.xAxis().ticks(8).tickFormat(d3.timeFormat("%d %b")); | |
| chart.selectAll("g.x text") | |
| .attr('transform', "rotate(30)") | |
| .style('text-anchor','start') | |
| .style('font-weight','bold'); | |
| chart.selectAll("g.y text") | |
| .style('font-weight','bold'); | |
| }); | |
| total_line_chart.renderTitle(false); | |
| total_line_chart.on('postRender', chart => { | |
| // chart.select('g.dc-legend').on('mousemove', () => { | |
| // log("!!!!!!!!!!!!!!!!!!!!!!!!!!:"); | |
| // d3.select("#tooltip").classed("hidden", false); | |
| // }); | |
| // ************************************************** | |
| chart.svg().on('mousemove', () => { | |
| // find closest data point | |
| const x = chart.x().invert(d3.mouse(chart.svg().node())[0] - chart.margins().left); | |
| xs = chart.group().all().map(kv => kv.key), | |
| // log("xxxxx:", x, xs); | |
| right = d3.bisectLeft(xs, x); | |
| const y = chart.y().invert(d3.mouse(chart.svg().node())[1]); | |
| // log("yyyyyyyY:", y); | |
| // log("children:", d3.mouse(d3.event.target)[0], d3.event.pageY, chart.children()[0]); | |
| // log("xonst x:", x); | |
| let closest = right; | |
| if(right >= xs.length) | |
| closest = right - 1; | |
| else if(right > 0) { | |
| // see if point to the left is closer | |
| if(x - xs[right-1] < xs[right] - x) | |
| closest = right - 1; | |
| } | |
| // log("===>:", chart.g()); | |
| chart.g().selectAll('circle.dot').each(function(d) { | |
| chart._hideDot(d3.select(this)); | |
| if(d.x === xs[closest]) { | |
| chart._showDot(d3.select(this)); | |
| var text_cases = d3.select(this).data()[0]['data'].value; | |
| log("4686868:", text_cases, case_type); | |
| var tooltip_cases = d3.select("#tooltip") | |
| tooltip_cases | |
| // px distance from left edge of svg | |
| .style("left", d3.event.pageX-d3.mouse(d3.event.target)[0]+chart.x()(d.x) + "px") | |
| // px distance from top edge of svg | |
| .style("top", d3.event.pageY-d3.mouse(d3.event.target)[1]+chart.y()(d.y) + "px") | |
| // update value for label box | |
| // .select("#value") | |
| //Show the tooltip | |
| tooltip_cases.select("#header").text(x.toDateString()); | |
| tooltip_cases.select("#value").html("<div><span style=" + `color:${cases_color[case_type]}`+">" + `${case_type}`.replace(/^(.{5})(.*)$/, "$1 $2").replace(/(^\w|\s\w)/g, m => m.toUpperCase()) +": </span><strong>"+ text_cases['totalconfirmed']+"</strong><div>"); | |
| tooltip_cases.classed("hidden", false); | |
| } | |
| }); | |
| chart.svg().on('mouseout', () => { | |
| chart.selectAll('circle.dot').each(function(d) { | |
| chart._hideDot(d3.select(this)); | |
| d3.select("#tooltip").classed("hidden", true); | |
| }); | |
| });; | |
| }); | |
| //********************************************* | |
| // }) | |
| // chart.children().forEach(child => child.g() | |
| // .append('text') | |
| // .attr('class', 'data-tip') | |
| // .attr('fill', 'black') | |
| // .attr('alignment-baseline', 'top') | |
| // .attr('text-anchor', 'begin') | |
| // .attr('visibility', 'hidden') | |
| // ) | |
| }); | |
| } | |
| function total_cases_chart() | |
| { | |
| // log("------------>", width_total, height_total); | |
| total_chart | |
| .width(null) | |
| .height(null) | |
| .x(d3.scaleTime().domain([new Date('15 Mar 2020'),eDate])) | |
| .margins({left: 60, top: 1, right: 30, bottom: 30}) | |
| .brushOn(false) | |
| .yAxisLabel("Total Cases") | |
| .dimension(cases_bar_d) | |
| .elasticY(true) | |
| .elasticX(true) | |
| // .xUnits(dc.units.ordinal) | |
| .compose([ | |
| dc.lineChart(total_chart) | |
| .colors("red") | |
| .group(total_cases_bar_g, "totalconfirmed") | |
| .valueAccessor(function(d) { | |
| return d.value['totalconfirmed']}), | |
| dc.lineChart(total_chart) | |
| .colors("#1876d3") | |
| .group(total_cases_bar_g, "totalactive") | |
| .valueAccessor(function(d) { | |
| return d.value['totalactive']}), | |
| dc.lineChart(total_chart) | |
| .colors("#389e05") | |
| .group(total_cases_bar_g, "totalrecovered") | |
| .valueAccessor(function(d) { | |
| return d.value['totalrecovered']}), | |
| dc.lineChart(total_chart) | |
| .colors("#36484f") | |
| .group(total_cases_bar_g, "totaldeaths") | |
| .valueAccessor(function(d) { | |
| return d.value['totaldeaths']}) | |
| ]) | |
| .legend(dc.legend().x(85).y(15).gap(5).horizontal(false).legendText(function(d) { | |
| // log("**********:", d); | |
| return d.name; | |
| })); | |
| // total_chart.xAxis().ticks(8).tickFormat(d3.timeFormat("%d %b")) | |
| total_chart.on('pretransition', function(chart){ | |
| chart.children().forEach( | |
| child => child.selectAll('circle.dot') | |
| .on('mousemove', null) | |
| .on('mouseout', null) | |
| ); | |
| chart.xAxis().ticks(8).tickFormat(d3.timeFormat("%d %b")); | |
| chart.selectAll("g.x text") | |
| .attr('transform', "rotate(30)") | |
| .style('text-anchor','start') | |
| .style('font-weight','bold'); | |
| chart.selectAll("g.y text") | |
| .style('font-weight','bold'); | |
| }); | |
| // // remove hover events from dots | |
| // total_chart.on('pretransition', chart => { | |
| // chart.children().forEach( | |
| // child => child.selectAll('circle.dot') | |
| // .on('mousemove', null) | |
| // .on('mouseout', null) | |
| // ); | |
| // }) | |
| // function tooltip_text(d) { | |
| // log("ddd:",d) | |
| // return d.value.totalconfirmed; | |
| // } | |
| total_chart.renderTitle(false); | |
| total_chart.on('postRender', chart => { | |
| // chart.select('g.dc-legend').on('mousemove', () => { | |
| // log("!!!!!!!!!!!!!!!!!!!!!!!!!!:"); | |
| // d3.select("#tooltip").classed("hidden", false); | |
| // }); | |
| chart.svg().on('mousemove', () => { | |
| // find closest data point | |
| const x = chart.x().invert(d3.mouse(chart.svg().node())[0] - chart.margins().left), | |
| xs = chart.children()[0].group().all().map(kv => kv.key), | |
| right = d3.bisectLeft(xs, x); | |
| const y = chart.y().invert(d3.mouse(chart.svg().node())[1]); | |
| // log("yyyyyyyY:", y); | |
| // log("children:", d3.mouse(d3.event.target)[0], d3.event.pageY, chart.children()[0]); | |
| // log("xonst x:", x); | |
| let closest = right; | |
| if(right >= xs.length) | |
| closest = right - 1; | |
| else if(right > 0) { | |
| // see if point to the left is closer | |
| if(x - xs[right-1] < xs[right] - x) | |
| closest = right - 1; | |
| } | |
| var closest_y=10000000; | |
| var ch_y; | |
| // console.log('closest', new Date(x), closest, xs[closest]); | |
| var chart_count = 0; | |
| chart.children().forEach(child => { | |
| // log("chart_count:", chart_count); | |
| child.g().selectAll('circle.dot').each(function(d) { | |
| child._hideDot(d3.select(this)); | |
| if(d.x === xs[closest]) { | |
| var diff = Math.abs(d3.mouse(d3.event.target)[1]-child.y()(d.y)); | |
| if (closest_y>=diff) | |
| { | |
| closest_y = diff; | |
| // log("#$$$@!!!!!!!:",chart_count); | |
| ch_y = child.y()(d.y); | |
| } | |
| // log("DFGH:", child, d3.select(this).data(),closest_y); | |
| child._showDot(d3.select(this)); | |
| if (chart_count==3) | |
| { | |
| log("#$%^&&$#:", d3.select(this).data()[0]['data'].value, child, d3.mouse(d3.event.target)[1], ch_y, d3.event.pageY); | |
| var text_cases = d3.select(this).data()[0]['data'].value; | |
| var tooltip_cases = d3.select("#tooltip") | |
| // px distance from left edge of svg | |
| .style("left", d3.event.pageX-d3.mouse(d3.event.target)[0] + child.x()(d.x) + "px") | |
| // px distance from top edge of svg | |
| .style("top", d3.event.pageY-d3.mouse(d3.event.target)[1]+ch_y-40 + "px") | |
| // update value for label box | |
| // .select("#header","#value") | |
| // .text("ax", "!2212", text_cases['totalconfirmed']); | |
| //Show the tooltip | |
| tooltip_cases.select("#header").text(x.toDateString()); | |
| tooltip_cases.select("#value").html("<div><span style='color:red'>Total Confirmed: </span><strong>"+ text_cases['totalconfirmed']+"</strong><div>" + "<div><span style='color:#1876d3'>Total Active: </span><strong>"+ text_cases['totalactive']+"</strong><div>" + "<div><span style='color:#389e05'>Total Recovered: </span><strong>"+ text_cases['totalrecovered']+"</strong><div>" + "<div><span style='color:#36484f'>Total Deaths: </span><strong>"+ text_cases['totaldeaths']+"</strong><div>"); | |
| tooltip_cases.classed("hidden", false); | |
| // log("$$$$$$$$$$$:", chart.group().all()); | |
| // child.g().select('text.data-tip') | |
| // .attr('visibility', 'visible') | |
| // .attr('x', child.x()(d.x)) | |
| // .attr('y', ch_y)//d3.mouse(d3.event.target)[1])//d3.mouse(d3.event.target)[0])//child.y()(d.y)) | |
| // // .text(tooltip_text(d.data)) | |
| // .html("1234") | |
| } | |
| } | |
| // else | |
| // log("---->child-->", child); | |
| }); | |
| chart_count = chart_count + 1; | |
| }) | |
| // log("*************:", closest_y); | |
| }) | |
| chart.svg().on('mouseout', () => { | |
| chart.children().forEach(child => { | |
| child.g().select('text.data-tip') | |
| .attr('visibility', 'hidden') | |
| child.selectAll('circle.dot').each(function(d) { | |
| child._hideDot(d3.select(this)); | |
| d3.select("#tooltip").classed("hidden", true); | |
| }); | |
| }) | |
| }) | |
| // chart.children().forEach(child => child.g() | |
| // .append('text') | |
| // .attr('class', 'data-tip') | |
| // .attr('fill', 'black') | |
| // .attr('alignment-baseline', 'top') | |
| // .attr('text-anchor', 'begin') | |
| // .attr('visibility', 'hidden') | |
| // ) | |
| }); | |
| // total_chart.yAxis().tickFormat(d3.format("s")); | |
| } | |
| // total_cases_type('totalconfirmed'); | |
| total_cases_chart(); | |
| total_chart.render(); | |
| function comp_chart_daily(){ | |
| var cases = ['dailyconfirmed', 'dailyrecovered', 'dailydeceased'] | |
| var cases_color = {'dailyconfirmed': 'red', 'dailyactive': '#1876d3', 'dailyrecovered': '#389e05', 'dailydeaths': '#36484f'}; | |
| // cases.map((case_type, i) => log("===>:", case_type, i)); | |
| composite | |
| .width(null) | |
| .height(null) | |
| // .ordinalColors(["#7FC97F","#BEAED4",'#FDC086']) | |
| .x(d3.scaleTime().domain([sDate,eDate])) | |
| .yAxisLabel("This is the Y Axis!") | |
| .legend(dc.legend().x(70).y(40).itemHeight(13).gap(5)) | |
| .renderHorizontalGridLines(true) | |
| .dimension(cases_bar_d) | |
| .elasticX(true) | |
| .elasticY(true) | |
| .brushOn(false) | |
| .shareTitle(false) | |
| .compose(cases.map( | |
| (case_type,i) => dc.lineChart(composite) | |
| .dimension(cases_bar_d) | |
| // .colors(cases_color[case_type]) | |
| .group(daily_cases_bar_g, "dailyconfirmed") | |
| .valueAccessor(function(d) { | |
| return d.value['dailyconfirmed']; }) | |
| )); | |
| composite.on('pretransition', function(chart){ | |
| chart.xAxis().ticks(8).tickFormat(d3.timeFormat("%d %b")); | |
| chart.selectAll("g.x text") | |
| .attr('transform', "rotate(30)") | |
| .style('text-anchor','start') | |
| .style('font-weight','bold'); | |
| chart.selectAll("g.y text") | |
| .style('font-weight','bold'); | |
| }); | |
| composite | |
| .on('pretransition.hideshow', legendToggle); | |
| }; | |
| function comp_chart(case_type){ | |
| top_states_res = top_states.sort(function(a, b) { | |
| return b[case_type] - a[case_type]; | |
| }).slice(0,10).map(d => d.state); | |
| var max_cases = find_max(top_states_res[0], case_type) | |
| composite | |
| .width(null) | |
| .height(null) | |
| .margins({left: 55, top: 1, right: 20, bottom: 30}) | |
| .yAxisLabel("Total Cases") | |
| .x(d3.scaleTime().domain([new Date('15 Mar 2020'),eDate])) | |
| .y(d3.scaleLinear().domain([0,max_cases*1.1])) | |
| .xUnits(d3.timeDays()) | |
| .legend(dc.legend().x(85).y(15).itemHeight(13).gap(5)) | |
| .renderHorizontalGridLines(true) | |
| .brushOn(false) | |
| .elasticX(true) | |
| .elasticY(true) | |
| .shareTitle(false) | |
| .compose(top_states_res.map( | |
| (state,i) => dc.lineChart(composite) | |
| .dimension(cases_bar_d) | |
| .group(charts_cases_type[case_type], state) | |
| .valueAccessor(kv => kv.value[state]) | |
| .colors(colorScales[0] | |
| (Math.random())) | |
| .x(d3.scaleTime().domain([sDate,eDate])) | |
| .title(function(d) { return (d.key.toDateString() + "\n" + state + ': ' + d.value[state]) }) | |
| )); | |
| composite.on('pretransition', function(chart){ | |
| chart.xAxis().ticks(8).tickFormat(d3.timeFormat("%d %b")); | |
| chart.selectAll("g.x text") | |
| .attr('transform', "rotate(30)") | |
| .style('text-anchor','start') | |
| .style('font-weight','bold'); | |
| chart.selectAll("g.y text") | |
| .style('font-weight','bold'); | |
| }); | |
| composite | |
| .on('pretransition.hideshow', legendToggle); | |
| composite.renderTitle(false); | |
| composite.on('postRender', chart => { | |
| var show_tooltip = true; | |
| chart.svg().on('mousemove', () => { | |
| // find closest data point | |
| // log("!!!!!!!!!!@@@@@@@@@@:", chart.children); | |
| chart.select('g.dc-legend').on('mousemove', () => { | |
| // log("!!!!!!!!!!!!!!!!!!!!!!!!!!:"); | |
| show_tooltip = false; | |
| d3.select("#tooltip").classed("hidden", true); | |
| }); | |
| chart.select('g.dc-legend').on('mouseout', () => { | |
| // log("!!!!!!!!!!!!!!!!!!!!!!!!!!:"); | |
| show_tooltip = true; | |
| d3.select("#tooltip").classed("hidden", false); | |
| }); | |
| const x = chart.x().invert(d3.mouse(chart.svg().node())[0] - chart.margins().left), | |
| xs = chart.children()[0].group().all().map(kv => kv.key), | |
| right = d3.bisectLeft(xs, x); | |
| const y = chart.y().invert(d3.mouse(chart.svg().node())[1]); | |
| // log("yyyyyyyY:", y); | |
| // log("children:", d3.mouse(d3.event.target)[0], d3.event.pageY, chart.children()[0]); | |
| // log("xonst x:",y); | |
| let closest = right; | |
| if(right >= xs.length) | |
| closest = right - 1; | |
| else if(right > 0) { | |
| // see if point to the left is closer | |
| if(x - xs[right-1] < xs[right] - x) | |
| closest = right - 1; | |
| } | |
| if (show_tooltip==true) | |
| { | |
| // log("show_tooltip:", show_tooltip); | |
| var closest_y=10000000; | |
| var ch_y; | |
| // console.log('closest', new Date(x), closest, xs[closest]); | |
| var chart_count = 0; | |
| chart.children().forEach(child => { | |
| // log("chart_count:", chart_count); | |
| child.g().selectAll('circle.dot').each(function(d) { | |
| child._hideDot(d3.select(this)); | |
| if(d.x === xs[closest]) { | |
| var diff = Math.abs(d3.mouse(d3.event.target)[1]-child.y()(d.y)); | |
| if (closest_y>=diff) | |
| { | |
| closest_y = diff; | |
| // log("#$$$@!!!!!!!:",chart_count); | |
| ch_y = child.y()(d.y); | |
| } | |
| // log("DFGH:", closest_y); | |
| child._showDot(d3.select(this)); | |
| if (chart_count==3) | |
| { | |
| // log("#$%^&&$#:", child, d3.mouse(d3.event.target)[1], ch_y, d3.event.pageY); | |
| var text_cases = d3.select(this).data()[0]['data'].value; | |
| // text_cases = Object.keys(text_cases).slice(0, 10).reduce((result, key) => { | |
| // result[key] = text_cases[key]; | |
| // return result; | |
| // }, {}) | |
| // log("4686868:", text_cases, case_type); | |
| var legend_info = d3.select("#line-chart").selectAll(".dc-legend-item").data(); | |
| var tooltip_cases = d3.select("#tooltip") | |
| // log("@@####$$:", text_cases, d3.select("#line-chart").selectAll(".dc-legend-item").data()); | |
| var str = ''; | |
| for(var i=0; i<10; i++){ | |
| str += "<div><span style=" + `color:${legend_info[i].color}`+">" + `${legend_info[i].name}` +": </span><strong>"+ `${text_cases[legend_info[i].name]}`+"</strong><div>"; | |
| // console.log(str); | |
| } | |
| tooltip_cases | |
| // px distance from left edge of svg | |
| .style("left", d3.event.pageX-d3.mouse(d3.event.target)[0] + child.x()(d.x) + "px") | |
| // px distance from top edge of svg | |
| .style("top", d3.event.pageY-d3.mouse(d3.event.target)[1]+ch_y-40 + "px"); | |
| // update value for label box | |
| // .select("#value") | |
| // .html(str); | |
| //Show the tooltip | |
| tooltip_cases.select("#header").text(x.toDateString()); | |
| tooltip_cases.select("#value").html(str); | |
| d3.select("#tooltip").classed("hidden", false); | |
| // log("$$$$$$$$$$$:", closest_y, ch_y); | |
| // child.g().select('text.data-tip') | |
| // .attr('visibility', 'visible') | |
| // .attr('x', child.x()(d.x)) | |
| // .attr('y', ch_y)//d3.mouse(d3.event.target)[1])//d3.mouse(d3.event.target)[0])//child.y()(d.y)) | |
| // // .text(tooltip_text(d.data)) | |
| // .html("1234") | |
| } | |
| } | |
| // else | |
| // log("---->child-->", child); | |
| }); | |
| chart_count = chart_count + 1; | |
| }) | |
| } // <-------- | |
| // log("*************:", closest_y); | |
| }) | |
| chart.svg().on('mouseout', () => { | |
| chart.children().forEach(child => { | |
| // child.g().select('text.data-tip') | |
| // .attr('visibility', 'hidden') | |
| child.selectAll('circle.dot').each(function(d) { | |
| child._hideDot(d3.select(this)); | |
| d3.select("#tooltip").classed("hidden", true); | |
| }); | |
| }) | |
| }) | |
| }); | |
| }; | |
| function line_chart(state, case_type){ | |
| var cases_color = {'confirmed': 'red', 'active': '#1876d3', 'recovered': '#389e05', 'deaths': '#36484f'}; | |
| var state_cases = find_max(state, case_type) | |
| linechart | |
| .width(null) | |
| .height(null) | |
| .margins({left: 65, top: 1, right: 20, bottom: 30}) | |
| .dimension(cases_bar_d) | |
| .group(charts_cases_type[case_type], state) | |
| .valueAccessor(kv => kv.value[state]) | |
| .colors(cases_color[case_type]) | |
| .yAxisLabel("Total Cases") | |
| .legend(dc.legend().x(80).y(15).itemHeight(13).gap(5)) | |
| .x(d3.scaleTime().domain([sDate,eDate])) | |
| .y(d3.scaleLinear().domain([0,state_cases*1.1])) | |
| .xUnits(d3.timeDays()) | |
| .title(function(d) { return (d.key.toDateString() + "\n" + state + ': ' + d.value[state]) }) | |
| .renderHorizontalGridLines(true) | |
| .brushOn(false) | |
| .elasticX(true) | |
| .elasticY(true) | |
| linechart.on('pretransition', function(chart){ | |
| chart.xAxis().ticks(8).tickFormat(d3.timeFormat("%d %b")); | |
| chart.selectAll("g.x text") | |
| .attr('transform', "rotate(30)") | |
| .style('text-anchor','start') | |
| .style('font-weight','bold'); | |
| chart.selectAll("g.y text") | |
| .style('font-weight','bold'); | |
| }); | |
| linechart.renderTitle(false); | |
| linechart.on('postRender', chart => { | |
| // chart.select('g.dc-legend').on('mousemove', () => { | |
| // log("!!!!!!!!!!!!!!!!!!!!!!!!!!:"); | |
| // d3.select("#tooltip").classed("hidden", false); | |
| // }); | |
| // ************************************************** | |
| chart.svg().on('mousemove', () => { | |
| // find closest data point | |
| const x = chart.x().invert(d3.mouse(chart.svg().node())[0] - chart.margins().left); | |
| xs = chart.group().all().map(kv => kv.key), | |
| // log("xxxxx:", x, xs); | |
| right = d3.bisectLeft(xs, x); | |
| const y = chart.y().invert(d3.mouse(chart.svg().node())[1]); | |
| // log("yyyyyyyY:", y); | |
| // log("children:", d3.mouse(d3.event.target)[0], d3.event.pageY, chart.children()[0]); | |
| // log("xonst x:", x); | |
| let closest = right; | |
| if(right >= xs.length) | |
| closest = right - 1; | |
| else if(right > 0) { | |
| // see if point to the left is closer | |
| if(x - xs[right-1] < xs[right] - x) | |
| closest = right - 1; | |
| } | |
| // log("===>:", chart.g()); | |
| chart.g().selectAll('circle.dot').each(function(d) { | |
| chart._hideDot(d3.select(this)); | |
| if(d.x === xs[closest]) { | |
| chart._showDot(d3.select(this)); | |
| var text_cases = d3.select(this).data()[0]['data'].value; | |
| log("4686868:", text_cases, case_type); | |
| var tooltip_cases = d3.select("#tooltip") | |
| tooltip_cases | |
| // px distance from left edge of svg | |
| .style("left", d3.event.pageX-d3.mouse(d3.event.target)[0]+chart.x()(d.x) + "px") | |
| // px distance from top edge of svg | |
| .style("top", d3.event.pageY-d3.mouse(d3.event.target)[1]+chart.y()(d.y) + "px") | |
| // update value for label box | |
| // .select("#value") | |
| //Show the tooltip | |
| tooltip_cases.select("#header").text(x.toDateString()); | |
| tooltip_cases.select("#value").html("<div><span style=" + `color:${cases_color[case_type]}`+">" + `${case_type}` +": </span><strong>"+ text_cases[state]+"</strong><div>"); | |
| tooltip_cases.classed("hidden", false); | |
| } | |
| }); | |
| chart.svg().on('mouseout', () => { | |
| chart.selectAll('circle.dot').each(function(d) { | |
| chart._hideDot(d3.select(this)); | |
| d3.select("#tooltip").classed("hidden", true); | |
| }); | |
| });; | |
| }); | |
| }); | |
| } | |
| function drawLegendToggles(chart) { | |
| chart.selectAll('g.dc-legend .dc-legend-item') | |
| .style('opacity', function(d, i) { | |
| var subchart = chart.select('g.sub._' + i); | |
| var visible = subchart.style('visibility') !== 'hidden'; | |
| return visible ? 1 : 0.2; | |
| }); | |
| } | |
| function legendToggle(chart) { | |
| chart.selectAll('g.dc-legend .dc-legend-item') | |
| .on('click.hideshow', function(d, i) { | |
| var subchart = chart.select('g.sub._' + i); | |
| var visible = subchart.style('visibility') !== 'hidden'; | |
| subchart.style('visibility', function() { | |
| return visible ? 'hidden' : 'visible'; | |
| }); | |
| drawLegendToggles(chart); | |
| }) | |
| drawLegendToggles(chart); | |
| } | |
| comp_chart(selected_case_type); | |
| $('#combined_button').on('click', function(){ | |
| total_chart.render(); | |
| daily_chart(); | |
| composite2.render(); | |
| comp_chart('confirmed') | |
| composite.render(); | |
| // total_cases_chart(); | |
| // total_chart.render(); | |
| // log("###################"); | |
| d3.select('#interval').property('value','Top 10 states'); | |
| d3.selectAll('.kpi-box').each(function() { | |
| log("----->:",$(this)) | |
| $(this).css({ | |
| "box-shadow": "0px 2px 4px 0px rgba(0,0,0,0.2)" | |
| }); | |
| }) | |
| // dc.redrawAll(); | |
| }); | |
| d3.selectAll('.kpi-box')//.select("kpi-confirmed") | |
| .on('click', function() { | |
| log("%%%%%%%%:",this, d3.select(this), d3.select(this).attr("value")); | |
| d3.selectAll('.kpi-box').each(function() { | |
| // log("->:",$(this)) | |
| $(this).css({ | |
| "box-shadow": "0px 2px 4px 0px rgba(0,0,0,0.2)" | |
| }); | |
| }) | |
| $(this).css({ | |
| "box-shadow": "inset 0 1px 1px #dab6b6, 0 0 8px #da0707" | |
| }); | |
| var ctype = d3.select(this).attr('value'); | |
| log("ctype:" ,ctype); | |
| selected_case_type = ctype; | |
| daily_cases_type("daily"+ctype); | |
| composite2.render(); | |
| total_cases_type("total"+ctype); | |
| total_line_chart.margins({left: 70, top: 1, right: 30, bottom: 30}) | |
| total_line_chart.render(); | |
| switch(selected_state) | |
| { | |
| case "top 10 states": | |
| { | |
| var div = d3.selectAll("g.sub"); | |
| div.style("display","none"); | |
| comp_chart(ctype); | |
| composite.margins({left: 65, top: 1, right: 20, bottom: 30}) | |
| composite.render(); | |
| break; | |
| } | |
| default: | |
| { | |
| line_chart(selected_state, ctype); | |
| linechart.render(); | |
| } | |
| } | |
| }); | |
| var intervals = {"Top 10 states" : "top 10 states"}; | |
| states.forEach(function (state, index){ | |
| intervals[state] = state; | |
| }); | |
| var defint = 'Top 10 states'; | |
| d3.select('#interval').selectAll('option') | |
| .data(Object.keys(intervals)) | |
| .enter().append('option') | |
| .text(function(d) { return d; }) | |
| .attr('selected', function(d) { return d === defint ? '' : null; }); | |
| function setup() { | |
| var start_t = window.performance.now(); | |
| var interval_name = d3.select('#interval').nodes()[0].value; | |
| var interval = intervals[interval_name]; | |
| selected_state = interval; | |
| switch(interval_name) { | |
| case 'Top 10 states': | |
| comp_chart(selected_case_type); | |
| composite.render(); | |
| break; | |
| default: | |
| line_chart(interval_name, selected_case_type); | |
| linechart.margins({left: 65, top: 1, right: 20, bottom: 30}) | |
| linechart.render(); | |
| break; | |
| } | |
| }; | |
| d3.select('#interval').on('change', function() { | |
| setup(); | |
| }); | |
| // dc.renderAll(); | |
| new ResizeObserver(callback(daily_conf)).observe(d3.select('#kpi-confirmed').node()); | |
| new ResizeObserver(callback(daily_recov)).observe(d3.select('#kpi-recovery').node()); | |
| new ResizeObserver(callback(daily_actv)).observe(d3.select('#kpi-recovery').node()); | |
| // new ResizeObserver(callback(chart3)).observe(d3.select('#kpi-active').node()); | |
| new ResizeObserver(callback(daily_dcsd)).observe(d3.select('#kpi-deceased').node()); | |
| new ResizeObserver(callback(total_chart)).observe(d3.select('#total_cases').node()); | |
| new ResizeObserver(callback(composite2)).observe(d3.select('#line-chart2').node()); | |
| new ResizeObserver(callback(composite)).observe(d3.select('#line-chart').node()); | |
| new ResizeObserver(callback(total_chart)).observe(d3.select('#total_cases').node()); | |
| new ResizeObserver(callback(total_line_chart)).observe(d3.select('#total_cases').node()); | |
| dc.renderAll(); | |
| }; | |
| </script> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment