

Ask HN: Wanted – a D3.js mentor - ColinWright

I have underway a long-term project to try to map math in a way that hasn&#x27;t been done before.  I need a front end, but people with the skills I need are either not answering my calls for assistance, or are too busy.  So I&#x27;m going to have to do it myself.<p>Or at least, I&#x27;m going to have to get a rudimentary version working so I can then gain momentum.  But I really have no desire to become a web developer - I have enough things to do - so I need to so just enough.<p>But researching on the web is slow, because tutorials take you through the steps they think you need, concentrating on things I already know, and not explaining the bits I need.  I need a core, and then very specific extra bits, and it&#x27;s a really, really slow process.<p>So what I need is someone of whom I can ask quick and simple questions to get just the knowledge I need, when I need it.  I need someone with experience in D3 to give me the nuggets, so I can then do the monkey work.<p>I&#x27;m willing to negotiate how this works, and money or other recompense.<p>Previously I tried to get people interested in this by explaining where it was going, and giving them some control over how it works.  Maybe people don&#x27;t actually want control, or maybe they aren&#x27;t interested in the objectives, I don&#x27;t know.  So this request for a mentor is trying a different approach to get the project bootstrapped.<p>Do you know D3?  Can you provide the feedback and hints&#x2F;assistance I need?<p>Please let me know: topicsinmaths (at) solipsys.co.uk<p>Or if you can think of a better approach to get the help I need, feel free to tell me I&#x27;m an idiot, and what I should be doing instead!
======
tmaly
I was in the same boat, but I stumbled upon
[http://www.jsgraphs.com/](http://www.jsgraphs.com/) most are based on d3 and
they simplify using it. I just picked the one that had the features I needed

~~~
ColinWright
Thanks for the reply ...

I've spent _hours_ searching for a clean example that has the features I want.
I can't believe that what I want is new, or even unusual, and yet I can't find
an example to copy and mutate.

I want

* text boxes containing a small amount of text - about 10 words - that are connected by arrows;

* force directed layout, with the ability to drag boxes, and in some cases pin them in place.

* Buttons to click on the arrows with call-backs that adjust the underlying data

* Buttons to click on the boxes with call-backs that adjust the underlying data

I find it hard to believe no one has done this, and I find it hard to believe,
looking at all the D3 stuff out there, that this is difficult. Many, many
hours of searching is making me doubt my beliefs.

~~~
potatosareok
Hi Colin - I had to implement something with d3 force before that might be
kind of similar. I hadn't used d3 before so my solution is pretty hacky.

\- [http://bl.ocks.org/mbostock/3750558](http://bl.ocks.org/mbostock/3750558)
\- for basis of pinning nodes.

\- setting CSS marker-end attribute on the line to get arrow (based off this
example but in the end I didn't need as fancy as them so I just set it on all
.link instead of dynamically:
[http://bl.ocks.org/mbostock/1153292](http://bl.ocks.org/mbostock/1153292))

I basically throw my data into there and let force directed work it out. Then
I manually pin any of the nodes I want and basically have a save
functionality, so next time I load the graph, any pinned nodes are back in the
same place. I'd share the code but it's work and besides which, it's pretty
simple (each graph has an id, there's a db I have where I store (id) =>
text(string(graph => json))).

As for boxes of text it shoudn't be too different then with circles - I
personally went with onHover using qTip.s for extra data (my node are either
circle or some custom images, and they all have a text besides them that is
server fqdn).

Not entirely sure where you want the buttons to be in this graph though.

~~~
ColinWright
That's definitely part of the solution I need - thank you for that. I'll take
a copy and see if I can munge it with some of the other things I need.

Cheers!

------
pramodliv1
Metacademy are doing something similar for Machine Learning and related areas.
The code is open source too - [https://github.com/metacademy/metacademy-
application](https://github.com/metacademy/metacademy-application)

Here's an example visualization:
[https://www.metacademy.org/graphs/concepts/red_black_trees#f...](https://www.metacademy.org/graphs/concepts/red_black_trees#focus=0svwl3x5&mode=explore)

~~~
ColinWright
That is _very_ nice, and certainly has a good half of the things I need. It
would be an excellent base, if only I can understand enough of it to enhance
it the way I need.

My fear is that it is already sufficiently comprehensive that I won't be able
to make the changes I need, but it's an excellent example to show people part
of what I'm aiming at.

Many thanks - very useful. I've noted it, and will look to evaluate it soon.

Cheers.

------
mzjs
This sounds like exactly what
[http://stackoverflow.com](http://stackoverflow.com) was designed for.

------
edoceo
Another D3 powered lib is C3.js - it can make charting a bunch easier

