You wouldn’t believe what I just found; a beeswarm chart!
You’ll find excellent beeswarm charts around there on Observable. They’re amazing. This one is pretty simple and shows at what hour you performed on what goal. Each datapoint is a small dot. This way we could’ve seen how we accumulate small dots over time; their color will tell us what sort of work we did.
From there, it’s takes some JavaScript fu to make it show your busiest month: moment(d.updated_at*1000).format('MM')
, week or day of the week.
Also I want to point your attention to two tiny blocks:
viewof showSecret = Inputs.checkbox(["Yes"], {label: "Show secret goals"})
and then: viewof selectedGoals = Inputs.checkbox(goals.filter(goal => showSecret.length === 0 ? !goal.secret : true).map(goal => goal.slug), {label: "Select goal", value: 'commits'})
- I filter non-public goals out by default.
Another one is this utility to convert some text to color: stringToColour
which is the snippet I copied well over 9000 times. It allows you to generate the colour from some random text. stringToColor('duolingo')
.
I still chew on what @philip showed me about cumulative graphs. Thank you Philip for keeping the thread spinning.
I think there’s strong notion of journey (road; yellow thingy road) in founding team somewhere, which is I guess correct mental model to visualize Beeminder data. There’s something precious behind you, and something exciting ahead of you. Successful todo apps (beeminder, things3) are time-oriented, so is beeminder; beeminder takes it to the extreme since each task is assigned a perfect point in time to happen. Hence some sort of timeline would be a good way to visualise the progress. Something like this might work for me:
This could be horizontal or vertical, preferably scrollable or zoomable. There could be squares or triangles if you are circlephobic. This chart takes all (or subset) of your goals, but it is not important; it can be a per-goal chart. Pay attention to the big picture, please (though I posted a small one lol).
I see some cons of this chart:
- how about fractional beeminding?
- canonical chart has lots of nice metadata (polynomial fit etc)
- it works nicer for goals with multiple entries a day; would look pretty sad for my goals (1 thing / day and like 3 things a week)
- rendering corner cases especially with multiple goals where
value
is not interchangeable (1000 lines of code vs 20 duolingo points vs 1 toothbrushing). This could be solved by using color instead of size to express the velocity. Or shrinking the past to make it look more busy. - does not work fine when rendered on small screen (imagine 100x100px chart).
Note that this chart is not much different from canonical chart. We simply make it flat. The velocity is expressed via bubble size, not Y axis (Y axis is gone, I had to put their data somewhere).
However, my chart emphasizes good things ahead of you (yay clean teeth), while default chart makes you scared about the collision with the red line.
It is also a convoluted reply to the most recent blogpost where we’re given heads-up on the red line turning into red staircase. I appreciate the iterative approach we have there, but I wonder if we were to design it from scratch, would it still be the most informative design? What were the other options? I guess you had this discussion before though.