Identify a problem to investigate using data collection and visualization techniques. Provide new insight into the problem and inspire action by your target audience. Dig deep and understand the context of the problem and the people it affects.

Final Deliverables

• A Web-based Dashboard Visualization - We will primarily use Google Charts and alaSQL

• Poster - Summarize key activities and artifacts of your team's process.

• Video -Demonstrate your dashboard and explain the value it provides.

• Public Presentation - A poster session where you will both demonstrate your dashboard and explain your team's process to the public.

Skill Building

Complete the following code tutorials at your own pace at a minimum throughout the project duration. Earlier is better.

• SQL - Kahn Academy SQL

• Spreadsheets - Spreadsheet Tutorials (8-16)​

Copyright and License

Copyright © 2018-2019 Jim Lyst and Michael Frontz, Indiana University School of Informatics and Computing at IUPUI

This material is part of the Computing by Design high school computer science curriculum developed for the Informatics Diversity-Enhanced Workforce (iDEW) program, an award-winning community partnership in central Indiana that is broadening student participation in computing and helping students develop the skills essential for success in the 21st century workplace. The iDEW program is managed by the Indiana University School of Informatics and Computing at IUPUI.

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. You are free to use, share, or adapt this material for non-commercial purposes as long as you provide proper attribution and distribute any copies or adaptations under this same license.

For this exercise you will explore visualizations online and to see the breadth of approaches and domains that visualization is applied. You will then select one visualization to analyze and share it with the class. Let's get some inspiration from Hans Rosling.

Instructions

1. Explore visualizations at sites like flowingdata.com, Information is Beautiful, and fivethirtyeight.com. Look for "information rich" examples that demonstrate a skillful use of visualization to convey some complex data. Do your own internet search for more visualization examples and galleries, like this and this.

2. Choose one visualization to analyze and record the items below in a document. Use this template if you would like.

   • Domain of the Visualization - Health, economy, sports, or employment, etc

   • Designers/Authors of the Visualization - Company and/or Individuals

   • Web Link to the Visualization

   • Stakeholders - Who is the content designed for? And who helped design or fund the content.

   • Conclusions - What direct conclusions can be drawn from the visualization?

   • Value - What is the value? Is it meant to call people to some action? Why will people care?

❏ Deliverable: Your Analysis Document - Be prepared to share what you found most compelling about the visualization and your analysis.

Example

1. Get feedback from two other teams in your class by explaining each concept and getting feedback on each of the following criteria.

   • Do they understand the concept?

   • Do they see the value of the proposed investigation?

   • How much do they seem interested in the topic?

   • What other feedback or ideas did you get?

2. Then, outside of class, ask for 3 people's feedback on each concept using the same criteria. So a team of 3 should get a total of 9 (at least) individuals' feedback outside of class. Try to get quality feedback from each of your target stakeholders. Coordinate with your team who will target each key group.

You can use this template.

❏ Deliverable: Document containing all evaluation results.

Example

Instructions

1. Complete the template build tutorial

2. Implement two chart modifications based on the chart examples, two SQL modifications based on the SQL examples, and one layout modification based on the dashboard layout examples.

❏ Deliverable: A link to your online dashboard.

In this phase you well begin to frame the goals of your team's design by learning about these important aspects.

• stakeholders in your proposed solution

• technology available to you and steps to creating data visualizations

• available data and the larger context of problems to consider

After conducting research, you will develop initial design ideas and compose a clear value proposition that defines what your team will create, for whom, and the value it will bring. Finally, you will present a proposal to your class and the community for feedback, helping you refine your design direction moving into the next project phase.

Design a prototype of the solution for a detailed internal review and evaluation by a sample of stakeholders. Based on what you learn from your prototype, organize a development strategy to methodically collect data, program, and style your solution with efficiency and quality. Also prepare for the promotion and launch of your solution, and conduct unit testing to ensure all is in working order before an in-class demonstration.

Instructions

1. Based on your concept evaluations determine your team's preferred concept.

