We chose a horizontal bar plot to display the distribution of college majors since the data is categorical. We decided to use a horizontal bar as the marker, as opposed to a vertical bar, since we wanted to be able to see the entire bar for each major without having to scroll, while also maximizing the space on the page. Also, using a horizontal bar chart allows us to avoid implying any chronological or ordinal trend within the college major categories. In addition, we used stacked bars to visualize the distribution of groups within each demographic. Other options we considered include: paired/side-by-side bars and overlaid bars. However, since the number of people in each major is a sum of the number of people in each subgroup, it was appropriate to use a stacked bar plot. We used discrete color palettes for gender and race breakdown since they are nominal variables. Since age group is an ordinal variable, we used a continuous color scale. We kept certain colors (the red and blue colors in the gender plot) the same between each display in order to keep a sense of cohesiveness but not overtly to imply any connections between the different demographic subgroups. The colors were also chosen intentionally: red and blue for gender, and random colors that are not directly associated with skin colors for race. A legend was added to each plot to show which color corresponds to which subgroup.
We originally wanted to include both median salary information and the distribution of the number of people within each subgroup of a demographic for each major from the dataset. However, we decided to narrow down the scope of the visualization and focus only on the breakdown of people within each subgroup of demographics. For the interaction, we focused on the demographics of gender, race, and age, creating interactive buttons to switch between the different demographics. The boldness of the buttons change when being hovered over and the background color of the button changes when selected, which effectively indicates which demographic the viewer is looking at. Originally, we wanted to implement transitions between when clicking the demographic buttons, however, we felt that doing so would possibly mislead the viewer into thinking that certain subgroups between demographics were related in any way. In addition to the buttons, we also included tooltips when hovering over each bar. The tooltip allows us to show the major names as well as the explicit numerical breakdowns of each subgroup along with the percentages. Since there are a large number of college majors, the viewer must scroll vertically in order to view all the majors and the x-axis; the tooltip compensates for this by directly showing both the category and the value in a single place. We also changed the color of the bars when being hovered over, which makes it easier to see which bar is selected.
Our development process was split equally between each member and we worked synchronously throughout the project. Over the course of a week and a half, we spent a total of 20 hours developing the webpage. The first obstacle was loading the data using d3; we were unsure of the correct syntax to use in order to read in our csv files. Secondly, it took us a while to become familiar with the different methods of d3 that we needed to create our visualization. Namely, it was slightly tricky for us to figure out how to create stacked bars using nested for loops, and we ended up spending a significant amount of time on this aspect. Another aspect that was very time consuming was figuring out the coordinates and margin/padding values when positioning the plot on the webpage.