###Abstract I am going to create an explanatory data visualization from PISA dataset using java script, D3.js library and html. This project is connected to the Data Visualization and D3.js course, from Udacity. You can check the visualizations here.
###The data set PISA is a worldwide study developed by the Organisation for Economic Co-operation and Development (OECD) which examines the skills of 15-year-old school students around the world. The study assesses students’ mathematics, science, and reading skills and contains a wealth of information on students’ background, their school and the organisation of education systems. For most countries, the sample is around 5,000 students, but in some countries the number is even higher. In total, the PISA 2012 dataset contains data on 485,490 pupils.
###Summary I expect that the user see that there is some relationship between the time studied out of school and the math score. Also, I would like that people notice that impact of time studied is even bigger when the social status is smaller. I changed my mind several times about what to explore in the PISA dataset even before start to code, as can be seen in the first and second scratch that I have done. Then, after reading different sources, I guessed that would be nice if I compared the data about how long I studied to the Nanodegree and the time that people usually to study at their homes. Iterating over the data, I decided to explore just three variables from the dataset:
- PV1MATH: Math Score. "Plausible value 1 in mathematics"
- ESCS: Social Status. "Index of economic, social and cultural status"
- ST57Q01: "Out-of-School Study Time - Homework I also crossed the countries names with a list of continents that I have found in Wikipedia. To make the visualization lighter, I pre-processed the data using Python and summarized all information that I wanted about almost 500,000 pupils in less than 2,000 lines.
###Design I made four charts to display all information I desired. To help me explain how all of them are connected, I divided the visualization page in tabs with a button "NEXT" and I included some text on each step to keep my narrative clear. The first change I have made based on feedback was the disposition of the dashboard of OECD data. Initially, I organized the charts in two rows with the second row divided into two columns. I have changed to two columns and the second column I divided in two rows. It gave me more space to include the explanations in each step. I adopted a kind of purple to fill all my charts where there weren't information to be encoded as color.
Hours Studied at Udacity I made a basic bar chart with the time I studied until August to the Udacity Nanodegree, grouped by week. I included a hoover behaviour in each bar just to help see where they are in the X axis.
| Variable | Encoding |
|---|---|
| Hours Studied per week | Y |
| Week/Date | X |
Math-score by time studied out-of-school It was the hardest visualization in this project. I made a box plot to display how the Math Score from OECD dataset is distributed over different time studied (per week) buckets. I decided to use a boxplot for this data because there are too much data points in the original dataset and I needed to summarize them.
| Variable | Encoding |
|---|---|
| Hours Studied out of school per week (buckets) | X |
| Math Score | Y |
| Median and whiskers values | labels |
Number of Pupils by Social Status Index I used this chart to show how the dataset is distributed and also to filter out data based on the social index buckets selected. The user can interact with it to explore the information in the other charts.
| Variable | Encoding |
|---|---|
| Number of pupils | Y |
| Index of economic, social and cultural status buckets | X |
Average Math Scores by Country vs. Out-of-School Study Time In this chart, the user can check more information about each datapoint mousing over the chart. I used a scatter plot here to show the relationship between the two variables enconded here.
| Variable | Encoding |
|---|---|
| Hours Studied per week | X |
| Math Score | Y |
| Math Score,Hours Studied, Continent and Countries names | tooltip |
| Continent | Color Hue |
###Feedback The first feedback that I received wasn’t exactly a formal feedback. I was working on the visualization, and my friend looked at my screen and suggested that I should change the disposition of my charts on the screen, even before I explain what I was doing. Then, I tested some different dispositions, and I ended up changing what I was doing.
The second feedback I received was from Charlie, an Udacity coach. She suggested that I could use more specific titles to my visualization to make the message clear when I filter out the data. Also she noticed that the use of colors on scatter plot isn't clear; that I could summarize the buckets in my histogram in a better way; that the footer was overlapping the visualization; and that the scatter plot is too small.
The last feedback received I took personally. Was pointed out that the footer was overlapping the visualization, as Chalie also noticed. Also was noticed that the Y-axis in the first chart wasn’t clear; and suggested that I could use a legend in the scatter plot to explain the colors
I did the following changes based on the last two feedbacks:
- fixed the footer behavior
- make the visualization a little bigger
- exclude the y-axis title in the first chart
- change the explanation in the box-plot on each step to emphasize what was filtered out
- change the buckets in my histogram to text. As the only important information in the numbers is that they are ordered, I changed the titles of each bar;
- add a legend to the scatter plot explaining that the colors are about the continents
###Resources