D3.js - Plot a directed graph, in a chart showing axes, custom labels in every axis, and custom design in the arrows (shape of connectors)

Cancelled Posted Jul 31, 2015 Paid on delivery
Cancelled Paid on delivery

The title says it all:

I need to know how to plot a directed graph, in a chart showing axes, every node drawn in a specific (x,y) position, custom labels in every axis, and custom design in the arrows (shape of connectors).

I mean, if I say a node must be placed in position (2,3) in a coordinated chart, the xaxis label of position 2 is named "texttwo" and the yaxis label of position 3 is named "textthree", then if I look at my chart and I look for (texttwo, textthree) position I'll see my node's name.

I'm attaching an image of the kind of chart I want to do. As you will see, a symmetry appears when drawing the connectors that way (like an ∫), and that's what matters the most. So the custom arrows is the first thing I need. The ability to give a number to groups of labels in the Y axes is a bonus (if not, then differentiate it with different colors or some other way), take a look at the attachment to get an idea.

NOTE: I don't want you to draw the same chart attached. It's insane. I just need to be able to do it myself. I'll ask you to draw a very simple version of a chart like that, only a few nodes. I need to be sure that your chart works.

It must also trigger events when hovering over the connectors, and also over the nodes.

I've read about D3.js and it seems to be a very powerful library, but you must read and learn first. That takes time that I don't want to spend.. So do you know how to do it in [url removed, login to view]

If you can do this with another Javascript library, go ahead!

Think you have all the data needed to draw the chart.

node's names

node's x axis positions

node's y axis positions

node's connectors (line) thickness

node's connectors (line) style

node's connector direction: bi-directional or not.

Example:

This is not it, but it goes something like this..

<connection bi-directional="true" thickness="bold" style="dashed">

<node type="start" name="start node" xaxis="3" yaxis="5"/>

<node type="end" name="end node" xaxis="11" yaxis="13"/>

</connection>

I'm all ears.

Ps: there are some extra features I need. If you know how to do it, then I'll give you extra money.

This will probably need some tweaking into the core of D3, so I need you to have those skills. To know how to tweak the core of a library, I mean experience in that.

Dthreejs

Project ID: #8180664

About the project

3 proposals Remote project Active Jul 31, 2015

3 freelancers are bidding on average $85 for this job

prashantdawar

i printed out the chart. loves insanity. I loves to have some data to design, model and test things for myself first. get connected soon.

$83 USD in 3 days
(0 Reviews)
0.0
vamzee

Hey I have 5 years experience in python. I am data visualisation developer and familiar with d3js. I would like to know more details about the project to finish the project earlier

$88 USD in 2 days
(0 Reviews)
0.0
sushilaitian

A proposal has not yet been provided

$83 USD in 3 days
(0 Reviews)
0.0