Working with Data
This project is intended for you to learn the basics of JavaScript programming using data, either encoded directly in your program as a variable or loaded dynamically from an API as JSON.
Submitting Your Work
This project will be added to your portfolio_NETID repository so there is one single place we can go to find your work during the semester. To submit this project:
- create a separate folder for each part of the assignment given below
- within that folder put
index.html, the main page used to interact with the user- CSS style file(s), if necessary (i.e., it contains different rules from your primary set already defined in the top-level style file)
- JavaScript file(s) you write to implement the specifications
- any JSON data or images used to make your page
- a README file (in plain text or Markdown format) describing your work on the assignment
- then add very obvious links on your Portfolio web site to each page you have made
All your pages must display the way you expect in the latest version of Google's Chrome browser and written following standard Coding Conventions that is validated online.
Specification
Implement the following pages using plain JavaScript 6 (i.e., not any kind of framework that claims to make it easier). We strongly suggest develop your iteratively: making a few small changes at a time and using the Developer Tools: the Console to try JavaScript statements out interactively and Breakpoints to see what is happening in your code.
Part 1: JavaScript - Word Game
Implement a page that plays a word game with the user, such as:
- Clever hangman
- Word ladder (or as an APT)
- Jotto
- Anagrams
- or small "201-level" dictionary based word game you know of or make up (although you would need to describe the rules very clearly so we can tell if it is working correctly)
The user can interact with your page by either providing the word(s) to start (in which case you implement the "AI" algorithm) or guessing letters to reveal the secret word(s) (in which case you implement the rules, feedback, and perhaps a "clever cheating" algorithm). The page design is not expected to be amazingly stylish, but any styling should be provided using CSS styles that are changed using JavaScript when specific game conditions are detected.
To simplify the project, restrict the words used for your game's dictionary to all "useful" 5 letter words, given in this file. Rather than reading this file from its source, convert it manually into a single JavaScript String and then algorithmically into whatever data structure you think will best serve as a dictionary for the word game you implement. For example, it may just be a sorted list, or a set, or a map from some characteristic of some words to the words sharing that characteristic.
Along with the game itself, the page should also contain the following:
- description of the game, so users know what they are playing, if it is a common version or a variation, how to "win", etc.
- directions of how to play this version of the game , so users know how to interact with the game and what to expect when they do
Part 2: Web API - Plotting Data
Tell a "data story" about the world by combining multiple data values about the world's countries and visualize their relationship by plotting the results on a map. For example, this week's exercise might be seen as proposing a theory between the magnitude of recent earthquakes based on where the ISS is :) Another example might be comparing the length of a country's coastline with the number of environmental international agreements it has and its population's median age? Your story can be serious, curious, interesting, funny, or sarcastic --- whatever you find interesting about the data!
The CIA's World Factbook contains a wealth of comparable data on the world's countries (here is its entry on the United States) and Ian Coleman has kindly done the work to convert its data to JSON. In some cases, it may also be helpful to have a list of all countries or the ISO Country Codes. You may also include (and attribute!) data from other sources if it relates to most countries in the world and is relevant to your story (such as worldwide COVID data or country flags (note Leaflet's icon must use PNG, JPG, or GIF formatted images rather than the more web-friendly SVG format)).
Thus your task for each country will be to
- decipher the JSON format to find the data you want to compare and how they will be combined (using a formula, as one or multiple values, using accompanying text or images, etc.)
- decide how you want to display the results (as a circle, a bar, an image, a combination), to color the display (including transparency!), and to scale the data to make the most of different "information dimensions"
- plot the results using the country's latitude and longitude degrees (note, values in the S and W hemispheres should be negated!)
Along with the plotted data itself, the page should also contain the following:
- key to the data being shown, so users know what they are seeing (especially if it just appears to be differently sized circles)
- description of the "story" or point you are making by plotting the specific data values you chose
- attributions to the Leaflet team, the CIA World Factbook, Ian Coleman for converting it to JSON format, and any other resources you use
To make the data interactive, include the following features on the page:
- provide Leaflet markers with a Title and Alt or Leaflet shapes with popups to display the data values that form the basis for your visualization when the user hovers over or clicks on each
- provide any number of input elements to filter the data or set options used in displaying the data
- provide a button to reset the visualization back to its initial state (i.e., to reset any filters or options applied)
Since the Factbook's JSON is big and complex (almost 14MB of text data!), we have made a version that is just the United States for you to study and test more easily (but your submission should work for the entire world, NOT just this US data). We have also provided a Duke-hosted copy of the entire Factbook, as well as some other country data referenced above for you to access in your site to make things more manageable (so do not push this data or your own modified version into your individual Gitlab repository).
Here is the documentation for the Leaflet API used to display the map on this page (note, since we have not provided many tiles, you do not need to support letting the user zoom the map in and out):
- Leaflet Map API
