Vidcode: Map Your Community

Educator Resources

60-90 minutes

JavaScript

STUDENTS: START YOUR HOUR OF CODE TUTORIAL HERE

The Activity

In this Hour of Code, you’ll learn to collect and analyze data for community engagement, by collecting data and visualizing it on a map.

After this Hour of Code tutorial you’ll understand Javascript syntax, how to collect community and social data, how to store data, and how to display it. You’ll have created a map with your own sourced data that you can use to educate your local community! 

Big Idea: Data visualization can help you understand and change your community. Learn about objects to store and display data!

  • CCSS.MATH.PRACTICE.MP1 Make sense of problems and persevere in solving them.

    CCSS.MATH.PRACTICE.MP2 Reason abstractly and quantitatively.

    CCSS.MATH.PRACTICE.MP6 Attend to precision

    CSTA 1B-AP-09 Create programs that use variables to store and modify data.

    CSTA 1B-AP-11 Decompose (break down) problems into smaller, manageable subproblems to facilitate the program development process.

    CSTA 1B-AP-15 Test and debug (identify and fix errors) a program or algorithm to ensure it runs as intended.

    CSTA 1B-AP-17 Describe choices made during program development using code comments, presentations, and demonstrations.

    CSTA 1B-IC-18 Discuss computing technologies that have changed the world, and express how those technologies influence, and are influenced by, cultural practices.

    CSTA 2-AP-11 Create clearly named variables that represent different data types and perform operations on their values.

    CSTA 2-AP-14 Create procedures with parameters to organize code and make it easier to reuse.t goes here


Lesson plan

Time: 90 minutes

  • 10 minutes background

  • 60 minutes coding

  • 10 minutes sharing

  • 10 minutes reflection

Background (10 minutes)

Start by brainstorming problems or issues that affect your community. First, think about the communities you are a part of, then brainstorm problems that impact or occur in your community. The “community” can include their school, neighborhood, city or state — or could center on a group they belong to, such as their soccer team or robotics club.

As you brainstorm problems, ask yourself questions like: Who belongs to the community? What are their problems? How could technology help to solve the problem? Work together to write all of the problems or issues you can think of on the whiteboard (or easel pad).

DISCUSS: What issue do you want your community map app to focus on? How could a map help your community to address the problem? What community data could you include on a map?

For Example:

  • If you’re focusing on animal or environmental issues, you might include the locations of recycling centers or trash bins, parks, high trash areas, etc. 

  • If you’re focusing on youth or education issues, you might include the locations of libraries, schools, community centers, etc. 

  • If you’re focusing on issues related to health or safety, you might include the locations of hospital, clinics, police stations, fire stations, etc. 

  • No matter what issue, you might include the locations of local organizations, community events, or resources that are already working in the community to address the issue. 

Code Challenge (60 minutes)

Students complete as much of the project as they can. If they want to take a break and complete it later they can 'save' the project (at the bottom of the code editor). When they've finished it, or completed as much as they can or want, they can click 'publish', title their work, and then share their project with their friends or family.

Sharing (10 minutes)

Be Prepared to share what you created and share/explain how it worked.

Publish all the projects. Compare the values used for the properties and the arguments used for methods of the graphic objects. Study the data objects that they've created. Have students explain how changes in these values affect the way their map looks.

Reflection (10 minutes)

  • What things did other students create that you'd like to know how to do?

  • What things did you create that you are proud of figuring out?

  • What was surprising or interesting about the data you gathered?

  • What happened when you began creating a data visualization? Were you able to map the location data? Was it easy or challenging to create the interactive map using click events?

  • Looking at the data on your map, what can you learn about your community or the issue? What patterns (if any) do you see? What does your data mean (if anything)?

Community Map_final_1.png

Sign up to our Hour of Code Newsletter for additional resources and updates!