Enclosure

Enclosure #

~5 min

If you want people to perceive things as being contained together, put a fence around them.

As a species, we are very comfortable with the ideas of containers. We have containers for food, money, people, ideas, etc. Everywhere we look, we are confronted with items designed to hold other items. As such a container—or an enclosure—is something we readily identify.

Consider, for instance, the random collection of objects shown below:

8 yellow circles, all are the same size and are randomly distributed in space. Each contains a number: 24, 93, 12, 31, 17, 77, 41, and 54.

Is there a rhyme or reason in this figure? Is there any particular grouping? Probably as shown, it is hard to decide. However, if we do something as simple as put a shaded area around sets of these objects, it will be clear what we wish to be perceived as associated together, and this will invite the viewer to think about why this might be.

The same figure as above, but now a shaded region has been added that contains the shapes with the number 17, 31, and 41.

Of course, enclosure is not the only way that we can accomplish this linking of objects. In the page on proximity and separation, we saw that we can force people to see groupings of these objects by placing them close together. In the page on alignment we also saw that simply making a spatial connection can do the same. Both of those approaches create this linking without any additional elements added. However, there are times we are not able to change the arrangement of objects on a page (for instance, the $xy$ values of our data), and this is when enclosure becomes an important tool to understand.

Consider photographs. We cannot really just move people around in the photograph. But if we want to indicate that two people are associated with one another, it feels natural to use some sort of outline to group objects together.

A photograph of 6 people. They are standing on a beach on a sunny day. The person on the back left and in the front left are enclosed in a hand drawn elispse.

In the photo above, you probably just assume that the woman in front is in some kind of special relationship with the man behind and to the left. But there is really no reason to assume that, other than the fact that they are connected by this enclosure. In fact, this is an AI generated image, and these are not real people and have no relationship to one another! The story you are telling yourself about these two ‘people’ is all via the suggestive power of enclosure.

Enclosure in data visualizations #

When thinking about how to use enclosure in data visualizations, we can take the same approach as above. Consider if you had a series of points in a scatterplot and you wanted to call out a subset of these points. For instance, maybe you had the median housing price in the USA since 2000, and you wanted to call out the collapse of the housing market around 2008. One way that you could do this is to draw a line around the points.

A scatterplot of the median house price in the USA, from 2000 to 2023. The trend in the data is mostly upwards, with a fairly severe dip between 2008 and 2013. In the scatterplot, these points are enclosed within a rectangle with rounded points and the words “Mortgage Collapse” labels the outside of this rectangle. The rectangle is drawn using the same line width and color that connects the data points

Doing so, makes it clear that you are labeling this data. But the fact that the plot has a line, and the outline is the same, might make it feel cluttered. You can avoid this by using a filled shape instead.

The same plot as above, but now the rectangle does not have an outline, instead it is shaded.

Now, you can see that the area is selected, and it doesn’t feel all that cluttered. Of course, you might also try combining both a fill and an outline, which could make the effect a bit stronger.

The same plot as above, but now the rectangle is both shaded and has an outline.

Another way that you might realize this is to use the same color as the data for the fill, and then ‘invert’ the coloration. This probably produces the strongest effect.

The same plot as above, but now the rectangle is filled with the exact same color as the markers and lines for the data. So, when the data crosses into this rectangle, it now changes from colored to white.

The idea of enclosure could also be used when you want to collect a series of annotations. For instance, imagine you fit an exponential growth to this data, and then wanted to label the model used, the parameters extracted, and the goodness of fit. You could place all of this information next to the line and make them the same color as that line. This will create a plot where the association is clear.

A plot of the median home price in the USA from 2000 to 2023. In addition to the data, there is a line that shows the fit of an equation to the data. The equation was $y = A\cdot\exp(k(x = 2000))+C$ Also shown are the values of the parameters associated with this line: A = 34605, k = 0.0965, C = 204777. Also shown the fit line and parameters are shown in orange, the data is in blue.

But if you wanted to make the grouping even stronger, you could use enclosure to bring all the annotations together, while still employing proximity in both space and color to make sure the association with the fit line is there.

The same plot as above, but now the parameters are given in white, within a rectangle that is filled with the same color orange as the line it labels.

This is an idea that is considered in greater detail in the page on annotations.

Concluding thoughts #

Just like proximity and separation and alignment, enclosure is a great way to wordlessly tell the viewer which objects in your data visualization are connected to one another. So, really pay attention to when and where you might use this tool to help guide the viewer through your visualizations.