TIMSS 2011: Comparing Correct Response Rate (UI/UX/D3)

Hey y’all,

I’m not a very visual/artistic person so I’m not too confident with my UI/UX skills. This post is a call for any suggestions to improve the UI/UX for a project I just finished a draft for (my first non-FCC project!!!). Also, for anyone who really enjoys looking at D3 code, any advice on improving my code would be awesome.

The project is an interactive bipartite graph that compares the success rates of two different countries (Chile and USA) for an international test called TIMSS . I’m pretty proud of it because it is the last part of a HUGE dataset I’ve been working on. My to do list for this project is:

  • to add two more rows of nodes (probably for Japan and New Zealand) for a total of four rows of nodes
  • add a toggle/dropdown that allows me to switch out one country for another (this would only be useful if I complete the data for more than four countries)

The project is up on my pen: http://codepen.io/beemyfriend/pen/wgxXJv?editors=0010

The data can be found here: https://raw.githubusercontent.com/beemyfriend/timss_2011/master/timss_nodes_links_2011.json

Any tips, suggestions, or comments would be AWESOME.

Warmly,
bee



A note about my data and d3 choices:

I chose squares instead of circles because the circles would either be too small to see properly or were so big that they’d overlap. Squares can be thin and long while also being visible and easily distinguishable from one another.

I ended up not using D3’s network-graph capabilities because making svg squares and connecting the squares with svg lines seemed easier. Because of this I formatted the data as follows:

Nodes: {
“question” : “M052426”,
“students_per_question” : 827,
“correct_ratio_per_question”: 0.7545,
“correct_ratio_per_question_female” : 0.7361,
“correct_ratio_per_question_male” : 0.7747,
“FIELD_LABL” : "Number Of Goals Of 4 Soccer Teams ",
“content_domain” : “Data And Chance”,
“cognitive_domain” : “Knowing”,
“question_type” : “Multiple Choice”,
“question_rank” : 1,
“diff_male_female” : 0.0386,
“dominant_gender” : “Male”,
“id” : “chl_M052426”,
“country” : “Chile”
}

links:
{
“question” : “M042103”,
“y1” : “Chile”,
“y2” : “USA”,
“x1” : 217,
“x2” : 197
}`

The x axis is the question rank and the y axis is the country so nodes are located at (question_rank, country) and lines start at (question_rank1, country1) and end at (question_rank2, country2)