Update readme.md

readme.md

@@ -1,5 +1,8 @@
-# Project Title
-#### Project description [Click here to see the interface]({{https://white-beach-040ec2f03.4.azurestaticapps.net}}).
+# Debt in developing economies
+#### Multiple visualizations which are meant to:
+* Analyze key debt metrics and statistics for various groupings of developing economies, as defined by leading development institutions like the UN.
+* View debt summaries for individual countries.
+[Click here to see the interface]({{https://white-beach-040ec2f03.4.azurestaticapps.net}}).
 
 ## Table of Contents
 * [Link for the visualization](#section-01)
@@ -13,7 +16,6 @@
 * [Local Deployment](#section-08)
 * [Available Scripts](#section-09)
 * [Tooling Setup](#section-10)
-* [Contact](#section-11)
 
 ## Link for the visualization<a name="section-01"></a>
 [https://white-beach-040ec2f03.4.azurestaticapps.net]({{https://white-beach-040ec2f03.4.azurestaticapps.net}})
@@ -22,14 +24,26 @@
 The Production site deployed using Azure Static Web App and work flow can be found [here]({{https://github.com/UNDP-Data/dv-debt-all}})
 
 ## Steps to Integrating the Visualization in the Data Future Platform or Any Other Page<a name="section-02"></a>
-Add the following div in the page
+The different visualizations can be integrated into the page using different ids.
+Add the following divs in the page in the places where the visualization has to be visible:
+
+Country Groups visualizations
+```
+<div id="debtCreditDsaRating"></div>
+<div id="debtToGdp"></div>
+<div id="debtNetInterest"></div>
+<div id="debtNetInterestQuantiles"></div>
+<div id="externalDebt"></div>
+<div id="compositionGroups"></div>
 ```
-<div id="root"></div>
+Countries
+```
+<div id="debtAllCountries"></div>
 ```
 
-Apart from the mentioned `div` above the following `script` and `link` needs to be added to the `head` or in the embed code
+Apart from the mentioned `divs` above the following `script` and `link` needs to be added to the `head` or in the embed code
 ```
-<script defer src="<Link to the Visualization Mentioned Above>/static/js/main.js"></script>
+<script defer src="https://white-beach-040ec2f03.4.azurestaticapps.net/static/js/main.js"></script>
 <link rel="stylesheet" href="https://undp-data.github.io/stylesheets-for-viz/style/mainStyleSheet.css" />
 <link rel="stylesheet" href="https://undp-data.github.io/stylesheets-for-viz/style/StyleForGraphingInterface.css" />
 <link rel="stylesheet" href="https://undp-data.github.io/stylesheets-for-viz/style/StyleForGraph.css" />
@@ -87,6 +101,3 @@ The page will reload if you make edits. You will also see any lint errors in the
 This project uses ESLint integrated with prettier, which verifies and formats your code so you don't have to do it manually. You should have your editor set up to display lint errors and automatically fix those which it is possible to fix. See [http://eslint.org/docs/user-guide/integrations](http://eslint.org/docs/user-guide/integrations).
 
 This project is build in Visual Studio Code, therefore the project is already set up to work with. Install it from [here](https://code.visualstudio.com/) and then install this [eslint plugin](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) and you should be good to go.
-
-## Contact<a name="section-11"></a>
-Roxana Torre ([email protected])