Showcase & Discover Creative Work Sign Up For Free
Hiring Talent? Post a Job


Classroom Seating Habits

  • 2044
  • 56
  • 1
  • Classroom Seating Habits

    This interactive visualization created using d3 and jQuery captures the seating habits of a group of graduate students attending the class 15.514 in the summer of 2011.

    The top of the visualization represents the front of the classroom. Larger circles mean that a student has sat in a seat more often. Right now, the categorical classification is based on fuzzy criteria wherein a "zone" is considered any discernible cluster in any one part of the classroom. This may be a tight cluster in a particular spot or one with a larger spread on a set of rows (e.g. front of the class). Students with fewer than ten observations have been filtered out.

    Hovering over a circle highlights all other ones for the student as well as his or her name.

    Selecting an arbitrary number of students, ideally two to three, and clicking on the play time-series button plays an animated sequence of their distributions throughout the semester. Missing data are shown as faded-out circles. For such cases, the seating position from the previous class is used.

    Send us an email or reply to our blog post, we'd love to hear from you!
  • A video of the visualization in action showing some common use-cases.
  • The time-series data for all students are shown at once.  The animation remains smooth throughout.  Overlaps may be noticed when one student has missing data.
  • The seating habits for two students are compared.
  • The time-series data for the same two students are compared.
  • After starting the time-series player for a student, a static view of his or her seating habits may be displayed too; it is overlayed on top of the other elements.
  • GitHub-inspired buttons decorate the top of the controls pane.  The rest of the pane is made up of students' names, categorized based on their seating habit.  Each category is colored differently, as shown in the vertical bar that stretches the height of each group.  Custom checkboxes ensure that they are rendered the same in all browsers.
  • A script took care of processing the data by collapsing and normalizing them so that they could be fed into the d3 toolkit.  Another script processed the time-series data.
  • The initial capturing of the data was done by adding student names to matrices that represent the spatial layout of the classroom.
  • The actual classroom: 1-390 (source and copyright)