Event Graph
Line chart with event markers & annotations
Line graphs are a foundational tool for visualizing data over time. The problem/opportunity I see with most line graph implementations is the lack of context to show why a graph suddenly spikes or dips.
Simple annotations can help tell the story. If you browse line graphs on social media, you'll likely see annotations. But almost every example is a Photoshopped hack where an arrow and a label help explain a point in time.
Example from a tweet by @GarrettPetersen.
If line graph annotations are so useful, why aren't they thoughtfully baked into designs? Maybe a simple hack gets the job done and people don't feel the need for more sophisticated tools. It's more likely that better tools aren't easily accessible. So we're stuck using the wrong tool for the job.
Let's see if we can find a better solution. I'll start by publishing an MVP of a graph with event markers. Then I'll continue publishing iterations as I think of improvements or get suggestions from readers.
This isn't a typical v1. I've been thinking about this concept for over a decade. I also spent too much time adjusting the colors and labels. As I work on future concepts, I plan to be much scrappier with my v1 designs as I build in public.
Event labels can be toggled on/off by clicking the circle attached to the line. I initially designed this with the intention to show a graph with a lot of events toggled off and only the key events toggled on. But I'm not sure if this is useful. Maybe there is a better way to hide less significant events.
The height of the line connecting an event label to an event marker is adjustable. This is helpful to prevent labels from overlapping.
I don't particularly like the faded graph title. I tried giving it the same color as the line graph but that made it compete visually with the line. I think it should be lower in the visual hierarchy so I gave it bold font with a more subdued color. I'll likely revisit the title in the future.
Event markers are useful for highlighting a point in time but not so useful at showing a time range. I'll likely explore an implementation for time ranges soon.
I often find that X axis labels to be visually noisy. I prefer a minimal approach with progressive disclose when hovering over points in the graph. Currently I don't have an X axis, but hopefully I'm able to introduce a viable solution in a nearish iteration.
The concentric circles marking events on the graph are supposed to mimic an earthquake epicenter. This design element is relatively subtle here but I plan to explore versions where events have a magnitude resulting in larger or smaller circles.
I moved the title to the center and made some typography adjustments to the size and weight. The biggest change is moving away from using a faded white to the same gradient as the line. Initially, I didn't think I'd like this approach because I assumed it would over emphasize the title. But lowering the font weight makes it feel ok.
Omitting labels from the X axis can work when designing highly abstracted spark charts. But I don't think I can get away with the omission in this design.
In the previous version, I used a 'T' shaped line to connect labels with events. In this version, I changed the top line to a dot. I find this to be a little more obvious and I like that it adds a little more color to the graph.
Now the concentric circles representing event markers vary in size. This helps distinguish an important event from a less important event.
I added a semitransparent area connecting to the line graph to designate a range marker. This visualization generally works for me but I need to work on the gradient logic to make the colors more closely align with the graph.
I added a label along with horizontal lines connecting the label to the right and left edges of the range marker. This works in cases where range markers don't compete with X axis labels or other range markers. If it makes sense to create multiple ranges, I might need to figure out an alternative way to add labels.
Getting the right visual hierarchy is tricky. After sitting with the previous design, I felt that the title weight could be slightly increased. I'm mixed.
Seeing the graph with fake data is ok, but I need to test with real data. I'll probably find a real dataset for the next iteration.
