roadmaps/index.html at main · alisoncase/roadmaps · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
            <title>Country Roadmaps</title>
        <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="lib/leaflet/leaflet.css">
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
        <!--[if IE<9]>
            <link rel="stylesheet" href="css/style.ie.css">
        <![endif]-->
        <style>
            .serif {
                font-family: 'Noto Serif', serif;
            }
        </style>
        <script src="https://cdn.jsdelivr.net/npm/@turf/turf@7.0.0/turf.min.js"></script>
        <script src="https://d3js.org/topojson.v1.min.js"></script>
        <script src="https://d3js.org/d3.v6.min.js"></script>
        <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
        <script type="text/javascript" src="lib/leaflet/leaflet-src.js"></script>
        <script type="text/javascript" src="lib/leaflet/leaflet-providers.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/d3-lasso@1.0.0/build/d3-lasso.min.js"></script>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col text-center title sans-serif" style="color: rgb(32,32, 32)">
                    <h1><b>Country Roadmaps</b></h1>
                    <p class="author"><b>Alison Case | Spring 2025</b></p>
                </div>
            </div>
        </div>
        <!-- Splash Screen -->
        <div id="splash-screen">
            <div>
                <h2>Welcome to the Country Roadmaps Interactive Map</h2>
                <p>Each year since 2018, the U.S. Agency for International Development (USAID) releases its Country Roadmaps, an analytical tool for assessing global development progress. These roadmaps use 18 third-party metrics to evaluate all low- and middle-income countries. The metrics are organized into two dimensions:</p>
                <ul>
                <li><b>Commitment:</b> Measures how a country’s laws, policies, actions, and informal governance mechanisms support sustainable development.</li>
                <li><b>Capacity:</b> Assesses a country’s ability to plan, finance, and manage its own political, social, and economic development, including cross-sector collaboration.</li>
                </ul>
                <p></p>
                <p>Additionally, there are two extra metrics for informational purposes: fragility and risk of external debt distress. These do not affect the Commitment or Capacity scores.</p>
                <p>This interactive web map visualizes the USAID Country Roadmap dataset for Fiscal Year 2025. Previously, this dataset was presented as static webpages and PDFs with dot plot and
                    scatterplot graphs at <a href="https://roadmaps.usaid.gov">https://roadmaps.usaid.gov.</a> This project aims to enhance the user experience by incorporating interactive geospatial visualization for more targeted
                    comparative analysis. Users can hover over and click on different countries and buttons to explore the dataset. For more information, click the “help” button at the top
                    right of the web page.</p>
            </div>
            <button id="close-splash">Close this window</button>
        </div>
        <!--<div class="container">
            <div class="container content-container">
                <div class="col text-left serif">
                    <p>This interactive web map visualizes the USAID Country Roadmap dataset for FY25.
                        The dataset comprises 18 third-party metrics for all low- and middle-income countries divided
                        into two dimensions that assess a country’s commitment and capacity to make progress toward sustainable
                        development. It also includes two additional metrics outside of these dimensions that provide further
                        context on a country’s progress toward sustainable development. Previously, this dataset was presented
                        as static webpages and PDFs with dot plot and scatterplot graphs. This project aims to enhance the user
                        experience by incorporating interactive geospatial visualization for more targeted comparative analysis.</p>
                </div>
            </div>
        </div>-->
        <div id="mydiv"></div>
        <div class="container">
            <div class="map-container">
                <div id="map"></div>
            </div>
        </div>
        <div id="panel"></div>
        <div class="container text-center mt-3" id="indicator-buttons">
            <!-- Buttons will be dynamically generated here -->
        </div>
        <!-- Help Button -->
        <button id="help-button">Help</button>

        <!-- Help Panel -->
        <div id="help-panel">
            <div>
                <button id="close-help">X</button>
                <h2>Help</h2>
                <h3>Map</h3>
                <p>This interactive map has three types of layers you can toggle using the buttons below the map:</p>
                <ul>
                    <li><b>Capacity and Commitment:</b> Displays combined overall Capacity and Commitment scores for each country using a color-coded legend. The legend shows nine colors representing different combinations of low and high capacity and commitment.</li>
                    <li><b>Metrics Maps:</b> Shows individual scores for each metric under the Capacity and Commitment dimensions as color-coded maps. You can toggle these layers on and off.</li>
                    <li><b>Proportional Symbols:</b> Adds symbols to represent the Fragility and Risk of External Debt Distress metrics for each country. These symbols can be viewed on top of the metrics maps, allowing you to see both the color-coded scores and the proportional symbols simultaneously.</li>
                </ul>
                <h3>Metrics</h3>
                <p>Hover over the buttons to see definitions and data sources for each metric. Hover over a country on the map to see the country's score for the selected metric. A score of 0.0 on a metric means the country had the least favorable outcome globally, while a score of 1.0 means
                     the most favorable outcome. Other countries receive scores between 0.0 and 1.0 based on their position between the worst and best outcomes, maintaining the original data distribution.
                     Although USAID Roadmaps focus on low- and middle-income countries, the range of outcomes includes all countries globally, including high-income countries.</p>
                <h3>Graphs</h3>
                <p>Click on a country to open an info window:</p>
                <ul>
                    <li><b>Left Side:</b> Displays the country's name and scores on each metric under the Capacity and Commitment dimensions as dot plots on a range of 0.0 (worst outcome) to 1.0 (best outcome). These plots compare the country's scores to other low- and middle-income countries (LMICs) and show the average score for all LMICs.</li>
                    <li><b>Right Side:</b> Shows a scatterplot of overall capacity and commitment scores for all LMICs, highlighting the selected country. You can hover over dots to see country names, click to highlight a country on the map, or lasso select multiple dots to highlight them. Close the window by clicking the X in the upper right corner.</li>
                </ul>
            </div>
        </div>

        <script type="text/javascript" src="js/main.js"></script>
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
        <script>
            // Close the splash screen when the button is clicked
            document.getElementById('close-splash').addEventListener('click', function() {
                document.getElementById('splash-screen').style.display = 'none';
            });

            // Show the help panel when the Help button is clicked
            document.getElementById('help-button').addEventListener('click', function() {
                document.getElementById('help-panel').style.display = 'block';
            });

            // Close the help panel when the X button is clicked
            document.getElementById('close-help').addEventListener('click', function() {
                document.getElementById('help-panel').style.display = 'none';
            });
        </script>
        <!--credits-->
        <footer class="footer mt-auto py-3 bg-light">
            <div class="container">
                <div class="credits text-center">
                        <p>Disclaimer: This project was created in my personal capacity as a student at the University of Wisconsin-Madison and does not represent the views of my employer.</p>
                        <p><b>Credits:</b></p>
                        <p>Map created with
                            <a href="https://leafletjs.com/Leaflet">Leaflet</a> and <a href="https://d3js.org/">D3</a></p>
                        <p>Data from the
                            <a href="https://roadmaps.usaid.gov">U.S. Agency for International Development</a></p>
                </div>
            </div>
        </footer>
    </body>
</html>