2. Refine your previous work as needed to be included in your proposal presentation. Ensure that each slide contributes to an explanation of a cohesive story that supports your concept and value proposition. Below is an outline you want in your proposal. Carefully consider how you will tell a convincing story about your team's concept.

   • a title slide

   • your value proposition

   • summary slides (or exemplars) of your teams work

     • Background research

     • Evaluation Results

     • Sketches or Descriptions of Potential Visualization Techniques

A Reminder on Value Propositions Value propositions clearly define key aspects of your proposed design that demonstrate it is a valuable and worthwhile product or service. It provides focus for your work. Here is a template to get you started. For [describe target users] who [describe problem or need], [name of product/service] is a [describe type of product/service] that [describe benefit or value].

​7 TIPS FOR PROPOSALS, PITCHES AND PRESENTATIONS​

❏ Deliverable Your team's proposal as a collection of slides and prepare to present your proposal to class and visitors from industry.

1. Narrow down your team concepts to the top three.

2. Complete the following details for each concept. You can use this template.

   • Description

   • Stakeholders

   • Value

   • Potential Data Collection Methods

   • Initial Ideas and Sketches on Visualization Techniques

❏ Deliverable: Document containing three concepts.

Examples

The quality and validity of your visualization project hinges on collecting good data. You will likely collect data from existing sources and prepare methods of collecting your own data. You will be planning your data collection in parallel with prototyping your team's dashboard. They will co-evolve.

Instructions

1. Download Currently Available Data Locate freely available data that you will (or may) use for your project and download a copy. If it is CSV data, import the data into a spreadsheet and verify the columns are correct. Place any files in your group's online folder.

2. Create Survey(s) for Custom Data Collection If your team needs to collect some of its own data you can create an online survey or ask in person. Either way you will want to create a Google form (or similar) to record results, since responses can automatically generate a spreadsheet of data. Once you create any surveys, test them to ensure that the responses generate the data that you expect. Keep a copy of surveys in your group's folder

3. Optionally, Prepare a Request for Data If you would like to request non-public data from a source that you believe has valuable information, prepare your request and how you will deliver that request. This could be by email, personal request, letter, or other social media. Keep a copy of the text in your group's folder.

4. Evaluate your Survey(s) with Another Team Once any surveys are created, conduct a dry-run with another team. You can do this whether it is intended to be an online survey or interview.

❏ Deliverable

Be prepared to share with your class your data collection plan and be sure to document each items as described above.

Now that you have a clear design target for the data and visualization, it's time to determine a simple plan for development. The following three activities are a good way to divide up tasks and responsibilities.

Instructions

1. Verify your team member roles and responsibilities for development.

• Data Collection - Your team should already have some good data downloaded and you may have surveys ready to go from your earlier planning. You will still want to consider new online searches or surveys as your team learns more during development. A large part of your time will be refining, testing, and executing your surveys. You will want to ensure that all data is in a usable format for programming the visualizations.

• Programming - There are different paths you could take to programming your visualization and you may actually want to mix your methods. For example, you could create static charts in Google sheets and export them as a .png image file and insert them with HTML in your final web page. But for dynamic and custom visualizations, you will want to work in Javascript using the template and code examples as a starting point. Carefully consider your options.

• Design Style and Writing - The style and writing for your visualization should not be taken lightly. Carefully develop a style (colors, fonts, layout, etc.) that is clear, engaging, and reflects the purpose of your work. While you will aim for creating only two or three paragraphs of text as part of your visualization, you want the writing to also be very clear, engaging, and fully reflect the purpose of your work. Do several iterations for improvement. You will also be responsible for the clarity of labels and annotation in your visualizations.

2. Team Planning

Once you have determined who will take what roles, discuss the first steps each team member will take in the development and how you will collaborate along the way.

The building blocks of your visualization dashboard are individual charts and visuals. You will now conceptualize the details for each of these building blocks that will support your proposal and value statement. Begin by describing six or more visual elements that may end up being in your dashboard.

Instructions

Outline the following for at least six potential visual elements (e.g. charts) in your dashboard,. There is no particular order to this outline, because each description co-evolves. Just start with what makes sense for you.

• What type of visual may be used for this element? Precisely describe and sketch the type of visual intended (e.g. bar chart), including what data goes on what axis. Use this resource (starting on slide 4) to guide you in selecting a type of visual. Sketch out each visual with enough detail to help your team discuss and plan design choices. Include axis labels. Take photos of your sketches to document as needed.

