Developed by Hyunwoo Park.

This web app aims to provide a minimalistic simple interface to visualize a network.

Last updated:

• Made with
• d3.js v5
• jQuery v.3.4.1
• Bootstrap v4.4.1
• Bootswatch v4.4.1
• See also
• Visual SCM
• Bicentric Diagrams
• ecoxightClosed Beta
• pulseClosed Beta

Data Format

You need to prepare the data as a json file. Here are a few example json files you can refer to: simple, simple but with options, reasonably complex.

Except for the following reserved fields, you can set any attributes for nodes and edges. They will be shown in the tooltip when you mouseover the object.

• nodes Fields
• idrequired Unique identifier for nodes, and used as text label if label field does not exist.
• labeloptional Text label for nodes. Default = id
• sizeoptional Node size. Default = 6
• groupoptional Used for node color unless node color is specified. Supports up to 20 groups. Default = 1
• coloroptional Overrides group-based coloring, and the data should be in the format of #FFFFFF. No default value.
• links Fields
• sourcerequired Source id for the edge.
• targetrequired Target id for the edge.
• valueoptional Edge weight. Default = 1

Data Upload & Load

This app allows you to use your data uploaded on Dropbox.

1. Once you prepared a json file, upload it to any Dropbox folder.
2. Right click on the file and select "Copy Dropbox Link" option.
3. The copied URL should look like https://dropbox.com/s/vn98nq1g5fn6dkk/miserable.json?dl=0.
4. Open a new tab and type in the address bar https://hyunwoopark.com/netview/?[THE_URL_FROM_STEP_3]. Be sure to type "?" question mark before copying and pasting the URL from the previous step.
5. Try this example URL: https://hyunwoopark.com/netview/?https://dropbox.com/s/vn98nq1g5fn6dkk/miserable.json?dl=0.