Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Practice Data Visualization!
You have completed Practice Data Visualization!
Preview
Welcome back. How did your visualization turn out? Let’s take a look at how I built mine.
Completed Figma File
Vector Shape Resources
Color resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Welcome back.
0:00
How did your visualization turn out?
0:01
Let's take a look at how I built mine.
0:04
My first task was to find a vector
map of the United States,
0:06
which is something I'd
rather not draw by hand.
0:10
I've included a few resources
in the Teacher's Notes for
0:13
finding open source vector
shapes, which can be a great
0:17
time saver when your project
needs a common shape or symbol.
0:20
In my case, I'm duplicating
a Figma file featuring an open
0:24
source United States vector map
by a user named Zach Grosser.
0:29
I'll start with a few changes.
0:34
I'll make my background
off white, and change my states
0:36
to white for now, while
making the stroke thinner.
0:44
I'll also remove Puerto
Rico from my map.
0:53
Puerto Rico is a lovely island, but it's
a United States territory and not a state.
0:56
And I don't have data for
Puerto Rico ready to go.
1:02
Finally, I'll increase
the size of my map a bit.
1:06
Some of the tiniest
states like Delaware and
1:11
Rhode Island will
inevitably be hard to see.
1:14
But hopefully, I can deliver this map in
a large format where users can zoom in.
1:17
For users to be able to understand this
map, we'll need to apply three things.
1:24
A descriptive heading, a key to
understanding what our color values
1:29
represent, and a link
to our source of data.
1:34
For my heading, I want to
choose a somber typeface and
1:37
make sure my messaging
is quickly understood.
1:41
I'll go with 2019 auto
deaths state by state.
1:44
These numbers are calculated
per 100,000 population, but
1:54
I think that information is
best saved for the key.
1:58
Speaking of the key,
2:02
let's decide on an appropriate
range of numbers based on our data.
2:03
Unfortunately, our data isn't
sortable on the IIHS website,
2:08
but I'm going to copy and paste
into a new Google Sheets document.
2:13
Under the View menu,
I'll freeze my header row,
2:18
then short my data based on
deaths per 100,000 population.
2:23
That makes our numbers a bit
easier to read and organize.
2:30
The lowest number of 2019
auto fatalities per 100,000
2:34
population belongs to
Washington DC with 3.3.
2:40
But as DC is not currently a state,
it's not represented on my map.
2:44
The next lowest numbers belong
to New York and Massachusetts,
2:50
both with 4.8 deaths
per 100,000 population.
2:54
The highest number is Wyoming,
2:58
which is the only state with greater
than 25 deaths per 100,000 population.
3:00
Now to create the key for my map.
3:08
Since people often group
numbers mentally by five,
3:12
I think it's appropriate to label
my key using groupings of five.
3:15
Making the less than or
equal to symbol in Figma for
3:20
my box labels is a bit complicated.
3:23
So I'll google that symbol and
just use copy paste.
3:26
When it comes to coloring in my boxes,
it's tempting to use green to represent
4:23
a safer state and red to represent
a state with more frequent auto deaths,
4:29
but Trucker Ted will have trouble
telling those colors apart.
4:34
Since I don't have a client brand guide or
design system to follow on this exercise,
4:38
I'm selecting my colors from
a generator website called Coolors,
4:43
while using caution to choose values
that aren't too similar to one another.
4:47
Once I'm happy with my colors,
I'll add them to my color styles palette.
5:38
Now to apply my color choices to my map.
6:23
This should be an interesting test
of my knowledge of US geography.
6:26
The three states with greater than
20 auto fatalities per 100,000
6:30
population in 2019 are Wyoming,
Mississippi, and New Mexico.
6:35
So I'll select those states and
apply the darkest value.
6:41
There are eight states
within the next range, so
6:49
I'll select them in my Google Sheet
and sort them alphabetically.
6:52
It looks like the American South
has a high auto fatality rate.
7:30
That seems meaningful and
worth investigating further.
7:34
And hey, that's why we visualize data,
right? To help users spot trends.
7:38
I'll continue this technique for
my next few groups of states.
7:43
All right, that looks pretty good.
7:49
Remember how we said California
had the most auto fatalities in
7:51
the nation in 2019?
7:55
Based on this visualization, we can
see that California has significantly
7:57
fewer fatalities per 100,000 population
than many southeastern states,
8:03
as well as western states like
Wyoming and New Mexico.
8:09
Let's include a link to
the source of our data next.
8:13
I'm including the name
of the resource and
8:17
I'll hyperlink that back
to the original article.
8:20
I'll also include the date, since these
statistics were posted March 2021.
8:27
All that's left is to
check the accessibility.
8:46
I only have one artboard here, so
I'll select the map artboard and
8:49
under the Figma menu I'll
choose Plugins and then Stark.
8:54
Since this graphic isn't interactive,
I'm not worried about focus order,
8:58
but let's try out the vision simulator.
9:03
The vision simulator lets me simulate
three types of color blindness for free.
9:06
Protanopia and deuteranopia are two
variants of red green color blindness.
9:11
While tritanopia is a less common
colorblindness making it difficult
9:18
to distinguish blue from green,
purple from red, and yellow from pink.
9:23
It looks like my map remains mostly
legible using all three simulators.
9:29
Though I'm a bit concerned,
my lightest value coloring New York and
9:34
Massachusetts isn't distinct enough.
9:38
I'll make value two a bit
darker to compensate.
9:41
All right, that looks like
a pretty good choropleth map.
10:00
If your solution to this challenge
looked totally different, great.
10:03
There were a lot of different
ways to approach this problem.
10:07
I hope you enjoyed this exercise
in creating a data visualization.
10:10
Keep on practicing.
10:14
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up