Titanic Data Visualization

README.md

Titanic Survival Demographics

by Ajay Das (part of Udacity Data Analyst Nanodegree)

Summary

For my data visualization project I am using the famous "Titanic" dataset which contains demographics and passenger information for 891 passengers out of total 2224 passengers and crew on board the Titanic. The data file contains information such as Passenger class (socio-economic status), Sex, Age, Number of Sibling/Spouse/Parent/Children travelling with them. The purpose of the visualization is primarily explanatory, which aims at displaying the statistics of people who died and survived based on their socio-economic status (First, Second or Third class) and their sex (Male or Female). As can be seen from the visualization, most males and third class passengers did not survive the disaster.

Design

To create the data visualization, I first investigated the data to select the most important features associated with the passengers which had greater impact on their chance of survival. Two of the important features identified are the Passenger class (Pclass) and the Gender (Sex).

As both of these features are categorical, a bar chart is a natural choice for a categorical variable. I selected the stacked bar chart to split each bar into passengers who survived and who died. To differentiate between these groups, I used a color code that naturally represents life (blue) and death (orange/red). The color green was considered for life (also suggested by one of the feedbacks); however blue was selected for the final visualization as it had the added advantage of being color-blind friendly.

After plotting the stacked bar chart individually for the two features, I wanted to create a unified story by combining both of them into a single plot. This was accomplished by using a grouped stacked bar chart. For my first iteration, I used a grouped stacked bar chart which had the passengers first split by passenger class (First, Second, and Third) and each class is further split by sex (Male and Female). This brought out the fact that majority of people who died were males from third class. This bar clearly sticks out in the plot and helps drive the point that males from third class had the most loss of life.

The common feedback was to try percentage or ratio scale for the y-axis which will help the viewer understand the message better and works well with the question that which group has higher chance of survival. I wanted to keep both scales in the same display so that viewers will not have to scroll around. This was achieved by adding buttons on the top-left corner above the y-axis, which when clicked updates the chart with either "Count" or "Percentage" y-axis. This added scale helped highlight the fact that First and Second Class females were the most fortunate with survival rate at 97% and 92%.

The other suggestions were to add summary text on the top of the visual to help the viewer understand the background and the intent of the visual and also add some helpful tips on how to navigate the visualization. To this effect, I have added the key takeaway summary in the title. In the x-axis label I have added information that left bar is male and right bar is female for each passenger class. Also on the axis labels I have added notes on how to navigate and interact with the visualization.

After my first project submission for review, I got the comment that encoding for Gender and class is not well defined and discussed as well as the encoding for survival. As it is the key message in the title of the visualization, it should take a more prominent encoding. It took a while for the reviewer to find out the bars for male and female after hovering the mouse on the bars. This concern was also expressed by some of the previous reviewers which I had thought the note in the label would help.

As encoding of gender was still a concern, I went ahead and created a combined categorical label "SexClass" which adds both gender and passenger class labels together. This helped me to add a stronger positional encoding by drawing bars for each of the gender-class group starting with Females (First, Second and Third) and then Males (First, Second and Third). I did not want to lose the color encoding for survival as the double encoding of bar height and color captures the attention of the viewer faster and draws in to the large loss of life for males in third class when viewed in the "Count" chart type. The ordering of the "SexClass" group also naturally brought out the message in the title that females and upper class (left side of the chart) had better chance at survival. I also changed the default chart to percentage as suggested by the reviewer to support the "survival chance" in the title.

After the second submission, I got some feedback to polish the visualization. I implemented them as suggested by changing the layout and positioning of the buttons and legend and some labels. I also added a descriptive text on the top to introduce the topic and provide summary of the visualization.

Feedback

After I had my first iteration in working condition, I posted it in the Udacity website forum as well as Google+ Udacity group to get feedback from fellow students. I used the questions provided as guidance to ask for specific feedback such as:

1. What do you notice in the visualization?
2. What questions do you have about the data?
3. What relationships do you notice?
4. What do you think is the main takeaway from this visualization?
5. Is there something you don’t understand in the graphic?

After submission of project for review I received feedback from the reviewer which is also added below. After my second submission, I got another feedback to do some finishing touches for polishing up the visualization.

I got the following feedback:

Google+ (Lekhraj Sharma):

