4. Data must not be included in class names. No id’s can be created other than that used for the div. Strings used to create elements must not include class names or other html attributes. We want good coding practices here!

　　5. If the Ajax Fails, the table div should contain a standard error message (e.g., “Failed to load Station Data”). No table should exist if the request fails

　　Task 2. Annual Station Graph [40%]

　　The second thing we need is a bar graph of the data depicting the selected station from the above table. Clicking on a station should bring us to the Climate/Details page that has already been created for you.

　　1. This graph can be generated from div elements (or any other suitable elements like svg if using D3 v5, NOT table elements). To do this, you will need to research topics such as how to use a “for-each” loop and how to create html elements or append html using your chosen JavaScript library.

　　· It is suggested you start by designing your graph statically using plain HTML and custom CSS classes so that you can determine the html design needed to implement the graph.

　　· Once your “static” graph is in order, translate this to your ajax JQuery.

　　· Use console.log(“your text” + javaScriptVariale); to help you debug as you write the code. If you are having troubles getting the web services working, then use the console of the browser (F12 in IE) and the network traffic in the browser to see if data is being sent and received.

　　2. The Bar Graph should have the year located left off each bar of the graph and the min and max temperatures clearly within each bar aligned to the right (but not pressed up agains the right border of the bar!). The temperatures will need to be formatted/fixed to one decimal place using an appropriate function that rounds correctly. The name of the station must be clearly indicated at the top of the page.

　　3. The bars will need to be scaled to consume the maximum available graphing space (ie use % not px if using div elements). This will be tricky because you have min and max temperatures. The min temperatures will need to use some minimum width/offset so that the negative numbers are visible. You may need to use the Math.abs() function when working with negative values to help with this. If the Data is not available, then the bars should not be created or appended to the graph.

　　4. The colour of the bars should reflect if it is the min or max data as shown. The colours you choose should look professional. The colour of the minimum value and maximum value across all years should be clearly distinguishable from the rest. This can be achieved by making it a stronger opacity.

　　5. The bars must be animated. When you first land on the page, the bars should grow from 0% to their actual size (as determined by their degrees celcius value).

　　6. When the mouse is hovered over a year on the graph, the whole horizontal section should highlight indicating the year and the min and max temperatures together. When it highlights, a tool-tip should clearly indicate that the bar can be clicked to view more detailed information for that year: “Click to view monthly detail for xx year”

　　7. The Graph requires x-axis and y-axis lables. These can be rotated or placed at the top left and bottom right of the graph as shown

　　8. Should the Graph fail to load, the data div should contain a standard error message. No graph elements should be present upon failure.

　　9. A Button must be available to return the user to the list of Climate Stations from the previous page.

　　10. Clicking on the highlighted year should re-fresh the page and load the monthly breakdown of the climate data for the selected year and station (Part 3 of the assignment).

　　Task 2 Bonus 1 – Animate the Temperature Values [10%]

　　Whilst the bars grow in length, make the temperatures start from 0.0°C and increment to their final value (the numbers should tick over like a timer counting upward). This must be done as efficiently as possible! No additional plugins can be used, all you need is the animate function.

　　Example: [0.0] -> [0.1] -> [0.2] -> -> -> -> [33.5] -> [33.6] as the bar grows across the page. Don’t forget you need to keep the degrees Celsius formatting.

　　Task 2 Bonus 2 – Detailed Data Card [10%]

　　The graph width will need to be reduced a little to implement a stylish Data Card that shows the detailed information of the year in the graph that is currently highlighted by the mouse. This one may be a little tricky to get fully working because the Data Card will need to be positioned alongside the current highlighted year – even if the page was scrolled to view the chosen year. An example mock-up is provided below. You will need to make maximum use of the additional climate detail for full marks and it must be presented in a professional manner. When the mouse is not over the graph, then you will need to do something with the card (ie change the default text to “select a year from the graph to see detailed information” – or something to that effect).

　　Task 3. Monthly Breakdown [30%]

　　Clicking on a year bar in the annual graph will cause the bars to animate down to nothing then a graph with the selected monthly breakdown of the data will grow in its place from left to right. The month names will need to be clearly shown and right aligned to the vertical y-axis. You may need to fade out the y-axis values to make this look professional. As with the yearly graph, hovering over the bars + year should clearly highlight the month of data displayed. You will also need to include a button that will re-establish the annual graph for the station that was currently being viewed.

　　Task 3 Bonus 3 – Detailed Data Card [10%]

　　The graph width will need to be reduced a little to implement a stylish Data Card that shows the detailed information of the selected month in the graph that is currently highlighted by the mouse. As with the previous graph the Data Card will need to be positioned alongside the current highlighted month – even if the page was scrolled to view the chosen month. You will need to make maximum use of the additional climate detail for full marks and it must be presented in a professional manner. When the mouse is not over the graph, then you will need to do something with the card (ie change the default text to “select a month from the graph to see detailed information” – or show the annual statistics for that year).

　　The Web Application

　　A web application containing the necessary database and Web API web services has been created for you. This can be downloaded from the assessments tab on the course website. Your task is to complete the Views/Climate/Index.cshtml and Views/Climate/Details pages with the necessary layout, graphs and JQuery or D3v5/JavaScript code.

　　On each page a single