SDEV-Homework 4 Solved

API Setup 


If you've already setup an account on darksky(Lab 9), you can use the same account for this assisgnment. Skip this step.
1. Head over to Dark Sky API
2. Click Try for free
3. Register: fill in your email, password and confirm password
4. Head over to your email and click the confirmation link
5. You will see the welcome screen after clicking the link. Then in the top right corner click Log in.
6. The API that you will need is the One in the "Sample API Call". It looks something like https://api.darksky.net/forecast/-your-key-here-/37.8267,-122.4233
Part 1: Reading the SVG


We will be working with SVGs for this part. The first step is for you to read up on what SVGs are from the Resources tab above.
We need the SVG of the United States Map. This can be found here
If you save the SVG locally, it's not going to work since there's no way to actually view the XML code for it. So instead head over to the link provided above, right click and click View Page Source
 
Paste the contents you see on the browser in index.html between the 'Paste World Map Here' and the 'End of World Map' tags 
Part 2: Reading the JS


Read the state_info.js into index.html at the 'Import state_info.js here' 
Read the index.js into index.html at the 'Import index.js here' 
Part 3: Index.js


Paste your API key in index.js where it is marked "Enter your API Key here" 
If you look at the SVG that you pasted, it has a bunch of IDs that are State Codes. You can change the color of a state code by doing "$('#CO').css('fill', "blue")" for example.
Iterate over each of the rows in the json and make an API call to the Dark Sky API using the latitude and longitude that we saw before. 
Here is how you iterate over a json with a list of Jsons.
For each of these, make an API call to DarkSky. 
Note that the API calls are limited to 1000 per day, so use them wisely. If you want to learn more about the api response see this.
If you want to look at the JSON response, see the 'example_api_response.json' file in the example folder.
If you run out of requests, you may make a new account or try it a day after.
The color to be used for a state should be determined based on the following temperature range table. 
Temperature
Color
[default]
#808080
Less than equal to 10F
#6495ED
Between 11F and 20F
#7FFFD4
Between 21F and 30F
#0000FF
Between 31F and 40F
#008B8B
Between 41F and 50F
#00BFFF
Between 51F and 60F
#F08080
Between 61F and 70F
#CD5C5C
Between 71F and equal to 80F
#8B0000
Between 81F and equal to 90F
#B22222
Greater than 90F
#FF0000
 The above is a sample of how the final image needs to be
Bonus Questions 


Question 1: You will create a tooltip to display other information about the weather in each state.
The tooltip should appear when hovering over any state, and it should update when scrolling across different states. The tooltip should work for all states on the map.
You can include as many information you want in the tooltip, but some suggested data might be things such as precipitation, humidity, or cloud cover.
Note: You're free to modify the svg element as per your need. You can use any css library to implement tooltip, you can also build your own css tooltip. You can create as many helper functions you want.

Question 2: Add wind direction to the tooltip. You can use any css style arrows to show the wind direction.