What do you notice in the visualization?

Females have survived much better across all classes. Plus higher classes seem to have better survival but it may be become clearer by looking at percentages chart.

What questions do you have about the data?

I am familiar with this dataset.

What relationships do you notice?

Females survived much better than men.

What do you think is the main takeaway from this visualization?

Females survived much better than men.

Is there something you don’t understand in the graphic?

As shared earlier, percentage plot on y-axis may make things clearer especially to see if passengers in higher classes survived better.

Few other suggestions:

• May consider using shade of green for survived due to natural association of green color with survival.
• May want to put your main finding (e.g. females survived better) somewhere in visualization.
• May want to make visualization responsive to window size.

Google+ (Francis Corrigan):

What do you notice in the visualization?

third class passengers generally had a lot more casualties than the first and second class passengers. males in all classes were more likely to die across all classes. Woman in first class had a particularly low die rate. the colors work well with the legend to distinguish survived from died.

What questions do you have about the data?

since we all know this dataset pretty well, I want to know about the age of the passengers. is there a way to bring that variable into the visualization?

What relationships do you notice?

there were more men on the ship in total and over 50% of these men died. there were fewer woman on the ship and less than 50% of these woman died.

What do you think is the main takeaway from this visualization?

don't buy third class tickets if you want to live :) But seriously, the survival rate for third class passengers is much lower than for other classes AND the survival rate for men in general is lower than for woman.

Is there something you don’t understand in the graphic?

I originally opened this on my phone and didn't realize you could hover over the bars to get information on which column is which gender. Maybe you could either A) label that statically in some way or B) write a note to the viewer letting them know they can get more information.

Udacity forum (rkr1017_219823031791):

I can see that females and upper class survived most, but my impression was it takes some effort to figure out which category survived most. Suggestion: use ratios instead of total values. Also, make male/female bars distinguishable by color or pattern, so it would not require hovering to find out which is which.

Udacity forum (Ivailo):

Careful with the ratio (%) scale - it will be percentage of what? Percentage of (men) vs (men+women in the same passenger class) or percentage of (people count in one passenger class) vs (total count of people). Whichever you choose, make sure you label and explain appropriately your % scale. BTW, I find useful having also the absolute counts. To have the best from both worlds, you could add a 2nd y-axis.

Udacity Project Review 1:

Based upon the text below the title ('The females and upper class had better chance at survival'), and what is mentioned in the README, I would say that the visualization does not clearly center enough on the most important findings. Here is why:

It is not initially apparent what the female encoding is. After some exploration, I can see that it is the right most bar in each pair of bars (marginally positional). Because this variable is very important to your finding, it should take a more prominent encoding.

The height of the bars for survival rate, and the color of the bars for survival status, are somewhat of a double-encoding. A viewer can intuitively infer the number of survived or deceased from the height of the percentage bar. This means that you could be using one of those encodings for another important feature 'gender' which at the moment is not very evident.

The initial state of the bar chart depicts count, and so the 'chance' of survival is not immediately apparent.

Therefore I suggest 2 things:

Use color for gender. Have the bars correspond to survival percentage by default.

In my opinion, doing so will really bring together your visualization :)

Udacity Project Review 2:

Now that the findings are clearly in place, we can make some minor adjustments so that the visualization is polished:

