essay代写,代写assignment,paper代写,代写留学作业,英国作业

导航切换

QQ:
1017416118

二维码

代写留学生JavaScript

浏览: 日期:2019-04-30

  This assignment代写留学生JavaScript is a JavaScript based assignment and this document outlines the requirements that must be met in order to obtain full marks. This document is for both internal and external students, all work is done individually. Every person is required to use the JQuery JavaScript library to generate several graphs based on JSON data and be able to demonstrate and explain their JavaScript code when asked.

  The Assignment

  Your task is to plot the Bureau temperature and rainfall data using the pre-configured web services and one of several options available for consuming the Bureau data! The options are:

  1. JQuery (using the ajax request)

  2. D3 (the current version, v5.1 – newer than used in the past practicals which will also require some research)

  Your task is to consume Ajax Data and present them on the Climate/Index and Climate/Details pages as per the requirements below.

  Requirements

  There are several tasks you are required to complete:

  Task 1. Station Climate Data [20%]

  1. The first thing we need is a table of the data from the Station Controller to be displayed in our Climage/Index page already created for you. This table should list the

  · The station number and name

  · Years the climate records cover

  · total number of available records

  · total number of all records (available + missing)

  · A Tooltip to indicate the number of available and missing records

  · A Tooltip to indicate the row is clickable

  In a bootstrap table format as shown below:

  2. When the mouse cursor is over a row, the row should automatically highlight (and remain readable). You can do this using the pre-existing bootstrap classes if the colours are suitable or make your own CSS selectors using an external style sheet linked at the top of the page. If in doubt, look up the bootstrap table information.

  3. This table must be created inside a single

element using an ajax-webservice data source with a timeout function. This must be done using the best JQuery approaches, namely appendTo(). There must be NO hard coded table elements on the page. Only the div.

 

  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

can be used to which you will need to add new layout elements as necessary using JavaScript. If you wish to use D3 then you will need to link to the v5 library on your pages and you have the added option of swapping from a horizontal bar graph (growing from left -> right) to a column graph (growing bottom -> top). This includes swapping around the axes (if using D3!).

 

  The Web Services

  Once you have your graph structure configured and made your decision on the JavaScript library to use (JQuery vs D3v5), it is suggested you get started creating an Ajax call to the StationController web service and get the data to download to the page. The relative URL for the web service is “/api/Station”. So if you run the application in VS2017 and your root URL shows up as: http://localhost:55968/ then

  http://localhost:55968/ api/Station will return the list of stations as Ajax Json data. This may open up in Visual studio, in which case you can use Ctrl + K + D to auto format it into traditional JSON style:

  [{"stationNumber":23000,"stationName":"Adelaide","fromYear":2000,"toYear":2018,"records":361,"missing":6338},{"stationNumber":19017,"stationName":"Hawker","fromYear":2000,"toYear":2018,"records":6668,"missing":30},{"stationNumber":23013,"stationName":"Parafield","fromYear":2000,"toYear":2018,"records":6685,"missing":14}]

  The next step would be to work out how to read and loop through the data. In the JsonData folder are three json files showing the data correctly formatted so that you can see the arrays and object through their indentation. Use these files to help you write your JQuery/D3v5 code. You may even want to write your Ajax request to use these files to speed things up during testing. If you do this, remember to swap it back to the API request.

  Once this is working, start creating html elements and assigning them data before appending them to the page.

  Once you have your stations working, clicking on a station should navigate you to the next web api: /api/Temperature/{stationNumber}

  Calling this API will give you data relating to the annual max temp and min temps for that station since 2000. You will need to plot these on an interactive graph as described in Task 2.

  JavaScript (JQuery or D3)

  The assignment is done individually and each person must write their own JavaScript code which includes their Ajax requests to perform the above tasks. As mentioned you can use JQuery OR D3v5 to achieve the various tasks. Other versions of D3 (such as v3 or v4) will not receive any marks.

  CSS

  The style of the bars and layout of the axis can be done using the embedded style elements at the top of the page as necessary or preferably an external style sheet. The exact spacing of the bars is not important but the graph must look professional: clean, be neat and readable. The statistical information and counts in the bars should be spaced away from the border so as to be easily readable. The yearly/monthly markers of the bars should be adequately spaced from the bars so as to not overflow on to the chart. The number of style classes should be kept to a minimum unless required as part of visual feedback during mouse hover or for animations. The use of data in Class Names and the use of ID’s will incur penalties.

  Marking

  Marking will be conducted in class during week 13. You will need to be able to demonstrate your work and answer any questions to obtain a passing grade. A failure to explain your code will result in reduced or no marks.

  Marks will be allocated in the following areas:

  Stations Table and General Page Layout [20%]

  This includes:

  · Correct table structure

  · Correct use of bootstrap classes.

  · Quality of JQuery/D3v5 code used to generate the table – including commenting of logic where appropriate.

  · Presentation and basic CSS – custom (your own css)/improved existing CSS

  · Timeout and error functions

  Station Annual Climate Data Graph [40%]

  · Ajax call to the WebAPI to pull the correct data

  · Creation of html elements using JQuery/D3v5, including incorporating data and css classes into the new html elements

  · Use of bootstrap classes where appropriate

  · Use of JQuery functions over lengthy strings and concatenation

  · Appending the data to the existing data div.

  · Code to highlight bars and year in graph

  · Quality of graph layout and readability.

  · Colourisation of data

  · Animation of bars

  Station Monthly Climate Data Graph [30%]

  · Ajax call to the WebAPI to pull the correct data

  · Creation of html elements using JQuery/D3v5, including incorporating data and css classes into the new html elements

  · Use of bootstrap classes where appropriate

  · Use of JQuery functions over lengthy strings and concatenation

  · Animating the removal of the annual graph

  · Animating the entrance of the replacement monthly graph

  · Appending the data to the existing data div.

  · Code to highlight bars and month in graph

  · A button to re-draw the annual graph for the selected station

  · Quality of graph layout and readability.

  · Colourisation of data

  · Animation of bars

  Code Quality [10%]

  · HTML Validation – is your generated HTML valid?

  · Optimisation of JQuery and data being consumed

  · Strategic use of HTML structure, class names, data attributes, index information and foreach loops.

  · Reuse of attributes.

  Bonus Marks [up to 30%]

  · Bonus marks are in addition to the standard marks and can only be awarded if your code is explained in person. These will be awarded at the discretion of the marker in addition to the requirements. Bonus marks are not required to achieve full marks.

  · These are detailed in each part of the assignment.


在线客服