poderopedia / panama-network

PANAMA NETWORK

version 0.2.2

PANAMA NETWORK is a data visualization library that allows you to create and manage network visualizations. It is focussed to presenting in a transparent way the contact networks of individuals and organizations from the information collected by the user. It was originally conceived to display information corresponding to the 2014 Panama elections. PANAMA NETWORK is a free open source software (see LICENSE) developed by Pablo Navarro and Gregorio Moreno at Masega Ltda. (http://www.masega.co) for the Poderomedia Foundation (http://www.poderomedia.org). You can fork this project and deploy it with your own modifications. Please see the LICENSE file for details.

Features

PANAMA NETWORK basic functionalities include:

• Displaying a force layout from information contained in a JSON file (see the Documentation for precise format instructions) .
• Customizing the appearance of the layout through basic CSS.
• Zoom and drag behavior.
• Embed functionality.
• Fullscreen display.

Documentation and Examples

You can find a complete documentation in the PANAMA NETWORK repository. Please, follow the links below:

• Index
• Documentation and Examples
• Embed Example
• Fullscreen Example

Usage

PANAMA NETWORK was developed using D3.js. The fullscreen functionality was implemented using Modal windows from Twitter Bootstrap. Overall design and craft by Masega. To create a network chart, you need to include the following:

• [D3.js]
• Bootstrap (for modal and fullscreen)
• pty.js and pty.css

The style of the visualization can be customized by modifying the pty.css file. See the docs for usage examples.

Contribute and Get Help

If you would like to contribute to PANAMA NETWORK or need some assistance, please open an issue or do a pull request. We will do our best to answer and include your changes when possible. You can also write to the Poderopedia Team

License

PANAMA NETWORK was developed by Pablo Navarro and Gregorio Moreno for Poderomedia Foundation (Copyright 2014). It`s available under MIT License. See LICENSE.md for details.

Contact

Poderomedia Fundation: [email protected] Masega Data Visualization: [email protected]

panama-network's Issues

Example: Fullscreen

Add an example of how to implement fullscreen. One option is to use a modal from bootstap, and set its size to 100%.

http://getbootstrap.com/javascript/#modals-sizes

Add zoom behavior

Add zoom behavior to the visualization:

• Button for zoom in/zoom out.
• Drag cursor.

Check simple CSV / D3 structure conversion

I just spoke with @mihi-tr, who authored D3topo (https://github.com/FFM/d3topo) for simple CSV / D3 structure conversion (related to our future iteration).
Check code line 56 at
https://github.com/FFM/d3topo/blob/master/index.html#L56 to see how he did it.
What do you think?

Example: Embed

Add an example of the embed window.

• Create a modal window with a text input field.
• In the text input, there should be the code for embedding the visualization in another page.

Add readme and demo

@poderopedia/goodfellas remember to add the Readme details and demo

Move the controls group backwards

The controls are hidden by the nodes, the controls group needs to be moved backwards to avoid the issue.

Add a clickable node name

• Add a clickable node name in the bottom left corner of the page.