• First, I suggest changing the layout of the legends and button so that it is a little more intuitive (please make the legend boxes a little larger than they are in this photoshop-job if you can).
• Second, I would just add a little more introductory text that explains some brief history, the dataset, and the finding (which you already have there). This is similar to the summary in the README file but more concise.
• Third, I would use the term 'Deceased' instead of 'Died'
• Fourth, if you can, make the labels for gender and class a little more separated and complete: 'Female 1st Class' or 'Female_1st_Class' for example.
• Fifth and last (this isn't necessary but would really enhance the visualization as a whole), I would use a slightly more descriptive title. Something like 'Survival Rates in the Titanic Disaster'.

Resources

1. RMS Titanic
2. Titanic Kaggle
3. Dimplejs
4. D3.js
5. Interactive Data Visualization for the Web by Scott Murray

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Titanic Data Visualization</title>
  <meta charset="utf-8">
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="http://dimplejs.org/dist/dimple.v2.0.0.min.js"></script>
  <style type="text/css">
      h2 {
        text-align: center;
        font-family: Georgia;
      }
      h6 {
        text-align: left;
        font-family: courier;
      }
      body {
        width: 80%;
        margin-right: auto;
        margin-left: auto;
      }
      div.stat_buttons {
            position: fixed;
            top: 300px;
            left: 1300px;
        }
      div.stat_buttons div {
            background-color: rgb(251, 201, 127);
            padding: 3px;
            margin: 7px;
            cursor: pointer;
            border: 2px solid rgb(33, 68, 72);
            font-family: Georgia;
        }
  </style>
  <script type="text/javascript">
      function draw(data) {

        //Define the canvas size for the visualization
        "use strict";
        var margin = 75,
            width = 1400 - margin,
            height = 600 - margin;

        //Add title for the visualization with a summary statement
        d3.select("body")
          .append("h2")
          .text("Survival Rates in the Titanic Disaster")
          .append("h6")
          .text("The famous Titanic disaster is considered one of the deadliest in which out of 2,224 passengers more than 1,500 passengers died when the British passenger liner collided with an iceberg and sank in the North Atlantic Ocean in the early morning of 15 April 1912. The data file contains information of a sample of 891 passengers such as Passenger class (socio-economic status), Sex, Age, Number of Sibling/Spouse/Parent/Children travelling with them. The purpose of the visualization is primarily explanatory, which aims at displaying the statistics of people who died and survived based on their socio-economic status (First, Second or Third class) and their gender (Male or Female). As can be seen, mostly the Female passengers with upper class tickets survived and large loss of life happened in the Third Class mostly for Males.");

        var svg = dimple.newSvg("body", width + margin, height + margin);

        //Define chart type (y-axis type) for the initial visualization
        var chartType = "Percentage";

        //Define update function to call when the button is pressed to change y-axis scale
        function chartUpdate(chartType) {

            //Define chart boundary
            var myChart = new dimple.chart(svg, data);
            myChart.width = "70%";
            myChart.height = "70%";

            //Define x-axis variable, title and bar-chart order
            var x = myChart.addCategoryAxis("x", "GenderClass");
            x.addOrderRule("GenderClass");
            x.title = "Gender and Class Groups - (Hover on bars to see details)";

            //Define y-axis scales and title that update when chart is updated by clicking the button
            if(chartType == "Count") {
            var y = myChart.addMeasureAxis("y", "Count");
            y.title = "Number of Passengers (Click button to change)";
            } else if(chartType == "Percentage") {
            var y = myChart.addPctAxis("y", "Count");
            y.title = "Percentage of Passengers (Click button to change)";
            }

            //Define stacked bar chart split using survival status
            var mySeries = myChart.addSeries(["Status"], dimple.plot.bar);
            //Use aggregate function to calculate sum and percentage
            mySeries.aggregate = dimple.aggregateMethod.count;

            //Define legend position and color scheme for bars
            myChart.addLegend(1130, 250, 100, 100, "right");
            myChart.assignColor("Deceased", "rgb(230,85,13)");
            myChart.assignColor("Survived", "rgb(43,140,190)");
            //Draw chart
            myChart.draw(500);
        }

        //Call chart update function for the first plot using "Percentage"
        chartUpdate(chartType);

        //Define y-axis scale options for buttons
        var stat = ["Percentage", "Count"]

        //Define buttons
        var buttons = d3.select("body")
                        .append("div")
                        .attr("class", "stat_buttons")
                        .selectAll("div")
                        .data(stat)
                        .enter()
                        .append("div")
                        .text(function(d) {
                          return d;
                        });

        //Define button click behavior and chart update sequence by first removing the previous plot and then updating with the new plot
        buttons.on("click", function(d) {
            d3.select(".stat_buttons")
              .selectAll("div")
              .transition()
              .duration(500)
              .style("color", "black")
              .style("background", "rgb(251, 201, 127)");

            d3.select(this)
              .transition()
              .duration(500)
              .style("background", "lightBlue")
              .style("color", "white");
            svg.selectAll("*").remove();
            chartUpdate(d);
        })

      }
  </script>
</head>
<body>
  <script type="text/javascript">
      //Load data and call draw function
      d3.csv("titanic_data.csv", draw);
  </script>
</body>
</html>

titanic_data.csv