https://github.com/benportner/sdg-graph

Visualizes the Sustainable Development Goals (SDGs) as a graph in your browser using Javascript.
https://github.com/benportner/sdg-graph

cytoscapejs javascript network sdg sustainable-development-goals visualization

Last synced: 2 days ago
JSON representation

Visualizes the Sustainable Development Goals (SDGs) as a graph in your browser using Javascript.

• Host: GitHub
• URL: https://github.com/benportner/sdg-graph
• Owner: BenPortner
• License: gpl-3.0
• Created: 2021-03-03T09:27:09.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-03-04T08:05:29.000Z (over 3 years ago)
• Last Synced: 2024-06-11T17:53:09.612Z (5 months ago)
• Topics: cytoscapejs, javascript, network, sdg, sustainable-development-goals, visualization
• Language: JavaScript
• Homepage: https://rawcdn.githack.com/BenPortner/sdg-graph/79042464ed1928f807a226c21deacae8de4e752b/index.html
• Size: 608 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# SDG Graph 

## Introduction

This project visualizes the Sustainable Development Goals (SDGs) as a graph in your browser.

- nodes are goals, targets, and indicators

- edges show associations of targets to goals, and indicators to targets

See interactive [demo on githack](https://rawcdn.githack.com/BenPortner/sdg-graph/79042464ed1928f807a226c21deacae8de4e752b/index.html) (thanks to [Pavel Puchkin](http://neoascetic.me/) for the [CDN](https://raw.githack.com/)).

## Features

Features:

- concentric layout with goals at the center and indicators at the edge

- user can zoom and pan via gestures or UI widget (thanks to [panzoom](https://github.com/cytoscape/cytoscape.js-panzoom) and [Font Awesome](https://fontawesome.com/))

- user can hover over nodes to show tooltips with further information (thanks to [cy-popper](https://github.com/cytoscape/cytoscape.js-popper) and [popper](https://popper.js.org/))

- user can click on a node to collapse / expand parts of the graph for better overview

- user can double-click on a node to zoom in on it

- user can search for nodes based on their description or id

## Acknowledgements

This project relies on [datapopalliance's SDG data](https://github.com/datapopalliance/SDGs), which offers SDG data in a machine-readable format and on [Cytoscape.js](https://js.cytoscape.org/) for the graph visualization.