绘制具有宽度尺寸和平滑趋势线的堆叠系列条形

Question

我有一些小数据集，我想在图表上可视化。这些目标是根据日历时间，学习时间和感知复杂性来表示学习曲线。

数据集如下所示：

| Day No | Date       | Hours | Complexity |
| ------ | ---------- | ----- |----------- |
|      1 | 2017-03-07 |     4 |          8 |
|      2 | 2017-03-08 |     6 |          3 |
|      3 | 2017-03-09 |     3 |         10 |
|      4 | 2017-03-13 |     7 |          2 |
|      5 | 2017-03-16 |     4 |          5 |
|      6 | 2017-03-17 |     9 |          8 |
|      7 | 2017-03-20 |     4 |          3 |
|      8 | 2017-03-22 |     4 |          3 |
|      9 | 2017-03-24 |     6 |          6 |
|     10 | 2017-03-25 |     6 |          7 |
|     11 | 2017-03-27 |     7 |          8 |
|     12 | 2017-03-28 |     8 |          8 |

其中

Day No - uninterrupted sequence of days
Date - calendar date some studying took place, can have gaps
Hours - hours spent studying during the day
Complexity - perceived complexity of the material on scale of 1 to 10

在可视化方面，我正在考虑这样的事情（抱歉这是不正常的）：

每个块的高度代表Hours，宽度代表Complexity。水平轴具有代表整天的固定宽度步长。在一天内，块的宽度与Complexity成比例。

示例

图表上的

块A对应于数据集的第3行。对于Hours，它需要100％的宽度，高度为3。

区块B对应第4行，宽度为20％，对应{2}的Complexity和高度7。

趋势线C经过平滑处理，并建立在日开始/累计小时点数上。

水平轴D标有日历日期（跳过间隙）

垂直轴E以小时为单位。为了示例，图片上的标记用于条形高度。实际标记仅用于增加小时数。

标记F未在图表上显示，仅供参考，就像虚线一样。相反，块应根据Complexity值进行颜色编码。

问题

我希望从JSON数据集中在浏览器中绘制图表。我可以创建一个自定义的代码片段，但我想知道是否有一个我可以用它构建的库。在我的搜索尝试中，我找不到一个正是这样做的人。具体来说，可变块宽似乎是异国情调。如果您认为有更好的方法来表示图表上的学习曲线，请同时提供您的建议。