Thanks to visit codestin.com
Credit goes to github.com

Skip to content

robly78746/d3Vis

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

36 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Custom D3 Visualization

Modified from source code from How to Make an Interactive Network Visualization

Setup

  1. Clone or download this repo

  2. Set up a Python environment with Python 3.4

    • You can download Python 3.4.3 here and use virtualenv to create an environment
    • Or you can download Anaconda here and create an environment with most of the packages installed. Navigate to the setup folder and run
    conda env create -f environment.yml
    activate python34
    
  3. Install python packages

    1. Navigate to setup folder of this repo and run
    pip install -r requirements.txt
    
    1. Run
    pip install pygraphviz-1.3.1-cp34-none-win_amd64.whl
    
  4. Install CasperJS

Usage

Configuring the Visualization

  1. You can browse graphs by running a python server and opening the web page in a browser. Place your dot files in data/dot. Run
convertDotToJSON.cmd

This will generate a data.json containing the names of the json files and place the json files in a folder called json. You will need to run this every time you update or add new files to the dot folder.

  1. In the top directory, run
runServer.cmd

This command assumes you are running Python 3 or higher. This will run a server on port 8000 by default. You may change this port number in runServer.cmd if you wish.

  1. In a browser, you should be able to see the webpage at http://localhost:8000/ webpage

  2. From the page, you should be able to view each json file listed in data.json. If you generate new json files, you can hard reload the page to force the browser to grab the new data.json by opening up the console and holding down the reload button. hard reload

Generating SVG's

  1. Once you've decided on the configuration, copy the link to the graph to your clipboard by clicking "Link To Graph".
  2. Paste the link in the first line of data/casperSVGGen.js and save the file.
const exampleURL = 'http://localhost:8000/?graph=&layout=radial&movement=static&filter=all&sort=alpha&charge=1221&linkdistance=103&linkstrength=10&radius=44&layoutradius=285';
  1. Run
convertJSONToSVG.cmd

This will make requests to the server with each of the json files listed in data.json and save each graph to an svg in the folder svgs.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published