Date: Fri, 29 Mar 2024 01:55:07 -0500 (CDT) Message-ID: <1028851892.1516.1711695307163@wiki.ncsa.illinois.edu> Subject: Exported From Confluence MIME-Version: 1.0 Content-Type: multipart/related; boundary="----=_Part_1515_1012810562.1711695307162" ------=_Part_1515_1012810562.1711695307162 Content-Type: text/html; charset=UTF-8 Content-Transfer-Encoding: quoted-printable Content-Location: file:///C:/exported.html
GEOG 319/658 &nbs= p; &= nbsp; &nbs= p; Exercise #10 = &nb= sp; = &nb= sp; FALL 2014
Creating an Animation = of Historical U.S. City Population Data
Due: Monday, December = 5
In this exercise you will be creating an= animated map of the population of 196 U.S. cities for the years 1790-1990 = at ten-year intervals. As discussed in class, the data for this exercise we= re originally used in the program MapTime and thus were initially available= as the csv file Animation_Data.csv. You should download this file from Bla= ckboard and examine its contents in Excel.
To utilize this file, we have modified i= t as follows:
1. Converted the csv file to a shapefile.
2. Unprojected the shapefile to WGS84.
3. Converted the resulting shapefile to a JSON file.
The resulting JSON file is called CityPo= pulationSeries.json and should be downloaded from Blackboard. Open this fil= e in Notepad++ and examine its contents.
We are providing a skeleton html file th= at you will be modifying to create the final html file for the map animatio= n. The skeleton file is known as CityPop_Animation_Skeleton.html and can be= downloaded from Blackboard.
Also be sure that you have available the= jquery = -1.7.1.min.js file that we= =E2=80=99ve been working with in some of the recent exercises.
The following is a summary of the steps = that you will need to complete in order to modify the skeleton and create a= complete map animation of the city population data. You will see associate= d numbers and asterisks in the skeleton file. Replace the numbers and aster= isks with the appropriate documentation or computer code.
(1) ***
At the beginning of the program, indicat= e the following:
1. The input used for the program (i.e., the location and = population data that are stored in the JSON file).
2. The nature of the map animation that is produced.
3. Any interactions that the user makes with the map.
(2) ***
In the =E2=80=9Cyear_panel=E2=80=9D sect= ion of the =E2=80=9Cstyle=E2=80=9D section, experiment with positioning the= year identifier for each frame of the map animation. You will need to repl= ace ??? with an appropriate number of pixels. You may also wish to experime= nt with other parameters here and in the =E2=80=9Cpanel=E2=80=9D for the st= art and stop animation buttons, which appears just after the =E2=80=9Cyear_= panel=E2=80=9D.
(3)***
Study the global variables as these will= be used at various places in the program.
(4)***
Include two functions here, one called F= indMaxValue that will find the maximum value of the elements of an array, a= nd another called CircleRadius that determines the radius of a circle given= a data value, the maximum data value, and the maximum desired radius. You = should be able to use functions from exercise 7D.
(5)***
Note that we have included an =E2=80=9Ci= nitialize=E2=80=9D function that is very similar in structure to the initia= lize function from earlier exercises.
(6)***
This is followed by the CreateCityCircle= s function, which does a variety of things, including accessing the populat= ion data stored in the JSON file, finding the largest data value for all ci= ties over all time periods, creates all circles for all time periods, and c= reates the first frame of the animation. We provide some code here and ask = you to write some of the code.
(6a)***
Create a loop that will= populate the cityLoc array with latLng objects representing the locations = of the cities. You code should read the JSON file and obtain each city=E2= =80=99s latitude and longitude and add a latLng object to the array.
(6b)***
In the section beginnin= g =E2=80=9CFind the max population=E2=80=A6=E2=80=9D, note that =E2=80=9Cye= arlyMax=E2=80=9D is an array that stores the maximum population value for e= ach year. For (6b)***, you need to use the FindMaxValue function to determi= ne the maximum population for a year and then store this result in the =E2= =80=9CyearlyMax=E2=80=9D array.
(6c)***
Again= use the FindMaxValue function to determine the maximum population value fo= r all the years. Store this result in a variable called maxPop.
(6d)***
Specify the radius for the largest= circle on your map. You could start with 150000, but you probably will wan= t to modify this.
&nbs= p;
(6e)***
Study the section of the code foll= owing the specification of the radius. To create all circles for the curren= t year, you will create computer code corresponding to the following pseudo= code:
&nbs= p;
For each city
If the population of the city > 0= then
Determine the radius for this city
Create a circle for this city and use= the Array object=E2=80=99s =E2=80=9Cpush=E2=80=9D method to add
the resultin= g circle to the cityPopCirs array.
End If
End For
(7)***
Include a function called CreateCircle t= hat will actually create a circle at a specified location with a specified = radius. Here again you should be able to use a similar function from exerci= se 7D. Since many of your circles will overlap, you may want to experiment = with various parameters, such as the fillOpacity.
(8)***
The functions startAnimation and stopAni= mation are used to start and stop the animation. Experiment with the
???? to determine an appropriate number = of milliseconds between frames.
(9)***
Study the function AnimateCircles that d= isplays various frames of the animation. Create the code that will =E2=80= =9CAdd current year circles to the map=E2=80=9D (9a) ***. Current year here= means the year with the curYearIdx index in the cirsByYears array.<= /p>
(10)***
Create buttons that will start and stop = the animation.
Create a folder for exercise 10 on the w= ebhosting service. Load all files related to this exercise into this folder= . Post the resulting URL for the map animation to the following Google Worksheet . Hand in a hard copy version of your map animation code and documen= tation.