Improving Physics Education through D3.

js Network Visualizations
Stephanie Friend - Eric White, Sandrine Fischer-White, George Jing

Departments of Physics, Computer Science, and Liberal Arts and Engineering Studies - California Polytechnic State University, San Luis Obispo

Introduction
Introduction

This editable template is in the most common poster size (48

x 36) and
(horizontal);
checkand
withunderstandable
the conference
Useful
dataorientation
is often portrayed
in simple
organizers for to
specific
conferenceanalyze
requirements
regarding
visualizations
help companies
information
such as
exact poster
dimensions.
financial
metrics
or web traffic. However, data visualizations

have
a similar potential to analyze and simplify information
Writing
Style:
when
used
in the educational realm.
The writing style for scientific posters should match the guidelines for your particular research discipline. Use the campus
phiMap
is
a
web
application
that
analyzes
physWriting Style Guide at http://go.illinois.edu/styleguide for
ics
problem
sets
equations
by allowing
general
guidance
withand
academic
titles, names
of campusone
buildings,
correct way
to refer to
the more
campus,
etc. an ento selectthe
specific
chapters
and
from

gineering physics book.

Campus Guidelines
Authors should be aware of and follow the guidelines of the
Institutionaldisplays
Review Board
and the guidelines
for campus
phiMap
relationships
between
concopyright.
cepts, equations, and exercises through useful

visualizations.

In my research, I have created Javascript visualizations for phiMap that serve to simplify the processes of both teaching and learning physics.

Aim
The purpose of these visualizations is to present information about physics problem sets in
an easy-to-understand manner. With these visualizations,
professors
can
improve
the
mateAim
rial
that they present to students, and students

How to
use this template
can
understand
this same material better as
Highlight
this text
and replacephiMap
it with new
textthe
fromvisualizaa Microwell.
When
complete,
and
soft Word document or other text-editing program. The text
tions
have
created
influence
physics
size forthat
bodyIcopy
and
headingscould
and the
typeface has
been
education
Poly
eventually
across
the
set for you. If at
youCal
choose
to and
change
typefaces, use
common
ones such
as Times, Arial, or Helvetica and keep the body text
United
States.

Method
Visualizations
Text
Be
sure to spell check all textVisualizations
and have trusted colleagues
Professor-oriented
proofread the poster. In general, authors should:

Use the active tense

Simplify text by using bullet points
Use colored graphs and charts
Use bold to provide emphasis; avoid capitals and underlining
Avoid long numerical tables

Authors should re-write their paper so that it is suitable for the

brevity of the poster format. Respect your audience. As a
general rule, less is more. Use a generous amount of white
space to separate elements and avoid data overkill. Refer to
Web sites or other sources to provide a more in-depth understanding of the research.

Visualizations were created to aid the professor

in assigning problem sets to students.
The visualization shown above tells the professor if relevant variables to the chapter are
distributed
equally
Captions
set in a serif
style font such as
Times,
18 to 24 size, italic
style.
throughout the problem set. Equal
distribution
is represented not only by the numberDuis
ofautem
times
thedolor
varivel that
eum iriure
in henvulputate velit
molestie
able occurs, but also by whetherdrerit
thein variable
isesse
comconsequat.
monly meant to be solved for (the target variable), given
as a specific value, or hidden (neither of the above). In
this visualization, the nodes represent variables and the
edges connect variables of the same type.

Captions set in a serif style font such

as Times, 18 to 24 size, italic style.
Duis autem vel eum iriure dolor
in hendrerit in vulputate velit esse
molestie consequat.

Student-oriented Visualizations

between 26 and 32 points.

The text boxes and photo boxes may be resized, eliminated,

Technology

or added as necessary. The references to the department,

college CSS,
and university,
including
logo, should
HTML,
Javascript,
D3.js, the
Python,
Djangoremain.
Framework
The phiMap web application was created in Python using the
Django Framewoork. The visualizations were developed in
Javascript using the D3.js Data Driven Documents library.

Design
Network visualizations were chosen because in each
instance, variables are connected to each other through a
relationship. The specific type of network visualization is an
undirected graph with nodes and edges, where the edge
between two nodes does not have a direction. These types of
visualizations are referred to as force graphs in D3.js, due to
their relationship to physical properties to optimize the layout
by repulsive nodes.

Methods

A user evaluation was created to analyze the success of my

visualizations and obtain suggestions on how to improve their
usability. The evaluation contains demographic questions
about the participants as well as quantitative and qualitative
questions about the visualizations. Following the demographic
portion, the evaluation contains two main sections to evaluate
the success of the visualizations created for my senior project.
One section focuses on a visualization meant for professors,
while the other section focuses on two visualizations meant
for students. Two versions of the evaluation were distributed,
each with a different set of visualizations shown first. The evaluation concludes with general questions about how the visualizations could improved as well as possible applications within
physics education. The evaluation was distributed to 2 physics classes and the physics department. 61 participants had
taken the survey at the time of analysis. 3 were professors, 4
were physics majors or minors, and all other participants were
currently in a physics class. 27% had experience with visualizations and 17% had experience with undirected graphs.

Summary of Results
Results from All Participants
Professor-Oriented Visualizations
How easy were How helpful
these visualwould these
izations to un- visualizations
derstand?
be for professors?

Student-Oriented Visualizations
How easy were How helpful
these visual- would these viizations to un- sualizations be
derstand?
for students?

4.7/10

4.8/10

5.5/10

For both sets of visualizations, 40% of users found the

meaning of the lines confusing. 15 - 30% of participants
found other aspects of the graphs as well. This data can
be seen in the bar graphs below.

Professor-oriented Visualizations

Student-oriented Visualizations

Knowledge of directed and undirected groups raised the

mean of how easy it was to understand the visualizations. A difference in the spread of the data can be seen
in the boxplots below. This information predicts that if the
intended user was first taught about undirected graphs,
they would be able to better understand the meaning of
the visualizations.

5.5/10

The averages for my quantitative questions were slightly lower

than I hoped, but each had a standard deviation of around 2.5,
showing that the data was very spread out. When asked for
feedbac, many students asked for an improved key to explain
the visualizations in detail. Participants also thought that an
example problem or more labels and explanations alongside
the visualization would be helpful as well. There seemed to
be the most confusion over the lines in the visualization, with
many suggestions for them to appear more spread out or for
some of them to be removed.

Results from just Physics Majors/Minors

Professor-Oriented Visualizations

Student-Oriented Visualizations

How easy were

these visualizations to understand?

How easy were

these visualizations to understand?

How helpful
would these visualizations be
for students?

Visualizations were also created to help beginning physics student with problem solving skills.

How helpful
would these
visualizations
be for professors?

6/10

7.5/10

6.5/10

7.5/10

In these equations, the nodes represent variables and

the edges represent equations. Each equation is connected to other equations by co-occurring variables,
Captions set in a serif style font such as Times, 18 to 24 size, italic style.
allowing students to visually see how different variables
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
are connected to each other.

It was difficult to compare the results of students compared

to professors due to the low number of participants, and
each professor had varied responses to each question.
However, physics majors rated the application much higher
than engineering physics students.

Conclusion
As technology continues to grow, data visualizations will
become an important educational resource for all fields of
study. The possibilities for influencing physics education
through phiMap are immense due to the variety of important relationships that can be portrayed. My research and
work on the data visualizations will be instrumental in
making sure that phiMap can be as effective as possible.