bathtiles.js

doesn't look like a wall of bathtiles?🛁

about

created by lauren yoo, who developed this after constantly looking at the LeetCode submission tracker during recruitment season and(for some reason) really liked how this particular heatmap looked. bathtiles.js was named after the retro bathroom tiles that the heatmap looks similar to, specifically the mosaic kind.

powered by:

• d3
• Tippy.js

installation

run npm install bathtiles.js in the terminal, or save the bathtiles.js files in your repository.
(if you save bathtiles.js file in the repo locally, then remove the two import lines at the top of the file)

usage

        
            import { Bathtiles } from 'bathtiles.js';
            const target = document.getElementById('heatmap');
            const bathtiles = new Bathtiles();
            bathtiles.load(target);
        
    

documentation

🟩 = new Bathtiles(json = null, mainColors = '#00D26A')

initializes bathtiles with an optional json and mainColors parameters. mainColors will set most 'intense' color and it will automatically create the range in colors.

        
            bathtiles.load(target);
        
    

🟩.load(target)

visualizes and loads the HTML element into bathtiles.

        
            bathtiles.load(target);
        
    

🟩.import(json)

imports a json into bathtiles.

        
            const data = {
                JSON.stringify({
                    '1704067200': 5, // January 1, 2024
                    '1706745600': 3, // February 1, 2024
                    ...
                }),
            };
            bathtiles.import(data);
            bathtiles.load(target);
        
    

🟩.empty()

empties the data in bathtiles.

        
            bathtiles.empty()
            bathtiles.load(target);
        
    

support

If there are any issues, create a new issue in the GitHub issue tracker.

creator

Created by Lauren Yoo in 2024. Updated 10/29/24.