Recipe: Habit Heatmap
Visualize daily habit completion as a calendar heatmap.
The Result
A heatmap showing habit completion intensity across days.
Basic Heatmap
markdown
```dg
type: heatmap
data:
source: '[
{"week": "W1", "day": "Mon", "completed": 3},
{"week": "W1", "day": "Tue", "completed": 5},
{"week": "W1", "day": "Wed", "completed": 4},
{"week": "W1", "day": "Thu", "completed": 2},
{"week": "W1", "day": "Fri", "completed": 5},
{"week": "W1", "day": "Sat", "completed": 3},
{"week": "W1", "day": "Sun", "completed": 1},
{"week": "W2", "day": "Mon", "completed": 4},
{"week": "W2", "day": "Tue", "completed": 5},
{"week": "W2", "day": "Wed", "completed": 5},
{"week": "W2", "day": "Thu", "completed": 3},
{"week": "W2", "day": "Fri", "completed": 4},
{"week": "W2", "day": "Sat", "completed": 2},
{"week": "W2", "day": "Sun", "completed": 2}
]'
x: day
y: week
color: completed
title: Weekly Habit Tracker
```From Daily Notes
If you track habits in daily notes with frontmatter:
yaml
---
date: 2024-01-15
habits:
exercise: true
reading: true
meditation: false
journaling: true
---Create a dataview-style query:
markdown
```dg
type: heatmap
data:
query: from:Daily where:date:2024-01
transformations:
- type: derive
configuration:
day: "new Date(date).getDay()"
week: "Math.ceil(new Date(date).getDate() / 7)"
score: "habits.exercise + habits.reading + habits.meditation + habits.journaling"
x: day
y: week
color: score
title: January Habits
```Customizations
Green color scale (GitHub style):
yaml
colorScheme: "greens"Show values in cells:
yaml
showValues: trueCustom color range:
yaml
scales:
color:
domain: [0, 5]
range: ["#eee", "#22c55e"]Reverse order (newest on top):
yaml
scales:
y:
reverse: truePro Tip
Combine with a summary bar chart:
markdown
```dg
type: bar
data:
file: data/habits.csv
transformations:
- type: aggregate
configuration:
groupBy: ["habit"]
sum: ["completed"]
x: habit
y: completed_sum
title: Total Completions by Habit
```