64 lines
2.0 KiB
HTML
64 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8" />
|
|
<html>
|
|
<head>
|
|
<!-- add title -->
|
|
|
|
<!-- import required libraries here -->
|
|
|
|
<style>
|
|
/* define CSS rules here */
|
|
</style>
|
|
|
|
<title></title>
|
|
</head>
|
|
|
|
<body>
|
|
<!-- Add heading for the visualization -->
|
|
|
|
<!-- Create dropdown element here. Options should be added after reading in game file, they should not be created here.-->
|
|
|
|
<!-- append visualization svg to this div-->
|
|
<div id="choropleth"></div>
|
|
|
|
<script>
|
|
// enter code to define margin and dimensions for svg
|
|
|
|
// enter code to create svg
|
|
|
|
// enter code to create color scale
|
|
|
|
// enter code to define tooltip
|
|
|
|
// enter code to define projection and path required for Choropleth
|
|
// For grading, set the name of functions for projection and path as "projection" and "path"
|
|
// var projection =
|
|
// var path =
|
|
|
|
// define any other global variables
|
|
|
|
Promise.all([
|
|
// enter code to read files
|
|
])
|
|
.then
|
|
// enter code to call ready() with required arguments
|
|
();
|
|
|
|
// this function should be called once the data from files have been read
|
|
// world: topojson from world_countries.json
|
|
// gameData: data from ratings-by-country.csv
|
|
|
|
function ready(error, world, gameData) {
|
|
// enter code to extract all unique games from gameData
|
|
// enter code to append the game options to the dropdown
|
|
// event listener for the dropdown. Update choropleth and legend when selection changes. Call createMapAndLegend() with required arguments.
|
|
// create Choropleth with default option. Call createMapAndLegend() with required arguments.
|
|
}
|
|
|
|
// this function should create a Choropleth and legend using the world and gameData arguments for a selectedGame
|
|
// also use this function to update Choropleth and legend when a different game is selected from the dropdown
|
|
function createMapAndLegend(world, gameData, selectedGame) {}
|
|
</script>
|
|
</body>
|
|
</html>
|