Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/topogram/topogram.github.io
Website for topogram
https://github.com/topogram/topogram.github.io
Last synced: 5 days ago
JSON representation
Website for topogram
- Host: GitHub
- URL: https://github.com/topogram/topogram.github.io
- Owner: topogram
- Created: 2015-01-23T10:29:00.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2021-02-04T09:27:14.000Z (almost 4 years ago)
- Last Synced: 2024-08-01T12:28:24.850Z (3 months ago)
- Language: HTML
- Homepage: http://topogram.io
- Size: 6.55 MB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-starred - topogram/topogram.github.io - Website for topogram (others)
README
# Topogram
**Topogram** is a web-based app to visualize the evolution of networks over time and space.
[![Build Status](https://travis-ci.org/topogram/topogram.svg?branch=api)](https://travis-ci.org/topogram/topogram)
Try it online at [app.topogram.io](https://app.topogram.io) or install your own.
### Features
- Time-based navigation in graph
- Network layouts + geographic data
- Online/real-time data update via API![Screenshot Topogram](img/Topogram-Network.png)
## Input data
Currently, the simplest way is to input data is to use the [Python API client](https://github.com/topogram/topogram-api-client) to push data directly into the database.
```python
from topogram-python-client import TopogramAPIClienttopogram = TopogramAPIClient("http://localhost:3000")
# create a new network
topogram.create_topogram("Awesome viz of geo-time network")# add data
r = topogram.create_nodes(topogram_ID, [...nodes])
r = topogram.create_edges(topogram_ID, [...edges])```
## Data format
### Nodes
You can add geographic and time information to the nodes.
| Name | Type | | Description | Example |
|--- |--- |--- |--- |--- |
| id | String | required | Id of the node. Should match node Id provided to the edges | 'My node 1' |
| name | String | optional | The name of the node | 'Michael' |
| lat | Float | optional | Latitude (in degrees) | -6.7589 |
| lng | Float | optional | Longitude (in degrees)| 105.8671 |
| start | Date | optional | When the node started existing (Json ISO format) | 2010-08-03T10:00:00.000000 |
| end | Date | optional | When the node stopped existing (Json ISO format) | 2010-09-02T10:00:00.000000 |
| color | String | optional | Color of the node | '#555000'|
| weight| Float | optional | Weight of the node | 4 |
| group | String | optional | Some category to classify the node | 'male'|
| notes | String | optional | (Markdown) Additional info about the nodes | '# Title' |See the model in [/imports/api/nodes/Nodes.js]()
Example of mapping using the Python API Client :
```python
node = {
"id" : str,
"name" : str,
"lat" : float,
"lng" : float,
"weight" : float,
"start" : datetime,
"end" : datetime,
"notes" : str
}
```### Edges
Edges require a source and target. When source node or target node are absent from the data, the edge will be ignored.
| Name | Type | | Description | Example |
|--- |--- |--- |--- |
| source | String | required | Id of the source node (required) | 'My node 1' |
| target | String | required | Id of the target node (required) | 'My node 2' |
| id | String | optional | Id of the edge | 'My edge 1' |
| name | String | optional | The name/label of the edge | 'Loves' |
| start | Date | optional | Date when the edge started existing | 2015 |
| end | Date | optional | Date when the edge stopped existing | 2012 |
| color | String | optional | Color of the edge | '#555000'|
| weight| Float | optional | Weight of the edge | 4 |
| group | String | optional | Some category to classify the edge | 'male'|
| notes | String | optional | (Markdown) Additional info about the edge | '# Title' |See the model in [/imports/api/edges/Edges.js]()
Example of mapping using the Python API Client :
```python
edge = {
"source" : str,
"target" : str,
"weight" : float,
"notes" : str
}
```## Visualization
Once you have created your topogram, it will be available at the list at the address [/topograms]() of your server. You can click on the title to access
### Panel Selector
The main visualization is divided between 3 panels :
* network graph
* geographical map
* timeline![Topogram Panels](img/Topogram-panels.png)
You can toggle each of these panels by using the panel selector. When no geo or time element are detected, the checkboxes are disabled automatically.
### Side menu
By clicking on the title, you can access the main menu to manipulate and edit your topogram.
#### Map background
Change the tiles of the map according to your needs.
#### Network layout
Different layouts are available to display your graph. Try different options to see what fits you best.
#### Node Radius
Different options are available to display the nodes. It can used the degree of the node in the graph or a user-defined weight (if you assigned it in the data).
### Selection mode
When the selection mode is activated, you can click to highlight specific elements of the graphs.
## Download & Install
You need [Meteor JS](https://www.meteor.com/) to install Topogram.
git clone https://github.com/topogram/topogram-client.git
cd topogram-client
meteor npm install
meteor