{"id":20486256,"url":"https://github.com/undp-data/access-all-data-viz","last_synced_at":"2025-04-13T15:21:13.021Z","repository":{"id":43133264,"uuid":"420952412","full_name":"UNDP-Data/Access-All-Data-Viz","owner":"UNDP-Data","description":"Visualization to be shown on Access All Data Page in DFP","archived":false,"fork":false,"pushed_at":"2025-03-25T15:29:18.000Z","size":57734,"stargazers_count":3,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"production","last_synced_at":"2025-03-25T15:32:28.904Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/UNDP-Data.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-10-25T09:07:28.000Z","updated_at":"2025-03-25T15:29:21.000Z","dependencies_parsed_at":"2025-03-25T15:30:45.595Z","dependency_job_id":"366312ef-0785-4d6d-9f79-a829518dbe04","html_url":"https://github.com/UNDP-Data/Access-All-Data-Viz","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UNDP-Data%2FAccess-All-Data-Viz","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UNDP-Data%2FAccess-All-Data-Viz/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UNDP-Data%2FAccess-All-Data-Viz/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UNDP-Data%2FAccess-All-Data-Viz/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/UNDP-Data","download_url":"https://codeload.github.com/UNDP-Data/Access-All-Data-Viz/tar.gz/refs/heads/production","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248733212,"owners_count":21152978,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-15T16:35:52.310Z","updated_at":"2025-04-13T15:21:12.983Z","avatar_url":"https://github.com/UNDP-Data.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Access All Data Visualization in UNDP's Data Futures Platform\n#### This project aims to provide interactive visualizations for exploring and analyzing multi dimensional data. [Click here to see the interface](https://zealous-sky-017344110.2.azurestaticapps.net).\n\n## Table of Contents\n* [Link for the visualization](#section-01)\n* [Deployment](#deployment)\n* [Steps to integrate the vis in static page](#section-02)\n    * [Steps to integrate Main Viz](#section-02-01)\n    * [Steps to integrate Country Level Viz](#section-02-02)\n    * [Steps to integrate Regional Level Viz](#section-02-03)\n    * [Steps to integrate Signature Solution Level Viz](#section-02-04)\n* [Customizing views for different countries, regions and signature solution](#section-11)\n    * [Customizing 'About' section](#section-11-01)\n    * [Customizing 'Key Indicators' in Data Explorer](#section-11-02)\n    * [Customizing Default view of the main Data Explorer visualization](#section-11-03)\n    * [Customizing Header Area](#section-11-04)\n* [Pages on DFP where This Viz is Used](#section-03)\n* [Related Repos](#section-04)\n* [Global CSS Files and Repo](#section-05)\n* [Build With](#section-06)\n* [Installation](#section-07)\n* [Local Deployment](#section-08)\n* [Available Scripts](#section-09)\n* [Tooling Setup](#section-10)\n\n## Link for the visualization\u003ca name=\"section-01\"\u003e\u003c/a\u003e\n[https://zealous-sky-017344110.2.azurestaticapps.net](https://zealous-sky-017344110.2.azurestaticapps.net)\n\n## Deployment\u003ca name=\"deployment\"\u003e\u003c/a\u003e\nThe Production site deployed using Azure Static Web App and work flow can be found [here](https://github.com/UNDP-Data/Access-All-Data-Viz/blob/production/.github/workflows/azure-static-web-apps-zealous-sky-017344110.yml)\n\n## Steps to Integrating the Visualization in the Data Future Platform or Any Other Page\u003ca name=\"section-02\"\u003e\u003c/a\u003e\n_Only editor and admins of Data Futures Platform are allowed to edit pages and embed the visualization in any page on data futures platform._\n\nThere are many type of visualization in this page:\n* __Main visualization with all the data for all the country__\n* __Country level visualization__\n* __Regional level visualization__\n* __Signature Solution level visualization__\n\n### Main Visualization\u003ca name=\"section-02-01\"\u003e\u003c/a\u003e\n\nThis is the parent visualization with all the data for all the countries. This visualization is used in the __Access All Data__ page in DFP.\n\nMain visualization `Access All Data` will be rendered within the following div on a static page:\n```\n\u003cdiv data-bucket-embed\u003e\u003c/div\u003e\n```\n\n_Key Features_\n* Data Explorer: For visualizing all the data for the world. Allow user to visualize all the countries together or focus on a single country. \n* Aggregated Data Explorer: For visualizing all the aggregated data at the World level. (Future development: Allowing user to create there own country grouping)\n* Datasets: List all the data used in teh visualization and allow user to download datasets in Excel format\n___\n\n### Country Level Visualization\u003ca name=\"section-02-02\"\u003e\u003c/a\u003e\n\nThis is the visualization which are embedded in the country pages. \n\nThis visualization will be rendered within the following div on a static page:\n\n```\n\u003cdiv class=\"country~\u003cUse Country Alpha-3 Code Here\u003e\" data-bucket-country-embed\u003e\u003c/div\u003e\n```\n\n_The difference between country visualization and main visualization are as follow:_\n* Country viz only uses the selected country data\n* Country viz don't have maps, scatter plot, bar charts and multi-line chart\n\n_Key Features_\n* Data Explorer: For visualizing all the data for the country\n* Sub National Data: For visualizing available sub-national data for the country (This tab only appear for the countries that have sub-national data available)\n* SDG Tracker: For visualizing the SDG progress\n* SDG Data Explorer: For exploring SDG related data organized based on SDGs and targets and indicators\n* About: Description of the country and some key links if available\n___\n\n### Regional Level Visualization\u003ca name=\"section-02-03\"\u003e\u003c/a\u003e\n\nThis is the visualization which are embedded in the regional pages. There four subcategories here:\n\n#### Main regional level visualization\n\nThis visualization will be rendered within the following div on a static page:\n```\n\u003cdiv class=\"region~\u003cUse Region Code Here\u003e\" data-bucket-region-embed\u003e\u003c/div\u003e\n```\n\n_The difference between this visualization and main visualization are as follow:_\n* Country viz only uses the aggregated region data\n* Country viz don't have maps, scatter plot, bar charts and multi-line chart\n\n_This visualization is very similar to the Country Level visualization with some key difference:_\n* Users have the ability to select a country they want to focus\n* Summary visualization on the top are not categorized by signature solutions, but some key data points are used for this\n\n_Key Features_\n* Data Explorer: For visualizing all the data for the region. Allow user to visualize all the countries within the region together or focus on a single country. \n* Aggregated Data Explorer: For visualizing all the aggregated data at the region level. (Future development: Allowing user to create there own country grouping)\n* Datasets: List all the data used in teh visualization and allow user to download datasets in Excel format\n* About: Description of the region and some key links if available\n\nAvailable values of region code in the class element:\n* AP (for Asia and the Pacific)\n* AS (for Arab States)\n* ECA (for Europe and Central Asia)\n* LAC (for Latin America and the Caribbean)\n* SSA (for Sub Saharan Africa)\n___\n\n### Signature Solution Level Visualization\u003ca name=\"section-02-04\"\u003e\u003c/a\u003e\nThis is the visualization which are embedded in the signature solution pages. There three subcategories here:\n\n#### With the visualization data filtered by signature solutions\n\nThis visualization will be rendered within the following div on a static page:\n```\n\u003cdiv class=\"signatureSolution~\u003cUse Signature Solution Here\u003e\" data-bucket-ss-embed\u003e\u003c/div\u003e\n```\n\n_Key Features_\n* Data Explorer: For visualizing all the data related to a signature solution. Allow user to visualize all the countries together or focus on a single country. \n* Datasets: List all the data used in teh visualization and allow user to download datasets in Excel format\n* About: Description of the region and some key links if available\n\n_This visualization is very similar to the Main visualization the only difference are available data sets under the selected signature solution category are shown_\n\nAvailable values for Signature solutions in the class element (Note: _Replace ` ` with a `+`_):\n* Poverty+and+Inequality\n* Environment\n* Gender\n* Energy\n* Resilience\n* Governance\n\n___\n\nApart from the mentioned `div` above the following `script` and `link` needs to be added to the `head` or in the embed code\n```\n\u003cscript defer src=\"\u003cLink to the Visualization Mentioned Above\u003e/static/js/main.js\"\u003e\u003c/script\u003e\n\u003clink rel=\"stylesheet\" href=\"https://undp-data.github.io/stylesheets-for-viz/style/mainStyleSheet.css\" /\u003e\n\u003clink rel=\"stylesheet\" href=\"https://undp-data.github.io/stylesheets-for-viz/style/StyleForGraphingInterface.css\" /\u003e\n\u003clink rel=\"stylesheet\" href=\"https://undp-data.github.io/stylesheets-for-viz/style/StyleForGraph.css\" /\u003e\n```\n\n## Customizing views for different countries, regions and signature solution\u003ca name=\"section-11\"\u003e\u003c/a\u003e\n\nThe code let to easily customizing certain elements based on countries, regions and signature solutions where the visualization is embedded. The section that can easily be customized for different countries, regions and signature solutions are:\n* About Section\n* Key Indicator (the cards on the top) in the Data Explorer\n* Default view of the main Data Explorer visualization\n* Header Area\n\n### Customizing 'About' section\u003ca name=\"section-11-01\"\u003e\u003c/a\u003e\n\nTo edit the About section for countries, regions and signature solution one needs to edit [AboutText.tsx](./src/AboutText.tsx) in the `src` folder\n\n__Data Structure for the file__\n\nKey | DataType | Description\n--- | --- | --- \ntitle| `string` | Title of the page\nid | `string` | This is used as an identifier to determine which object belong to which page. _Available values_: For region - `AP`, `SSA`, `AS`, `ECA`, `LAC`; For Signature Solutions - `Poverty and Inequality`, `Environment`, `Gender`, `Energy`,`Resilience`,`Governance`; For countries - Use the Alpha-3 ISO country codes.\nbodyText | `HTMLDivElement` | This define what gets rendered in the body section. Please note: For countries, a descriptive paragraph is added by default based on key data points; and this `bodyText` get added to the descriptive text.\nresources | `{source: string; link: string}[]` | This defines the links and resources that are shown at the end of the about text. Please note: For countries, link to the country page is added by default. If no resources need to be added please use an empty array.\n\n![About Description](/readMeImgs/AboutText.jpg)\n\n___\n\n### Customizing 'Key Indicators' in Data Explorer\u003ca name=\"section-11-02\"\u003e\u003c/a\u003e\n\nTo customize the 'Key Indicators' in Data Explorer for countries, regions and signature solution one needs to edit [TopCards.tsx](./src/TopCards.tsx) in the `src` folder\n\n__Data Structure for the file__\n\nKey | DataType | Description\n--- | --- | --- \nid | `string` | This is used as an identifier to determine which object belong to which page. _Available values_: For region - `AP`, `SSA`, `AS`, `ECA`, `LAC`; For Signature Solutions - `Poverty and Inequality`, `Environment`, `Gender`, `Energy`,`Resilience`,`Governance`; For countries - Use the Alpha-3 ISO country codes. Please note: `id: Default` is used to define the card that are shown for all the pages that are not mentioned in this file. Also the card on the country pages default to the Regional Bureau they belong to if the card for the country are not specifically defined.   \ncards | `{vizType: string; settings: Object}[]` | This defines the card are shown. The key value pair `settings` object depends on the `vizType`. Available value for `visType` are: `lineChart`, `stackedLineChart`, `dotPlot`, `valueCard`.\n\n![Key Indicator Area](/readMeImgs/KeyIndicators.jpg)\\\n\n___\n\n### Customizing Default view of the main Data Explorer visualization\u003ca name=\"section-11-03\"\u003e\u003c/a\u003e\n\nTo customize the default view of the main Data Explorer visualization for countries, regions and signature solution one needs to edit [DefaultViewsForDataExplorer.tsx](./src/DefaultViewsForDataExplorer.tsx) in the `src` folder\n\n__Data Structure for the file__\n\nKey | DataType | Description\n--- | --- | --- \nid | `string` | This is used as an identifier to determine which object belong to which page. _Available values_: For region - `AP`, `SSA`, `AS`, `ECA`, `LAC`; For Signature Solutions - `Poverty and Inequality`, `Environment`, `Gender`, `Energy`,`Resilience`,`Governance`; For countries - Use the Alpha-3 ISO country codes. Please note: `id: default` is used to define the card that are shown for all the pages that are not mentioned in this file. Also the card on the country pages default to the Regional Bureau they belong to if the card for the country are not specifically defined. For the topics for viva topics pages - Use the name of the topic.   \nfirstMetric | `string` | This defines default value of the first metric. Use the `dataKey` value from the [`indicator-metadata`](https://github.com/UNDP-Data/Indicators-MetaData) to identify the appropriate indicator .\nsecondMetric | `string` | This defines default value of the secondary metric. Use the `dataKey` value from the [`indicator-metadata`](https://github.com/UNDP-Data/Indicators-MetaData) to identify the appropriate indicator. Can be `undefined` if the `graphType` is `map`, `barGraph`, `trendLine`, `multiCountryTrendLine`, or `dataList`.\ncolorMetric | `string` | This defines default value of the color metric. Use the `dataKey` value from the [`indicator-metadata`](https://github.com/UNDP-Data/Indicators-MetaData) to identify the appropriate indicator. Can be `undefined`.This is only applicable if the `graphType` is `barGraph`, or `scatterPlot`.\ngraphType | `string` | This defines default graph. Available values - `map`, `scatterPlot`, `barGraph`, `trendLine`, `multiCountryTrendLine`, or `dataList`.\n\n![Main Viz](/readMeImgs/MainViz.jpg)\n\n___\n\n### Customizing Header Area\u003ca name=\"section-11-04\"\u003e\u003c/a\u003e\n\nTo customize Header Area for regions and signature solution one needs to edit [IntroductionText.tsx](./src/IntroductionText.tsx) in the `src` folder. Please note: The header of Countries cannot be edited.\n\n__Data Structure for the file__\n\nKey | DataType | Description\n--- | --- | --- \ntitle| `string` | Title of the page\nid | `string` | This is used as an identifier to determine which object belong to which page. _Available values_: For region - `AP`, `SSA`, `AS`, `ECA`, `LAC`; For Signature Solutions - `Poverty and Inequality`, `Environment`, `Gender`, `Energy`,`Resilience`,`Governance`.   \nbodyText | `HTMLDivElement` | This define what gets rendered in the body section.\n\n![Header](/readMeImgs/Header.jpg)\n\n\n## Pages on DFP Where the Visualization is Used\u003ca name=\"section-03\"\u003e\u003c/a\u003e\n* [Access All Data](https://data.undp.org/explore-all-data/)\n* [Signature Solution - Poverty and Inequality](https://data.undp.com/topics/poverty-and-inequality)\n* [Signature Solution - Resilience](https://data.undp.com/topics/resilience)\n* [Signature Solution - Governance](https://data.undp.com/topics/governance)\n* [Signature Solution - Energy](https://data.undp.com/topics/energy)\n* [Signature Solution - Environment](https://data.undp.com/topics/environment)\n* [Signature Solution - Gender Equality](https://data.undp.com/topics/gender-equality)\n* This is also used in the Country pages in DFP. For ex. [here](https://data.undp.com/countries/AFG)\n* This is also used in the Regional pages in DFP. For ex. [here](https://data.undp.com/countries/AFG)\n\n## Related Repos\u003ca name=\"section-04\"\u003e\u003c/a\u003e\n* [__Indicators-MetaData__](https://github.com/UNDP-Data/Indicators-MetaData): This is the metadata sheet for indicators used in the visualization\n* [__country-taxonomy-from-azure__](https://github.com/UNDP-Data/country-taxonomy-from-azure): This is data sheet with meta data for Countries\n* [__Access-All-Data-Data-Repo__](https://github.com/UNDP-Data/Access-All-Data-Data-Repo): This is the data sheet for visualization\n* [__stylesheet-for-viz__](https://github.com/UNDP-Data/stylesheets-for-viz): Repo which defines the css settings for the project\n\n## Global CSS for UI and Graphs\u003ca name=\"section-05\"\u003e\u003c/a\u003e\n__Git Repo__: https://github.com/UNDP-Data/stylesheets-for-viz\n\n__Link for stylesheets__\n* https://undp-data.github.io/stylesheets-for-viz/style/mainStyleSheet.css\n* https://undp-data.github.io/stylesheets-for-viz/style/StyleForGraphingInterface.css\n* https://undp-data.github.io/stylesheets-for-viz/style/StyleForGraph.css\n\n## Build with\u003ca name=\"section-06\"\u003e\u003c/a\u003e\n* __React__: Used as MVC framework.\n* __styled-components__: Utilizes tagged template literals and the power of CSS, allows to write actual CSS code to style the components in JS/TS.\n* __Various D3 Libraries__: Used for visualizations, adding interaction and reading the csv data file.\n* __MapLibre__: This is package for creating sub-national maps.\n* __AntD__: For UI elements like dropdown, buttons, checkbox, and slider.\n* __dom-to-image__: Used to allow users to download images of various visualization views they create.\n* __lodash__: Used for manipulating and iterating arrays and objects.\n* __xlsx__: Used to allow users download xlsx format for data.\n* __react-csv__: Used to allow users download csv format for data.\n* __undp-viz-colors__: This is package for defining the visualization color palette.\n\n## Installation\u003ca name=\"section-07\"\u003e\u003c/a\u003e\nThis project uses `npm`. For installation you will need to install `node` and `npm`, if you don't already have it. `node` and `npm` can be installed from [here](https://nodejs.org/en/download/).\n\nTo install the project, simply clone the the repo and them run `npm install` in the project folder. You can use terminal on Mac and Command Prompt on Windows.\n\nThis project is bootstrapped with [`Vite`](https://vitejs.dev/) and was created using `npm create vite@latest` command.\n\nRun the terminal or command prompt and then run the following\n\n```\ngit clone https://github.com/UNDP-Data/Access-All-Data-Viz.git\ncd Access-All-Data-Viz\nnpm install\n```\n\n## Local Development\u003ca name=\"section-08\"\u003e\u003c/a\u003e\nTo start the project locally, you can run `npm run dev` in the project folder in terminal or command prompt.\n\nThis is run the app in development mode. Open [http://localhost:5173/](http://localhost:5173/) to view it in the browser.\n\nThe page will reload if you make edits. You will also see any lint errors in the console.\n\n## Available Scripts\u003ca name=\"section-09\"\u003e\u003c/a\u003e\n* `npm run dev`: Executes `vite` and start the local server for local deployment.\n* `npm run build`: Executes `tsc \u0026\u0026 vite build` and builds the app for production and deployment.\n\n## Tooling Setup\u003ca name=\"section-10\"\u003e\u003c/a\u003e\nThis 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).\n\nThis 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.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fundp-data%2Faccess-all-data-viz","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fundp-data%2Faccess-all-data-viz","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fundp-data%2Faccess-all-data-viz/lists"}