Activity: "When Graphs Mislead Us"

[jugglinmike]

Create a single-user client-side interactive activity as described on the dedicated wiki page

[jugglinmike]

@stevekinney Now that I'm building this out, I have an implementation question. Currently, the controls are specified as follows:

• Units on the Y-axis
  • Granularity: $1,000 increments, $10,000 increments, and so on.
  • Unit Type: Switch percent change versus the previous year instead of raw dollars.
  • The origin of the Y-axis (e.g. start the Y-axis at $1,000,000,000 instead of $0).
• Units on the X-axis
  • Granularity: Single years, decades, etc.
  • Scope: Change from the maximum number of years available to just 2 or 3 years.

I could use some clarification by how the "granularity" controls should operate. Should they simply control the axis labels (i.e. how many "ticks" are displayed)? Or should they serve to "zoom" the graph? In the latter case, we will likely need some way to change the "max" axis values--otherwise, it will not be possible to zoom to any part of the graph.

Alternatively, the interface might be more intuitive if we consolidated the "granularity"/"origin"/"scope" controls:

• Units on the Y-axis
  • Range slider (one range input with two sliders--minimum and maximum values)
  • Unit Type: Switch percent change versus the previous year instead of raw dollars.
• Units on the X-axis
  • Range slider (one range input with two sliders--minimum and maximum values)

...but this modification would not be acceptable if the original parameters were intentionally selected to demonstrate the concept of "granularity". What do you think?

[stevekinney]

@jugglinmike Would it disrupt you too much to switch over to PPF while I forward this to the teachers who wrote the lesson. If they don't get back to us quickly, we can make a judgment call, but I'd love to get their feedback if possible.

(Sidenote: How are we doing on schedule?)

[jugglinmike]

@stevekinney Sounds good. The answer to this question does not block my immediate work, but I will certainly switch over to PPF if I hit a wall. (Just e-mailed you a schedule update.)

[jugglinmike]

@stevekinney I realized that there is a third viable implementation of "granularity":

As described in our notes, the term could also be interpreted as "precision". In that case, a range slider would not be appropriate, and the implementation would be more obvious--a single-value slider that controlled "bucketing" on the input data (i.e. no ambiguity with zooming or access ticks).

This actually yields some misleading visualizations that may be in line with the original exercise. I've recorded a quick video to demonstrate: https://dl.dropboxusercontent.com/u/1948378/wgm.mp4

But of course, it should ultimately fall on the lesson authors to decide which of these makes the most sense. I just wanted to share another option.

[stevekinney]

@jugglinmike I also shared your video with the teachers. Here is what I've gotten back so far. Let me know if it makes sense to you:

Zooming the graph is more important here. Both the max and min values on each axis should be able to be changed. Consider, for example, the ways you can manipulate the graph of the dow here: http://finance.yahoo.com/echarts?s=%5EDJI+Interactive#symbol=%5EDJI;range=1d Here the value of the dow is tracked over time. If the starting point is the max years, you can adjust accordingly the time shown down to 5 yr, 2yr, 1yr, etc and pick which point in time you want this to be. Each time the min and max values on each axis adjust accordingly.

Does that make sense?

I’m teaching this afternoon and tonight, but would have time to talk tomorrow after 11 if that is helpful.

[jugglinmike]

@stevekinney I think I understand. Let's plan to have a quick call tomorrow, but I will proceed for the time being as follows:

name	type	min	max	notes
yUnit	radio	n/a	n/a	two options: "USD $", "% Change in USD"
yGranularityUSD	slider	?	?
yMinimumUSD	slider	?	?	linked to yMaximumUSD via the current value of yGranularityUSD
yMaximumUSD	slider	?	?	linked to yMinimumUSD via the current value of yGranularityUSD
yGranularityPct	slider	?	?
yMinimumPct	slider	?	?	linked to yMaximumPct via the current value of yGranularityPct
yMaximumPct	slider	?	?	linked to yMinimumPct via the current value of yGranularityPct
xGranularity	slider	?	?
xMinimum	slider	?	?	linked to xMaximum via the current value of xGranularity
xMaximum	slider	?	?	linked to xMinimum via the current value of xGranularity

I will make best guesses about the "min" and the "max" variables, keeping them easily configurable so that they can be adjusted later

[stevekinney]

@jugglinmike If you're free after around 11am tomorrow, I think I might be able to get one of the lesson writers on the phone with us. I'll keep you posted.

[jugglinmike]

Okay: I'll be free up until noon (possibly later than that as well, but you never can tell with lunch delivery services around here)

[stevekinney]

@jugglinmike No problem—if we can make it work with the teacher, great. Otherwise you and I will figure it out. My calendar is wide open tomorrow. I'm not sure what time zone Hilary is in, so we'll play it by ear.

(Going to pull you into the loop on the email.)

[jugglinmike]

Quick update: on Friday's call, we clarified the requirements for this activity. There should be a total of four inputs:

