function init(event) {
var tooltip = d3.select("g.tooltip.mouse");
var line = d3.select("g#date_line line");
var plot = d3.select("#patch_2");
var offset = plot.node().getBBox().x;
var date_label = d3.select("#date");
// var border = d3.select("#tooltiprect");
var gap = 15;
let padding = 4;
d3.select("#figure_1").on("mousemove", function (evt) {
// from https://codepen.io/billdwhite/pen/rgEbc
tooltip.attr('visibility', "visible")
var plotpos = d3.pointer(evt, plot.node())[0] - offset;
var index = Math.round(plotpos / plot.node().getBBox().width * (data[0].index.length-1));
var date = data[0].index[index];
if (date) {
date = date.split("T")[0];
} else {
tooltip.attr('visibility', "hidden");
d3.select("g#date_line").attr('visibility', "hidden");
d3.select("#legend_1").attr('visibility', "visible");
return;
}
//date_label.node().textContent = date;
values = [];
for ( let number = 0; number < legends.length; number++ ) {
var row = [data[0].data[index][number], legends[number], colours[number]];
for (let d = 1; d < data.length; d++) {
row.push(data[d].data[index][number])
}
values.push(row);
}
values.sort(function(a,b) {return a[0] - b[0]});
values.reverse();
table = "<html:tr><html:th>"+(new Date(date)).toDateString()+"</html:th>";
for (let l = 0; l < labels.length; l++) {
table += "<html:th>"+labels[l]+"</html:th>";
}
table += "</html:tr>";
for (let col = 0; col < values.length; col++) {
var colour = values[col][2];
table += "<html:tr><html:td style='color:" + colour + "'>" + values[col][1] + "</html:td>";
for ( let number = 3; number < values[col].length; number++ ) {
table += "<html:td style='text-align: right'>" + values[col][number] + "</html:td>";
}
table += "</html:tr>";
}
d3.select("#tooltip_table").html(table);
var mouseCoords = d3.pointer(evt, tooltip.node().parentElement);
let tooltipbox = d3.select("#tooltiptext div").node();
let width = tooltipbox.clientWidth;
var x = mouseCoords[0] - width - gap*2;
if (x < 0) {
x = mouseCoords[0] + gap;
}
tooltip
.attr("transform", "translate("
+ (x) + ","
+ (mouseCoords[1] - tooltipbox.clientHeight/2) + ")");
line.attr("x1", mouseCoords[0]);
line.attr("x2", mouseCoords[0]);
let top = plot.node().getBBox().y;
let bottom = top + plot.node().getBBox().height;
line.attr("y1", top);
line.attr("y2", bottom);
d3.select("#date_line").attr('visibility', "visible");
d3.select("#legend_1").attr('visibility', "hidden");
// Move the dots
for (let col = 0; col < legends.length; col++) {
let dot = d3.select("#dot_"+col);
dot.attr('cy', bottom - (data[0].data[index][col] * (bottom - top)) );
dot.attr('cx', mouseCoords[0]);
if (data[0].data[index][col] == null) {
dot.attr("visibility", "hidden");
}
else {
dot.attr("visibility", "visible");
}
}
})
.on("mouseout", function () {
d3.select("#date_line").attr('visibility', "hidden");
return tooltip.attr('visibility', "hidden");
d3.select("#legend_1").attr('visibility', "visible");
});
}
var data = [{"columns":["Bangkok Metropolitan Region","Central","Eastern","Western","Northeastern","Northern","Southern"],"index":["2020-01-31T00:00:00.000","2020-02-29T00:00:00.000","2020-03-31T00:00:00.000","2020-04-30T00:00:00.000","2020-05-31T00:00:00.000","2020-06-30T00:00:00.000","2020-07-31T00:00:00.000","2020-08-31T00:00:00.000","2020-09-30T00:00:00.000","2020-10-31T00:00:00.000","2020-11-30T00:00:00.000","2020-12-31T00:00:00.000","2021-01-31T00:00:00.000","2021-02-28T00:00:00.000","2021-03-31T00:00:00.000","2021-04-30T00:00:00.000","2021-05-31T00:00:00.000","2021-06-30T00:00:00.000","2021-07-31T00:00:00.000","2021-08-31T00:00:00.000","2021-09-30T00:00:00.000","2021-10-31T00:00:00.000","2021-11-30T00:00:00.000","2021-12-31T00:00:00.000","2022-01-31T00:00:00.000","2022-02-28T00:00:00.000","2022-03-31T00:00:00.000","2022-04-30T00:00:00.000","2022-05-31T00:00:00.000","2022-06-30T00:00:00.000","2022-07-31T00:00:00.000","2022-08-31T00:00:00.000","2022-09-30T00:00:00.000","2022-10-31T00:00:00.000","2022-11-30T00:00:00.000","2022-12-31T00:00:00.000","2023-01-31T00:00:00.000","2023-02-28T00:00:00.000","2023-03-31T00:00:00.000","2023-04-30T00:00:00.000","2023-05-31T00:00:00.000","2023-06-30T00:00:00.000","2023-07-31T00:00:00.000","2023-08-31T00:00:00.000","2023-09-30T00:00:00.000","2023-10-31T00:00:00.000","2023-11-30T00:00:00.000","2023-12-31T00:00:00.000","2024-01-31T00:00:00.000","2024-02-29T00:00:00.000"],"data":[[0.4441088949,0.4498940094,0.4530640584,0.4361700494,0.4701215132,0.4562318634,0.4386214462],[0.4369930694,0.4436883164,0.4339071998,0.4354269629,0.4446109265,0.4293737666,0.4144206717],[0.450514517,0.4586727453,0.4472150218,0.4582382986,0.4660440015,0.4514944604,0.4394482487],[0.4123067011,0.4185750832,0.4105026004,0.4091817511,0.3848756669,0.391089924,0.4167526827],[0.428267606,0.4000667626,0.3919724913,0.412604418,0.4236617486,0.3932465205,0.4059327328],[0.4263720494,0.4405238633,0.4232008577,0.4341799614,0.4510300212,0.4384606575,0.4305430913],[0.4194509249,0.425540011,0.4347568864,0.4347835448,0.4325028626,0.4297405254,0.4188104095],[0.4319317446,0.4279372254,0.4176130741,0.4117945572,0.4254426918,0.4188891591,0.4350570563],[0.4184502312,0.4057115939,0.4315348977,0.418263736,0.4314861557,0.4244188352,0.4043023053],[0.4184844446,0.4031489865,0.4389599325,0.4291589835,0.4345272474,0.40463307,0.3903670495],[0.4444800411,0.4713167927,0.462292218,0.4608005813,0.4788144731,0.444707806,0.4137183887],[0.4430100166,0.4619759334,0.453245617,0.4609600893,0.4861490869,0.4490668603,0.4505710132],[0.4467313672,0.4633664463,0.4403879232,0.4536689351,0.4770189953,0.4287741122,0.425465158],[0.4276046611,0.4044415665,0.4251714897,0.4087269813,0.4270607313,0.414842302,0.4054612288],[0.4541350138,0.478192764,0.4590877928,0.4774705513,0.4998308965,0.4718162092,0.4791096428],[0.4357361318,0.392423258,0.4221952554,0.4181061457,0.4307600384,0.3893849237,0.4519266461],[0.503602957,0.4553622134,0.4833410999,0.4775036646,0.4644109017,0.4499411129,0.4355068777],[0.5422818343,0.481558341,0.4746957922,0.4716390387,0.4723169677,0.4570029569,0.4586893219],[0.8340370787,0.507020412,0.4718135891,0.4701066088,0.4537024229,0.4365271088,0.4620664793],[0.9545454545,0.6279318669,0.575396084,0.5843728599,0.4774047686,0.47716031,0.4975563237],[0.6296998271,0.5279884542,0.5549376521,0.5235337841,0.4722202163,0.4499482473,0.4968154543],[0.4996729032,0.4529685545,0.4808633071,0.4925250902,0.4390236419,0.4274155719,0.5190076475],[0.4897303049,0.5196542013,0.5162874582,0.5042145939,0.5134579811,0.471233543,0.5694060851],[0.4784018604,0.493086827,0.5215776128,0.5164956487,0.5253558103,0.5002107035,0.5517103694],[0.4658298066,0.4400807529,0.4660923086,0.4606684894,0.4797610272,0.4496351494,0.4736305521],[0.46777683,0.4387106799,0.4586801091,0.4416013337,0.4624173288,0.455354264,0.4707975435],[0.5736707626,0.5266379014,0.5446451836,0.5566813548,0.5131226188,0.5101966031,0.6198796612],[0.5602086155,0.5154519703,0.5740792271,0.5821303638,0.5358926047,0.4958195653,0.5849832858],[0.4771645131,0.4705684623,0.5306294044,0.5239058286,0.5742686259,0.500392826,0.5145369454],[0.4851021545,0.4910278358,0.5021513224,0.5172489337,0.5469666389,0.5124727168,0.5062820391],[0.5082215644,0.4579795149,0.4685005727,0.465351581,0.4611718587,0.4694905136,0.4624737869],[0.5367126254,0.5450561275,0.5672532061,0.5611349151,0.5562552542,0.5476990716,0.5656386523],[0.4849514379,0.4877154495,0.5127877401,0.5022111428,0.51962271,0.5006073938,0.5152199269],[0.4920474678,0.5077190695,0.4982066482,0.5122178151,0.5274233469,0.5032480885,0.4900095271],[0.4820898808,0.5094289803,0.5145536661,0.4811254935,0.522288076,0.5229370667,0.539758917],[0.4894510214,0.5206823654,0.5209620092,0.508873121,0.5457241081,0.5076274708,0.4962518979],[0.4941068991,0.4944694797,0.5190269105,0.5082958916,0.5467570629,0.5041651295,0.4991255061],[0.4696928316,0.4819778286,0.4704146451,0.4779800586,0.503186304,0.473017088,0.4645428381],[0.4625630557,0.4948735073,0.4910341147,0.4952359372,0.524214124,0.4744949852,0.4773540077],[0.4639328411,0.4448913853,0.4555856206,0.4738066775,0.478135652,0.4511059333,0.4606571764],[0.5522724366,0.5293198787,0.5507091116,0.58848616,0.5508277457,0.4998379034,0.5389749642],[0.5045754944,0.4951707398,0.5087305278,0.52210474,0.4944437633,0.4758595325,0.4912707161],[0.4611397986,0.4404240187,0.4356158166,0.4318965636,0.4396003762,0.4552029697,0.4421898672],[0.4688338577,0.4756590798,0.5031722978,0.4720832109,0.5066523404,0.4969734749,0.5100406687],[0.4575441609,0.4248458269,0.4780013669,0.4412653255,0.4604875486,0.4604897462,0.4548532567],[0.4734885039,0.4732024405,0.4923867351,0.4768026727,0.4928334357,0.4871085338,0.4465894691],[0.4806091784,0.500505151,0.495977322,0.4741337237,0.4836756403,0.4939079933,0.4617948775],[0.0551384276,0.0475155543,0.0492865569,0.0454545455,0.0481856885,0.0483339184,0.0834813003],[0.4834459792,0.4688552169,0.5156231335,0.4915578269,0.5060788792,0.482490212,0.4922128801],[0.4757601703,0.4542179323,0.4749780758,0.4517807016,0.4983503926,0.4780566195,0.491843782]]},{"columns":["Bangkok Metropolitan Region","Central","Eastern","Western","Northeastern","Northern","Southern"],"index":["2020-01-31T00:00:00.000","2020-02-29T00:00:00.000","2020-03-31T00:00:00.000","2020-04-30T00:00:00.000","2020-05-31T00:00:00.000","2020-06-30T00:00:00.000","2020-07-31T00:00:00.000","2020-08-31T00:00:00.000","2020-09-30T00:00:00.000","2020-10-31T00:00:00.000","2020-11-30T00:00:00.000","2020-12-31T00:00:00.000","2021-01-31T00:00:00.000","2021-02-28T00:00:00.000","2021-03-31T00:00:00.000","2021-04-30T00:00:00.000","2021-05-31T00:00:00.000","2021-06-30T00:00:00.000","2021-07-31T00:00:00.000","2021-08-31T00:00:00.000","2021-09-30T00:00:00.000","2021-10-31T00:00:00.000","2021-11-30T00:00:00.000","2021-12-31T00:00:00.000","2022-01-31T00:00:00.000","2022-02-28T00:00:00.000","2022-03-31T00:00:00.000","2022-04-30T00:00:00.000","2022-05-31T00:00:00.000","2022-06-30T00:00:00.000","2022-07-31T00:00:00.000","2022-08-31T00:00:00.000","2022-09-30T00:00:00.000","2022-10-31T00:00:00.000","2022-11-30T00:00:00.000","2022-12-31T00:00:00.000","2023-01-31T00:00:00.000","2023-02-28T00:00:00.000","2023-03-31T00:00:00.000","2023-04-30T00:00:00.000","2023-05-31T00:00:00.000","2023-06-30T00:00:00.000","2023-07-31T00:00:00.000","2023-08-31T00:00:00.000","2023-09-30T00:00:00.000","2023-10-31T00:00:00.000","2023-11-30T00:00:00.000","2023-12-31T00:00:00.000","2024-01-31T00:00:00.000","2024-02-29T00:00:00.000"],"data":[["7.79%","9.29%","10.1%","5.72%","14.5%","10.9%","6.36%"],["5.94%","7.68%","5.13%","5.53%","7.92%","3.95%","0.07%"],["9.45%","11.6%","8.59%","11.5%","13.5%","9.71%","6.57%"],["-0.48%","1.15%","-0.95%","-1.3%","-7.62%","-6%","0.67%"],["3.67%","-3.67%","-5.77%","-0.41%","2.47%","-5.44%","-2.14%"],["3.17%","6.85%","2.35%","5.2%","9.59%","6.32%","4.26%"],["1.37%","2.96%","5.35%","5.36%","4.77%","4.05%","1.21%"],["4.62%","3.58%","0.9%","-0.62%","2.93%","1.23%","5.43%"],["1.11%","-2.2%","4.52%","1.07%","4.5%","2.67%","-2.57%"],["1.12%","-2.86%","6.45%","3.9%","5.29%","-2.48%","-6.19%"],["7.88%","14.9%","12.5%","12.1%","16.8%","7.94%","-0.12%"],["7.5%","12.4%","10.2%","12.2%","18.7%","9.07%","9.47%"],["8.47%","12.8%","6.82%","10.3%","16.3%","3.8%","2.94%"],["3.49%","-2.53%","2.86%","-1.41%","3.35%","0.18%","-2.26%"],["10.4%","16.6%","11.7%","16.5%","22.3%","15%","16.9%"],["5.61%","-5.65%","2.09%","1.02%","4.31%","-6.44%","9.82%"],["23.3%","10.7%","18%","16.5%","13.1%","9.3%","5.55%"],["33.3%","17.5%","15.7%","14.9%","15.1%","11.1%","11.6%"],["109%","24.1%","15%","14.5%","10.3%","5.81%","12.5%"],["141%","55.6%","41.9%","44.3%","16.4%","16.4%","21.7%"],["56%","29.6%","36.6%","28.4%","15.1%","9.3%","21.5%"],["22.2%","10.1%","17.3%","20.4%","6.46%","3.44%","27.3%"],["19.6%","27.4%","26.6%","23.4%","25.8%","14.8%","40.4%"],["16.7%","20.5%","27.9%","26.6%","28.9%","22.4%","35.8%"],["13.4%","6.74%","13.5%","12.1%","17.1%","9.22%","15.5%"],["13.9%","6.38%","11.6%","7.13%","12.5%","10.7%","14.7%"],["41.5%","29.2%","33.9%","37.1%","25.7%","25%","53.5%"],["38%","26.3%","41.6%","43.7%","31.7%","21.2%","44.4%"],["16.4%","14.7%","30.3%","28.5%","41.6%","22.4%","26.1%"],["18.4%","20%","22.9%","26.8%","34.5%","25.6%","24%"],["24.5%","11.4%","14.1%","13.3%","12.2%","14.4%","12.6%"],["31.9%","34%","39.8%","38.2%","36.9%","34.7%","39.4%"],["18.4%","19.1%","25.6%","22.9%","27.4%","22.5%","26.3%"],["20.3%","24.3%","21.9%","25.5%","29.4%","23.2%","19.7%"],["17.7%","24.8%","26.1%","17.4%","28.1%","28.3%","32.7%"],["19.6%","27.7%","27.8%","24.6%","34.2%","24.3%","21.3%"],["20.8%","20.9%","27.3%","24.5%","34.5%","23.4%","22.1%"],["14.4%","17.6%","14.6%","16.6%","23.1%","15.3%","13.1%"],["12.6%","21%","20%","21.1%","28.6%","15.7%","16.4%"],["12.9%","7.99%","10.8%","15.5%","16.6%","9.6%","12.1%"],["35.9%","29.9%","35.5%","45.3%","35.5%","22.3%","32.5%"],["23.5%","21.1%","24.6%","28.1%","20.9%","16%","20%"],["12.2%","6.83%","5.58%","4.61%","6.61%","10.7%","7.29%"],["14.2%","16%","23.1%","15.1%","24%","21.5%","24.9%"],["11.3%","2.78%","16.6%","7.05%","12%","12%","10.6%"],["15.4%","15.4%","20.3%","16.3%","20.5%","19%","8.43%"],["17.3%","22.4%","21.3%","15.6%","18.1%","20.7%","12.4%"],["-93.4%","-95.3%","-94.9%","-95.9%","-95.2%","-95.1%","-86%"],["18%","14.2%","26.4%","20.1%","23.9%","17.8%","20.3%"],["16%","10.4%","15.8%","9.78%","21.9%","16.6%","20.2%"]]}];
var colours = ["#cc551b", "#ffc200", "#77b251", "#f68e4d", "#26e2fd", "#277ce5", "#bf2c54"];
var legends = ["Bangkok Region", "Central", "Eastern", "Western", "Northeastern", "Northern", "Southern"];
var labels = [""];
2024-03-28T15:11:58.707361
image/svg+xml
Matplotlib v3.8.3, https://matplotlib.org/
*{stroke-linejoin: round; stroke-linecap: butt}