chicago_data = FileAttachment("raceethn_acs5_24.geojson").json()
themeColor = {
const p = document.querySelector("p") || document.body;
return getComputedStyle(p).color;
}
{
const width = 400;
const height = 400;
const n = 5;
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height])
.style("display", "block")
.style("margin", "auto");
const features = chicago_data.features;
const values = features.map(d => d.properties.total / d.properties.land_area);
const color = d3.scaleQuantile()
.domain(values)
.range(d3.schemeBlues[n]);
const projection = d3.geoAlbers()
.rotate([87.6, 0])
.center([0, 41.8])
.parallels([41.8, 41.8])
.fitSize([width, height - 80], chicago_data);
const path = d3.geoPath().projection(projection);
svg.append("g")
.selectAll("path")
.data(features)
.join("path")
.attr("fill", d => color(d.properties.total / d.properties.land_area))
.attr("stroke", "white")
.attr("stroke-width", 0.3)
.attr("d", path);
const legendG = svg.append("g")
.attr("transform", `translate(20, ${height - 40})`);
const thresholds = [d3.min(values), ...color.quantiles(), d3.max(values)];
const x = d3.scaleLinear()
.domain([0, color.range().length])
.range([0, width - 40]);
legendG.selectAll("rect")
.data(color.range())
.join("rect")
.attr("height", 8)
.attr("x", (d, i) => x(i))
.attr("width", (d, i) => x(i + 1) - x(i))
.attr("fill", d => d);
legendG.append("text")
.attr("y", -6)
.attr("font-size", "10px")
.attr("font-family", "sans-serif")
.attr("fill", themeColor)
.text("population per km²");
legendG.append("g")
.attr("transform", "translate(0, 8)")
.style("color", themeColor)
.call(d3.axisBottom(x)
.tickValues(d3.range(thresholds.length))
.tickFormat((d, i) => d3.format(".0s")(thresholds[i])))
.call(g => g.select(".domain").remove())
.selectAll("text")
.style("fill", themeColor);
return svg.node();
}Map Design
The process of creating effective maps
Designing a map is rarely a linear process. We often like to imagine it as a tidy recipe where we check off steps: ideation, discussion, drafting, sharing, refinement, production, and finally, usage. In reality, the process is quite messy. You might have an initial idea, discuss it with others, create several drafts, share them, and then find yourself back at the drawing board starting all over again. That’s because a map is often a living document. It’s something that evolves with your motivations and needs over time.
When we design a map, we typically have three overaching concerns: objective, audience, and medium. The following is an example of the map design process.
Objective
Every map begins with an objective. This goal may spark some immediate ideas, but those ideas are likely to change over time. However, throughout the map design process design decisions should be guided by how it impacts a reader’s ability to grasp that central goal.
Questions that come to mind when considering the objective include:
- What is the core message?
- What problem are you solving? How does your map contribute to answering a question?
- Is the map’s scope appropriate? Is the map attempting to do too much? Is the map so busy that the central message is unclear?
- Does our visualization method lend itself to our message? For example, it is often bad practice to present count data in choropleths because of how they often end up reflecting population differences rather than the count of interest.
Ultimately, every element on the page should serve to clarify the data rather. By maintaining this focus, you ensure that the final product remains a functional tool for communication rather than just a collection of geographic points.
Audience
While your objective sets the goal, your audience will likely determine the way we choose to reach it. After all, a map is only as effective as its reader’s ability to interpret it. This necessitates we consider who our intended audience really is.
Considering our audience means thinking about things like:
- How familiar is the audience with the geographic area? If your audience is unfamiliar with the area, you may consider adding a locator map, basemap, labels for areas of interest, or even text explaining why this area is of importance to them.
- Is the visualization we use appropriate for the audience? Consider whether your reader may have seen a similar visualization in the past or if the visualization involves too many variables. The most effective visualization method is often not the same when your audience consists of experts versus when it consists of the general public.
- Do we use terminology that the audience will understand? Consider whether any abbreviations we use well defined and if the map relies on a method the audience is not familiar with, consider adding additional information to contexualize those methods.
- Does our map communicate to the reader our level of authority? Everything from the font size you choose to the amount of white space in your map layout will be judged by your audience as a reflection on your authority on the subject. Consider whether your map inspires a sense of authority in your audience. You can also add logos for your organization or data sources to further convey to the audience your authority on the subject.
In any case, the importance of considering your audience lies in ensuring the map’s complexity, context, and visual language align with the viewer’s needs and environment so that the information is actually accessible and useful.
Medium
A map is never viewed in a vacuum; the physical or digital space it occupies dictates how we design our map. When considering the medium, we may think of things like:
- Where will your map be viewed? Is your map going to be posted on Instagram or on a massive billboard? The typical conventions for a map on social media can be very different than one in print media. Following these conventions reduces the cognitive load on your reader.
- Does your medium allow for interaction? Interactive maps expose a whole host of new options to you as a map maker. Consider if interaction would aid your map’s objectives or if it even suits the medium in which your map will be shown.
- How much time will they spend on your map? If your audience is going to be spending only a few seconds on your map, it is important that your map’s message is instantly clear. The more time your audience spends with your map, the more complexity becomes acceptable.
- Is the map accessible? (Especially important when a map is intended for mass consumption) Consider whether all members of your audience will be able to use and understand your map. Accessibility considerations may include things like whether a map is suitable for people with color vision deficiency, with visual impairment or who speak another language. Check out Minnesota IT Services’s great guidance on map accesssibility.
An example
Consider the objective: “I want to show where people live within Chicago.” A reasonable first attempt might be a choropleth map showing population density.
Upon reviewing this map, we might decide to shift our objective. Perhaps the new goal is to understand the racial and ethnic population distribution across Chicago’s communities. One way to achieve this would be to create several different choropleths, each representing a different demographic group.
However, these maps are difficult to interpret. It is not easy to compare them because they sit on different scales; yet, if we were to force them onto the same scale, we might lose the ability to see internal differences within specific groups. Fundamentally, this approach fails to meet the objective effectively.
Our change map objective necessitates a different kind of map: a dot-density map.
A dot-density map takes the two variables of interest, population density and race/ethnicity, and maps them onto two visual variables: dot frequency and color. This allows us to consolidate several separate maps into one cohesive visual.
This version performs much better at showing the racial and ethnic distribution of Chicago because it reduces the number of maps a reader needs to process. By simplifying the delivery while maintaining the detail, the map finally aligns with our objective.
It’s important that our map adapts to our objective and we encourage you to consider whether each change in your map’s design effectively contributes to the message you seek to communicate to your reader.
Speaking of our reader, its about time we start thinking about them a little more! Let’s say this map’s audience is the US general public. I might immediately start considering whether people outside of Chicago would find this map effective even if they don’t know the city. Adding elements like highways, green spaces, or airports would help contextualize why people don’t live in certain places. Another consideration might be adding text to contextualize why there are such stark differences between various parts of the city. I might even want to consider adding data sources so that another person could refer back to original source of the data.
I see this map as one that someone might spend no more than 10 seconds looking at. So I don’t want to make it too complicated. I will choose to add some contextual text and some data sources like so:
Lastly, let’s consider the medium for this map. We are seeing this map on a website. Websites are inherently interactive mediums. This means we could do things like add links to other websites, pop ups to show additional information, animations to show the movement of communties over times. It also means we should try to adhere to the standards set by the overall website. We should make sure the font we use is similar fonts already used and that the map visualy looks cohesive within its context.
Let’s add a link for interested readers to a website that gives a little bit more history about the racial and ethnic distribution of communities within Chicago!
We could always continue iterating on our map, but hopefully this gave you some ideas for things to think about when you create your next map!