Frengraph

A pretty pointless project made by Ed using d3 to make a cool looking graph!
See the Github Project for the source code!

Additionally, I used the Breadth-first search (BFS) algorithm for the "Frenpath" section.

Rationale

I got bored. I wanted to learn how d3 works cause Quartz uses it. So I made this! Thank to Loren for the inspiration.

How do I use it?

Make a txt file
Structure it like the example below
Upload
Tada!

Formatting for .txt files

        GroupGroup1Name - #Group1hexcode: Person1
        Person2
        Person3

        Group Group2Name - #Group2hexcode:Person4
        Person5
        Person6

        Links:Person1 - Person2
        Person1 - Person3
        Person4 - Person1
        // Reverse links work too!Person1 - Person5
        Person1 - Person6
        Person3 - Person4
        Person2 - Person3

Example .txt file

        Group AwesomeAdams - #2f54eb:
        John Smith
        Jane Doe
        Alex Johnson
        
        Group BrokenBrendans - #fadb14:
        Michael Brown
        Emily Wilson
        Daniel Lee
        
        Links:
        John Smith - Jane Doe
        John Smith - Alex Johnson
        Michael Brown - John Smith
        John Smith - Emily Wilson
        John Smith - Daniel Lee
        Alex Johnson - Michael Brown
        Jane Doe - Alex Johnson
        Alex Johnson - Jane Doe

Note: Green represents essential things for the .txt file.

Another Note: Links in the "Links:" section must include people that are listed in any of the groups above.

How does it work?

User selects .txt file. (see button on the right!)
.txt file is converted to a .json file with a specific format.
This file is then given to a d3 script, processing the .json file into a graph!
The script reads a group's designated hex code and the members of the group to create the "nodes" object. It uses the links to create the "links" object. d3 does the rest!
Using the Breadth-first search algorithm, the shortest path between two people can be calculated.

Try it now!

psst click the button below!

Click me :)

Icon