• Why is this visual element valuable? Describe how this particular element supports your value statement in your proposal. What important questions does it help answer? You are building a more detailed explanation of your value statement with each visual element.

• What data is needed for this visual element? Describe the data needed to make the visual element, along with appropriate units of measure. You can think of this as the column labels of a data table you will need to create the visual.

• What are the likely sources of your data? List the potential sources of information for each element. Do a thorough internet search for existing sources as needed. Your source may also be a future survey or interviews you conduct.

❏ Deliverable

A document or spreadsheet the outlines the the items above for each potential visual element of the dashboard.

Optional Template

Instructions

1. Prepare Your Evaluation

Use the evaluation template as a starting point to customize your team's evaluation. Rephrase or add questions to the grid you will be asking. Discuss and outline with your team how you will conduct the evaluation with each participant--your evaluation script. For example,

• Introduce yourself and the context of your dashboard project.

• Explain that you are not testing them, but you want to improve your dashboard. Encourage them to think out loud and provide any constructive criticism as well.

• Ask them to review your dashboard and give them an appropriate amount of time before you ask them any questions.

• Use the evaluation grid to ask your primary questions and record feedback you get.

• Thank them for participation.

• After the session, review your notes, rate the primary questions, and add any findings that weren't added during the session.

2. Conduct a Dry Run with Team Members

Not only will this help you prepare for evaluation sessions with others, you can actually use this time to critically evaluate the dashboard yourself.

3. Conduct Evaluations In and Out of Class

Conduct an evaluation with at least 6 other classmates and at least 6 people outside of class. Make sure to find key stakeholders for the topic your team is addressing with your dashboard. Determine how your team will cover the 12 evaluations.

Evaluation Template

❏ Deliverable

Documents summarizing your evaluation findings.

Instructions

1. Prepare Development Review

Once you have finished your data collection and the development of your online visualization, prepare a few slides to present your team's development process for the the following.

• Data Collection Outline the methods of data collection and sources of your data. Be prepared to explain the primary challenges you faced in the process.

• Design and Styling Outline the inspiration, reasoning, and process behind the design and style elements. Be prepared to explain the primary challenges you faced in the process.

• Programming Outline the process used to program the visualization, including methods used to debug problems. Be prepared to explain the primary challenges you faced in the process.

2. Prepare a Demonstration

Practice how your team will demonstrate and explain your visualization to the class. Prepare a few questions to ask the class in order to get feedback and ideas on your visualization.

❏ Deliverable

A presentation and link to your visualization.

Instructions

1. Determine the Content of Your Team's Process Documentation

Documenting your team process is important for two reasons. One, it is an opportunity for your team to reflect on the project process and what you have learned, and two, it provides a great aid for explaining your work to visitors at the final event. At the least, include the following.

• Highlight at least six artifacts that demonstrate key work your team completed in the project process from beginning to end

• Include a refined value statement that pulls it all together.

• Outline the team member responsibilities.

2. Prepare the Process Documentation as a Poster or a Website

Your teacher will instruct you on the form of the documentation. Carefully consider how you will present the information in a logical and easy-to-consume fashion that will help you present your team's work to the public, whether in person or online.

❏ Deliverable

Your documentation in a poster or website format.

Instructions

1. Review and Synthesize Evaluations

As a team, review the results of your evaluations and synthesize the main findings that you find most valuable in identify points of improvement.

2. Compose a List of Improvements to Be Made

Make a list of improvements and order them by priority. Priority can be determined by balancing the net effect it will have on the final dashboard and the effort needed to implement the improvement.

3. Assign tasks to team members, working in parallel as appropriate.

❏ Deliverable

Be prepared to update your teacher and class on your development activities.

Instructions

1. Create at least three prototypes for your team's dashboard

Each prototype can be mixed-media, like the example above, where you use a sketch embedded in a Google document to represent what your dashboard may look like.

Each prototype should contain the same elements your final dashboard will have.

• A title.

• The dashboard visuals. This can be a neatly done sketch or charts created by a digital tool like a spreadsheet.

