js.pynb

js.pynb

import ipywidgets as widgets
from IPython.display import Javascript

h = widgets.HTML(value='<div id="myref"></div>')


xd = [
{
    'name': 'ID-002',
    'data': d2_x,
},
{
    'name': 'ID-005',
    'data': d5_x,
},    
{
    'name': 'ID-007',
    'data': d7_x,
},    
{
    'name': 'ID-017',
    'data': df17_x,
},        
{
    'name': 'ID-042',
    'data': df42_x,
},        
]


js = """
  let data = (JSON.parse('%(d1)s'));
  function draw(count, pos, ctx) {
    ctx.beginPath();
    let alpha = (count) / 10;
    //alpha = 1
    ctx.strokeStyle = `rgba(0, 0, 0, ${alpha}`;
    ctx.fillStyle = `rgba(0, 0, 0, ${alpha}}`;
    ctx.moveTo(pos, 0);
    ctx.lineTo(pos, 50);
    ctx.stroke();
  };

  function drawlabel(ctx, name) {
    ctx.font = "10px Georgia";
    let ct = 0;
    ctx.fillText(0, 0, 60);
    for (let i = 0; i <= 1440; i += 60) {
      ctx.fillText(ct++, i - 6, 60);
    }
    ctx.font = "20px Georgia";
    ctx.fillText(name, 1440 / 2 - 20, 80);
  }

  for (const v of data) {
    var canv = document.createElement("canvas");
    canv.id = v.name;
    canv.width = 1450;
    canv.height = 150;
    const ctx2 = canv.getContext("2d");
    document.getElementById('myref').appendChild(canv);
    
    drawlabel(ctx2, v.name);
    for (const vv of v.data) {
      draw(vv.count, vv.pos, ctx2);
    }
  }
""" % dict(d1=json.dumps(xd))

display(h)
display(Javascript(js))