Zunayed Ali Morsalin home about travel notes resume

p2 - Activity tracker

Jul 07, 2017

For this week I’ve created a visualisation using the cal-heatmap library to show my progress over the next year

var cal = new CalHeatMap();
cal.init({
    itemSelector: "#cal-heatmap",
    data: "/tracker_data/2017_cal_data.json",
    domain: "week",
    subDomain: "x_day",
    start: new Date(2017, 2),
    cellSize: 16,
    range: 10,
    legend: [20, 40, 60, 80],
    verticalOrientation: true,
    domainLabelFormat: "%b - %d",
    label: {
        align: "left",
        position: "left",
        width: 70,
    },
    displayLegend: false
});


Cal-heatmap is a wrapper around the d3.js. BACK IN MY DAY I had to handroll d3.js code with it's complicated data binding mechanisms to get something half as functional as what I have here on the right


Flexbox

I didn’t want to add a large front end ui framework so I decided to learn a bit of flexbox to help position things around the site. It didn’t require me to write a stupid amount of css and html so pretty happy with using it going forward.

<style>
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 700px;
}

.flex-item {
    margin: 10px;
}
</style>

<div class="flex-container">
    <div class="flex-item">
        <p>test blah blah</p>
    </div>
    <div class="flex-item">
        <div id="cal-heatmap"></div>
    </div>
</div>