Visualizing the LGBTQ community size, their protecting legislation in law, and discrimination rate

2020 has been a difficult and ugly year so far. However, just last Monday (June 15th, 2020), the supreme court ruled that federal rights law should protect all LGBTQ workers in the labor force nationwide, a ruling that will finally extend protections to all LGBTQ members against discrimination in the workplace. As a member of the LGBTQ community, this sure is good news for me in a dark time like this. This got me thinking about a project I did couple of months ago for my visualization design class where my teammates and I tried to visualize the LGBTQ communities in the labor force, their protections by law, and the discrimination charges in each state. I thought now might be a good time to share the design process I went through and give the final graphic a facelift at the same time.

As a part of the LGBTQ community and an international student, now a non-immigrant worker, I fully understand the anxiety that comes with moving to a new place and the fear of being discriminated by the people you newly met. I wanted to make a visualization that is informative and helpful for people in the community that are migrating from other countries to the USA or members who are moving to other states within the USA.


To start the design process, my teammates and I talked to a couple of LGBTQ members who are either living in the USA or out of the states with the possibility of moving to the states. We asked them about factors they considered important to them while moving anywhere across a locality, region, state, or country under the umbrella of the LGBTQ topics. Based on the responses we collected, we learned that people care about
1. The size of the community in a particular state

2. The number of reported incidents of discrimination

3. current laws of the land in a particular state.

Legislation to protect us against discrimination is important because it sets a standard and understanding of right, wrong, and equality.

There are other factors mentioned such as the wellbeing or mental status of the members, however, due to the difficulty of actually acquiring the data, we decided to keep it simple and work with the data we have easy access to and concluded three main questions we wanted to answer for our visualization’s potential viewers:

1. Which states would be more friendly for LGBTQ members to move to?

2. Which states protect LGBTQ communities in the labor force from discrimination?

3. Which states have less discrimination towards LGBTQ communities in the workplace?


Once the target audience and questions we wanted our visualization to answer, we move forward to listing out the data and their structure we are presenting. To answer those questions, we decided we would be working with the following data below:

1. The LGBTQ community size of each state

2. Whether or not the state has statute legislated to protect the members in the labor force — nominal data

3. The sex type discrimination charges of each state

The main goals for all three data are to provide clear comparisons for the viewers so that they could identify which states might be the better choices for them. In order to avoid any biases and unfairness as much as we can, merely visualizing the data above and respectively is not enough.

LGBTQ community size

Considering the base of the population for each state is going affect the actual LGBTQ community size, and that merely comparing the actual community sizes is extremely misleading, and hence, in my final version of the design, I decided to present the rate of LGBTQ community members within each state’s entire labor force. In order to do that, I also went and retrieved the estimated labor force size for each state from the United States Census Bureau. This is a change I didn’t make until my own final iteration.

LGBTQ Community Size Rate in the Labor force = Estimated LGBTQ Community size in the Labor force / Estimated Labor Force Size

Discrimination charges

Similar to the LGBTQ community size, comparing the actual charge count is misleading and bias. So, we decided to present the rate of charge by dividing the sex type charge count with the community size count. In other words, the rate can be interpreted as how many percentages of the member in the LGBTQ community filed sex type discrimination.

Sex Type Discrimination Charge Rate = Filed Sex Type Discrimination Charge Count / Estimated LGBTQ Community size in the Labor force

Visual Encoding Design

First Iteration


As the general goal for the visualization is to help viewers who are possibly deciding a location for their next move, we believed to incorporate the position of each state could be helpful on top of other main presenting data. We opted for a Grid Cartogram type of map inspired by Sylvian Lesage. A grid cartogram is used instead of traditional map style cartography in order to fairly represent demographic data (read more here ).

Volume v.s. Color

In order to visualize the comparisons of both the community size and discrimination charge, we debated back and forth between using grid size differences and color gradients. In our first trial, we tried to maximize the data-ink ratio and combined both the two data on top of the existence of legislation all together in one single cartogram with utilizing:

  1. Grid size differences: To visualize the comparisons of the LGBTQ community size differences
  2. Color saturation (Gradient): To visualize the comparisons of charge count
  3. Color hue: To visualize the nominal data of whether a state has protecting legislation or not.
Version 1 of the visualization. The link is above to view the live web version.

User testing

With the first version visualization, we ran some user testing on the design. You can imagine the feedback we gather indicated the design needed many improvements.

  1. Exclusive and unfriendly color choices:
    One plain overlook we managed to miss is how the red and green color selection can pose extreme usability issues for viewers of visual impairments.
  2. Confusing saturation system:
    We designed the gradient for red and green having a completely reversed system and the viewers are plentily confused by it.
  3. Grid pixel too small:
    Some of the states with the smallest community sizes turned out to have way too small pixels to be noticed easily.
  4. State position confusing:
    Viewers expressed that the grid of each state ended up scattered across the graph gave them a hard time identifying the visualization is actually a map.

