Your task is to write a code that receives data relating to three objects: Boxes, Line connectors between the boxes, and PopUps in the JSON format as described below.
Object Creation (Vertical timeline): create a vertical timeline according to the Boxes, stating next to each box the number of days from box to box.
Objects Creation (Box): create objects according to the Type. Dimensions, color etc, will be defined for each type: Inventor (Circle of radius 150px), Ownership (rectangle 190x72), Security (rectangle 190x72), License (rectangle 190x72), 3rdParty (rectangle 190x72).
Objects Creation (Connection): create objects (curvy connections with arrowheads that start at the middle bottom of StartID box, ends at middle top of EndID box) according to the Type: Ownership (red,), Change Name (blue), Security (yellow), Release (green, arrowheads in each side of the line), License (purple), License Cancellation (light purple, arrowheads in each side of the line)
Vertical Location: position each box on a vertical timeline according to the Execution Date.
Horizontal Location: the screen is to be divided into three vertical flexible (depending on content) segments (from left to right: Ownership, Security, Licenses/3rdParty). Each box is to be horizontally positioned in one of the three segments according to its Type.
Hovering over a Connection will show a tooltip according to Type: Ownership (ASSIGNMENT OF ASSIGNORS INTEREST), Change name (CHANGE OF NAME), Security (SECURITY INTEREST), Release (RELEASE OF SECURITY INTEREST), License (LICENSE), License cancellation (LICENSE EXPIRATION)
Clicking a Connection will open two popups at the top right corner of the screen, one below the other. Each popup has a unique id: ASSIGNMENT-ID. The content of each popup is to be retrieved according to the popup’s parameter.
Legend: at the right top corner create legend with checkbox controls next to each Box types and Connection types that would show and remove the corresponding objects. See attached example.
***In order to qualify for this project, you must include in your proposal a link to a flowchart that you have created using D3.***
Please feel free to ask any questions.
26 freelancers are bidding on average $34/hour for this job
Hello i am very interested in your post project. i am sure i can provide you perfect result since i am D3 js expert. please call me dmitrii. looking forward to working with you . best regards
I hope to see you in chat. I am an experienced d3js developer with full-stack knowledge and career. I'm sure I can do this perfectly. Thanks for your kind attention.
Hi, I am interested in your project. I have 7 years of experiences in web development. So I can help you and am ready to start now. Looking forward to hearing from you soon. Regards