• A link (fake at the moment) to how you will share your data. Don't worry about including any current data you have.

• A paragraph or two that clearly describes the methods your team used, the value the visualization has to stakeholders, and any conclusions your team can claim from the data analysis. For your prototypes this will simply be a draft description.

• A listing of team members and your school.

• Date.

Style the page as you like, but don't worry too much about style and color. Focus on clarity and content.

2. Determine Feedback Prompts

Before you get feedback on your prototypes, determine how you will prompt participants to give you feedback. This will be a flexible script to ensure you get useful results. Here is a recommended outline to begin the process. Adapt it to your needs.

• Briefly explain the background of your class project to the participant and that you are looking for feedback on your prototype before you begin full development.

• Ask the participant to study your prototype for a moment. Give them some time to look at it. (This is why a clear and legible prototype is important.)

• Ask the participant what they believe the purpose of the visualization would be and what important information might somebody learn from it. Let the participant know that you are not quizzing them, but trying to ensure the design is self-apparent in its purpose. Allow the discussion to go where it leads without taking too much time.

• Ask the participant if they have any other ideas or insights to improve with your project.

• Thank her or him for participating in the evaluation and let them know how they can see your team's final work later.

3. Collect Feedback In and Out of Class

Get feedback from classmates outside of your team to check for any obvious problems, then each team member should get feedback from at least 2 people outside of class on your prototypes. Be prepared to outline and discuss the feedback received.

❏ Deliverables

Document your team's prototypes and the summary of feedback.

Example Prototype

1. As individuals, develop your own set of ideas and concepts that your team will review before selecting a final path. You want to come up with many diverse ideas without worrying too much about details. List at least 5 concepts. For each concept list the likely stakeholders and include 3 links to related concepts, data, or information on the web. you can use.

2. Next, gather your team and provide every member an opportunity to share ideas. It is important that you listen to all ideas and fully consider them.

3. Select the top 6 ideas from the team and compare them based on three criteria. You can use to visualize your concepts.

   • What is the potential level of community impact or value of the idea?

   • What is the team's level of interest in the concept topic?

   • How much access do you have to the needed data/information that you expect your will need?

❏ Deliverable: Documentation of individual concepts and a map of your concept comparisons.

Examples

After confirmation of the solution’s quality, launch and promote the work. Monitor the use of your solution and gather direct feedback from key stakeholders for minor improvements or document recommendations for further development.

Instructions

This is a time to develop a clear narrative to share about your team's work and enjoy sharing it with others in class.

1. Wrap Up Dashboard Development and Prepare to Demonstrate

Make your final adjustments to your dashboard and prepare how you will present your dashboard to the class and describe the key improvements made after the evaluations.

2. Review and Practice Discussion of the Team Process

Finalize your process documentation (site or poster) and practice how you will present and discuss your team process to the class.

3. Present Your Demonstration and Process to Class

End your presentation with a couple questions for the class that may help you refine the delivery of your team's work. For example, you could ask, "Are there any gaps in our process explanation that we should provide more detail?" or "How could we improve the demonstration of our dashboard?"

❏ Deliverable

Share links to your dashboard and process documentation.

Instructions

Take the time to review the project process.

• What went well? What didn't?

• What did you learn about data visualizations?

• What did you learn about collaboration?

• What did you learn about your personal interests in the practice of designing, coding, and data analysis?

• What did you learn about personal responsibility?

❏ Deliverable

A document clearly conveying your personal project experience, learning, and future interests.

Now is the time to refine all the details, review the process your team used to develop your visualization, and plan how you will tell your story to others.

Based on the experience of your latest in-class presentation, plan and practice your team's approach to the public presentation. Be prepared to do the following.

• Explain the topic and value of your team's dashboard.

• Summarize major points in your team's process with the project.

• Sharing the value of each activity leading up to the solution. (Be honest about what went well or didn't.)

• Explain individual contributions and roles in the project, and a reflection of what you learned about collaborating on a team.

• Share your individual perspective on potential careers and how they relate to computing, and include specific pathways you are investigating, like other courses, certification, college, or internships.

Enjoy and celebrate the work you have done!