[Userscript] Wanikani Heatmap


Ah! Oki! =D
Probably my resets bugging it up :rofl:
I’ll let you know later today when I do some more lessons =)


Oh, and reset your data before doing lessons, because otherwise it will still think you’re finished with all lessons


Updated, then reset. Will let you know when I do lessons later =)


It worked! Now it updates properly without having to re-fetch =)


Thanks for developing this userscript.

Have you tried to display a heatmap of the number of reviews per item? It may show that kanjis are getting harder to master, and the number of reviews per item is increasing exponentially, as we progress to higher levels.


I usually find vocab to be the hardest. Especially those weird ones putting two kanjis together to make a third completely unrelated meaning with a utterly messed up reading to boot O_o
or just generally the “oh, this reading is exceptional, you just have to learn it”… thank…you… (luckily not too many of those, but there are a few “if you already know this word”, nope, I didn’t… XD


You should have it already; I sent a 2nd e-mail on the 8th.


Oh, I only got the one

Anyway, I think I found the issue. Both the issue with longest streak not being correct (due to DST of course), and the current streak not updating correctly.

Also added a tooltip that displays the date your longest streak ended.


When I change the colors from the settings they’re not applied to the heatmap, I didn’t try all the settings but most of them work fine except for the colors
probably not a big deal since no one seems to have noticed until now, but thought you should know anyway


You need to tick “custom colors” in general to apply the color settings. I did it that way so it will alway be easy to go back to default



Your e-mail probably blocked it because it looked like nothing but a string of nonsense :stuck_out_tongue:

It’s working now though. Thanks :slight_smile:


What did your streak end up being?


Oh wow that’s embarrassing…
Don’t you think a “reset default” button would be a more user-friendly way of doing that? You can reset all settings not just colors that way. Besides, other people might get confused like me and think the colors are broken


It now says 321, starting from August 4th. The tooltip says the streak ended on June 23rd though, which is actually when I started back up.

(June 21st was my first day of no reviews since WK began tracking reveiws.)


I thought about that, but I like that you can keep the custom colors saved when going back to default




@Kumirei I would love to see when “level ups” happened. Is it possible to add a cross or something to the boxes on the days when I leveled up?


I was planing to ask the very same thing! :rofl:

Either a mark, or if possible, the actual level we became (might be too hard)


Something like this? I can add levels and such as as hover-tooltips. I can also add resets, if you’d like.



Notes for self, because it's a bit tricky to overlay an element right on the correct day
var level_up_date = "July 23, 2018";
var year = 2018;
var level = 42;

var title_elem;
$('.reviews_heatmaps title').each((i, e)=>{if (e.innerHTML.includes(level_up_date)) title_elem = e;});
var day_elem = title_elem.previousElementSibling;
var month_elem = $(day_elem).closest('.graph-domain')[0];
var year_elem = $(month_elem).closest('.cal-heatmap-container')[0];

var year_width = year_elem.attributes.width.value;
var month_x = month_elem.attributes.x.value;
var day_x = day_elem.attributes.x.value;
var day_y = day_elem.attributes.y.value;

var level_up_x = month_x + day_x - 1;
var level_up_y = 25 + day_y - 1;
var level_up_elem = $('#level_'+level)[0];
var level_ups_elem = $('#heatmap'+year+' .level_ups')[0];

level_up_elem.style.left = level_up_x;
level_up_elem.style.top = level_up_y;
level_ups_elem.style.width = year_width;
<section class="heatmaps">
    <div class="buttons">...</div>
    <div class="reviews_heatmaps heatmaps">
        <div class="stats">...</div>
        <div class="charts">
            <div id="heatmap2019">...</div>
            <div id="heatmap2018>
                <div class="year">2018</div>
                <div class="chart">
                    <div class="level_ups">
                        <div class="level_up" id="level_42"></div>
            <div id="heatmap2017">...</div>
            <div class="footer total_reviews">...</div>
    <div class="lessons_heatmaps heatmaps hidden">...</div>
.level_ups {
    position: relative;
    height: 100%;
    margin: auto;

.level_up {
    position: absolute;
    width: 8px;
    height: 8px;
    border: 2px solid [optional color];
    border-radius: 4px;


If you don’t mind the level-up highlight being relatively basic, you can forego adding an overlay, and just use the following CSS:

.heatmaps rect.levelup {outline: 2px solid red;}