Ask HN: Wanted – a D3.js mentor
4 comments
I was in the same boat, but I stumbled upon 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
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.
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.
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 - 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)
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.
- 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)
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.
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!
Cheers!
Metacademy are doing something similar for Machine Learning and related areas. The code is open source too - https://github.com/metacademy/metacademy-application
Here's an example visualization: https://www.metacademy.org/graphs/concepts/red_black_trees#f...
Here's an example visualization: https://www.metacademy.org/graphs/concepts/red_black_trees#f...
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.
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.
This sounds like exactly what http://stackoverflow.com was designed for.
Another D3 powered lib is C3.js - it can make charting a bunch easier
Or at least, I'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.
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's a really, really slow process.
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.
I'm willing to negotiate how this works, and money or other recompense.
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't actually want control, or maybe they aren't interested in the objectives, I don't know. So this request for a mentor is trying a different approach to get the project bootstrapped.
Do you know D3? Can you provide the feedback and hints/assistance I need?
Please let me know: topicsinmaths (at) solipsys.co.uk
Or if you can think of a better approach to get the help I need, feel free to tell me I'm an idiot, and what I should be doing instead!