Second Iteration

With the feedback, we decided not to force the data-ink ratio and separated the two comparisons, community size, and discrimination charge, into two different graphs to avoid overcomplicating the visualization with cartography focusing on the community size comparison and a bar chart to visualize the discrimination rate comparison.


We kept the cartography element in the design for comparing community sizes with an added layer of the outline of the Unites States underneath the grid cartogram to provide some clarity on the geographical positions.


We retain the use of size difference to visualize the community sizes while adding the abbreviation of each state to help make the states with the smallest pixels more visible.

As mentioned above, we separated the discrimination rate from the cartography and singled it out into a bar chart to visualize the comparisons of each state’s discrimination rate.


We abandoned the use of red/green and the saturation encoding to opt for even saturation of grey and white to visualize whether or not a state has legislation.

Version 2 of the visualization. Community size graph. The link is above to view the live web version.
Version 2 of the visualization. Discrimination rate graph. The link is above to view the live web version.

Third Iteration

With version 2 completed, the team project called an end. However, after I saw the latest news, I thought it was high time to give the visualization a facelift. I was not a big fan of the monotonous use of grey and white as well as the long scroll of 51 stacks bar chart. I believe the visualization could be more visually appealing and more user-friendly.


As mentioned earlier, I adjusted some of the data based on my observation and interpretation. Aside from changing the estimated actual community size to the rate of community size, another change I made was to swap out the charge count from 2015–2017 aggregated number to only 2019’s number. My reasoning is that I believe the immediacy of the data is extremely important. According to the U.S. Bureau of Labor Statistics, the growth of the labor force is really small. The projection from 2018–2028 is merely an annual 0.8% growth. Based on this statistic, my assumption is that the differences between the LGBTQ community size in the labor force in 2017 and 2019 are small enough to be ignored. In order to retain the immediacy of the visualization, I decided to use only 2019’s discrimination count under the assumption that the community size in the labor force does not change much.

Visual Encoding Design

The final version visualization live prototype.

Community Size rate

Color saturation vs volume
I ultimately decided to visualize the comparison with a color gradient. The grid size difference design was a good idea. However, it does not execute well when visualizing the too wide range of the actual community size and the too little differences in the community size rate. With gradient, the differences can still be easily spotted while not making the graph too messy.

Discrimination rate

For the discrimination rate, I switch from the bar chart back to a gird cartogram but kept the decision of visualizing the two data in separate graphs. The bar chart was simply too long if I want to keep all 51 states and I do not have a valid reason to only show a selective group of states.

Color saturation v.s. volume
I opted for a color saturation gradient to visualize the discrimination rate comparison for similar reasons as the community size comparison.

Existence of Legislation

Icon vs color hue
I decided to use an icon to symbolize states that have protecting legislation instead of different colors. This is a needed adaption to the use of color saturation for the comparison, and the icon works just fine in helping the viewers identifying whether a state has legislation.

With all the changes implemented, I made the visualization with Figma due to time constraints and my own limited d3 proficiency. I opt for Figma instead of XD since the hover/roll-over effect in XD does not allow the tooltips interaction I needed for this visualization.

From my final visualization, we can kind of see that states that do not have protecting legislation do tend to have smaller community rates and higher discrimination charge rate. I hope after the most recent supreme court landmark ruling, we will be able to see an increase in purple saturation and a decrease in the orange saturation.

The final version of the visualization. The link is above to view the live prototype version.


The analysis in this project utilizes data sourced from:

UCLA School of Law Williams Institute:
For the number of LGBTQ people in the labor force that are protected and unprotected by their state laws, from which their data were collected from Gallup Daily Tracking Survey and Movement Advance Project

United States Census Bureau
For the number of people in the labor force
For the top two industries in each state, which derived from the
U.S. Bureau of Economic Analysis (BEA)’s data

U.S. Equal Employment Opportunity Commission (EEOC)
For the number of filed discrimination charges under sex type in the labor force




Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

A Framework For Designing Sustainable Culture

6 Tools to Build a UI/UX Design Portfolio

Animations using Flare , Rive

Elements of Art


But who the hell is writing the texts? — Z1 Blog

An illustration of an ux writer

Controversies around alternative diet motivations and benefits


Navigation Redesign Concept for the Brooklyn Public Library

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Aimée Wu

Aimée Wu

More from Medium

The Music Reclamation Project

This Student Is Bad. She’s Likely to Be Expelled.

It was a beautiful morning.

Xuzhou Female Trafficking