• y-axis unit (a radio button between "USD" and "% Change"
• y-axis range (a range slider whose unit is dependent on the former input)
• x-axis range (a range slider)

In #28, I switched the slider implementation to jQuery Mobile. In addition to being generally more robust, that library also offers the "range" slider that we'll need here. Unfortunately, it isn't without its bugs--this one is a little more nuanced, and I'm still investigating it...

[jugglinmike]

This activity landed in master in pull request #31. @stevekinney would you mind taking a look on http://107.170.20.232 ?

[stevekinney]

Okay, I got some feedback from one of the writers. I'm going to try to break it up into digestible pieces and add my two cents.

Hold onto your hats:

Hilary wrote:

We need to make sure the data being used has enough variation over time to be able to find points of stagnancy, rapid increase and decrease. Since we are using a fictitious country, we may need to adjust some of the data to make sure we get it.

If I'm not mistaken, @jugglinmike designed it so we could swap out the dataset pretty easily. As long as this is the case, I think we should push it back to the writers to tweak that dataset to their liking. Is there an easy way to make this intuitive for them? If not, I'll abstract out the data into like a spreadsheet or something and then reformat it when they've taken a pass at it. I'd appreciate any thoughts you or @mzgoddard have, Mike.

Hilary wrote:

As you pretty it up and play with design, what do you think about putting the sliders to control the Y axis on the left side as opposed to below the graph? It may help students see the axis they are adjusting if the adjustment slider is parallel to the axis being adjusted.

Off the top of my head, I don't see why we couldn't do it. Thoughts, @zeejab?

Hilary wrote:

Maybe some additional text guidance can be added to help them see that they can limit one or both of the axes. For example, if they adjust their Y to between $10,000 and $24,000, they should adjust the X axis so that the line doesn’t go off the graph with x values still remaining. In this case, you’d want to constrain the X-axis to a mac of 1971 or so.

I'm going to push back to get them to write this copy.

Hilary wrote:

The Y-axis needs to be labeled real GDP per capita and given in USD.

Is this doable, @jugglinmike?

Hilary wrote:

Can the fields for the minimum and maximum values be labeled as such?

Sure.

Hilary wrote:

Perhaps there could be some “food for thought” questions below the chart that they can see as they are making their adjustments. Examples: When you adjust the minimum and maximum y-axis values, what did it do to the intervals shown on the y-axis? If everything is left the same and you change only the y-axis units, what happens to the graph?

It's obviously on me to get this from them. I'm including it here so @iamjessklein and @zeejab aren't surprised if it shoes up later.

Hilary wrote:

This wasn’t in the specs, I know so feel free to say "No - you should have asked that when we started," but could we have the ability to have the interval change on the x-axis say from decades to years?

What do you think @jugglinmike? At least she understands that it wasn't in the spec.

Hilary wrote:

Could the description and instructions be combined? I think they are pretty self-explanatory and not sure you need to click over from description to instructions and back to description in order to click begin. You asked about text here. Perhaps editing the description to something like: Graphs and charts can easily be adjusted to reflect a specific viewpoint. This can lead to such visualizations sometimes telling only part of a story.

This might be a more general question that I'm going to throw into the universe for everyone to marinate over. @jugglinmike made it pretty modular, so we could do this pretty easily. The bigger question is if there are any other activities where this would be a bad thing.

[jugglinmike]

If I'm not mistaken, @jugglinmike designed it so we could swap out the dataset pretty easily. As long as this is the case, I think we should push it back to the writers to tweak that dataset to their liking. Is there an easy way to make this intuitive for them? If not, I'll abstract out the data into like a spreadsheet or something and then reformat it when they've taken a pass at it. I'd appreciate any thoughts you or @mzgoddard have, Mike.

Yup, you can configure it in that activity's data.js file. It's presence in the git repo will probably make it a little too difficult for the writers to change directly, but formatting and merging it should be pretty trivial for someone with a text editor and git.

As you pretty it up and play with design, what do you think about putting the sliders to control the Y axis on the left side as opposed to below the graph? It may help students see the axis they are adjusting if the adjustment slider is parallel to the axis being adjusted.

Off the top of my head, I don't see why we couldn't do it. Thoughts, @zeejab?

This will require some non-trivial infrastructual change: the jQuery Mobile slider component hasn't been built to support vertical rendering. Finding a widget that is both flexible and robust for desktop and mobile is quite a challenge--you may remember that we initially selected "rangeslider.js" for this task but ultimately had to switch it out for jQuery Mobile's "Slider" component. Fortunately, we've defined clear interfaces for both the "slider" and "rangeslider" components, so if this is something we want to invest time in, we just have a single interface to update.

The Y-axis needs to be labeled real GDP per capita and given in USD.

Is this doable, @jugglinmike?

Sure is. Check out this pull request: #39.

Can the fields for the minimum and maximum values be labeled as such?

Sure.

Also covered in #39.

This wasn’t in the specs, I know so feel free to say "No - you should have asked that when we started," but could we have the ability to have the interval change on the x-axis say from decades to years?

What do you think @jugglinmike? At least she understands that it wasn't in the spec.

I don't think we'll have time to do this, but the code already implements similar functionality for the Y-axis, so it should be a fairly clear guide for someone to pick this up. I've created issue #38 to track this feature and labeled it "Nice to have".

Could the description and instructions be combined? I think they are pretty self-explanatory and not sure you need to click over from description to instructions and back to description in order to click begin. You asked about text here. Perhaps editing the description to something like: Graphs and charts can easily be adjusted to reflect a specific viewpoint. This can lead to such visualizations sometimes telling only part of a story.

This might be a more general question that I'm going to throw into the universe for everyone to marinate over. @jugglinmike made it pretty modular, so we could do this pretty easily. The bigger question is if there are any other activities where this would be a bad thing.

Yeah, the "Description" and "Instruction" distinction was a little arbitrary on our part. It would be pretty easy to accomplish, but I'm with you w/r/t desiring consistency across all the activities. Knowing if this will work across the board will probably be a matter of writing the copy and seeing if it fits.

[stevekinney]

It's presence in the git repo will probably make it a little too difficult for the writers to change directly, but formatting and merging it should be pretty trivial for someone with a text editor and git.

I volunteered to do the translation.

I don't think making a vertical slider is a matter of particular importance. I'll take a look at it in a month or two and implement it if it comes up in field testing or something.

(EDIT: Typos because I haven't had any coffee yet.)

[stevekinney]

Note to self: Followed up with the writer for the updated data on April 9, 2014.