I have created my visualization similar to the http://mbostock.github.com/d3/talk/20111018/tree.html. I wish end users to be able to search for node/data/label from the tree. Since I am not good with javascript I am finding quite hard to create such search functionality.
Here are my requirements: End users can type text like 'cluster' (flare->analytics-->cluster) and type enter. The visualization highlights cluster and shows to the end users.
If it is possible could you share the code using jsfiddle?
Not sure if this question is still valid but a D3 node tree version that I found that really helped is this one:
Jake Zieve's "Search Collapsible Tree
Let me know if this helps. The code should be pretty similar to the one you attached. Either way, let me know if this will lead you on the right path.
Related
I am new to coding and wanted to get some hands on practice with a project I have in mind. Here it is:
Let's say you have blank page and on the side of a screen you have several items you can choose to draw on the blank page. For example the background can be mountains, the ocean, a forest etc. On top of that you can place a house, a church or another selectable element. Whatever you like.
It is like a picture editor where you can put together a picture with different pre-given elements. Or like in video games where you can create your own character.
What would I need to build a web application for that kind of thing?
This link should get you started but it won't be the complete answer to your question - http://www.webdesignerdepot.com/2013/08/how-to-use-html5s-drag-and-drop/
Essentially, you can achieve your image dragging and dropping using similar techniques. It will require a bit of Spike work from yourself, and looking into how HTML5 can handle drag and drop. I discovered this resource fairly quickly and I think the solution you want isn't as complicated as you may think, it just requires a bit of know-how regarding drag and drop operations within HTML5 :-)
Also, there may already be some JavaScript based API's that do this sort of thing easier but I'm not too aware - I suppose starting this way could be a great introduction for you and you may wish to expand once you've done some work for it :-)
Hope this helps you and your coding journey!
Please help me create diagrams like these: (I tried, but stuck on setting up force layout)
Here is an implementation of ordinary D3 tree with "FISH" data:
The challenge is: How do we get diagram below from diagram above? (but without "hardcoding" of coordinates; this means, there is a need for applying force layout, or similar method)
Complete tutorial can be found here.
You should also read documentation for tree layout.
I don't know javascript (unfortunately) and I'd like to make a mindmap-like "organization chart" similar to this one:
This map should have an ability to zoom-in and zoom-out similar to google maps, and the ability to arbitrarily connect nodes. So it is more like a free graph, not like an ordinal tree. Mindomo makes this pretty well, but it is commercial and flash-oriented.
Does anybody know of a similar solution?
My research pointed me out that this could be a svg sketch, possibly generated offline, or maybe something using canvas. A click on the node should redirect to some web location.
Google maps is good because it also hides some details, and so should do this graph map in zoomed out projection.
A few important questions:
Do you need this generated in real time based on some underlying dataset?
Aside from zooming, should the user be able to manually open/close nodes?
You can manually generate this simply using some free tools:
MindMeister
xmind
freemind
although non-traditional, can you consider using Prezi?
creating simple charts with BIRT is easy, but now I would like to bring some more life to them...
imagine a simple line chart. Let's define as a requirement, that the maximum value should be highlighted. A further requirement would be that if the user clicks on this data point, something happens.
How can I solve this?
I can imagine that I could created a second value series which consists only of the highlighted data points.
But it would be nicer if there was a JavaScript API (or even a server side java api) with which I could loop through the data points and add a highlight on the fly. Is this possible?
I think I've found a good starting point:
http://www.birt-exchange.org/org/devshare/designing-birt-reports/276-birt-chart-scripting-dynamic-markers-and-datapoint-colors/
Now I have to find a way to add on click events to certain data points...
In flex, I use IBM ilog Elixir to display network topology graph.
I maintain an xml file which in turn populates nodes and links arraycollections for Diagram to display.
Now, through Diagram Editor I perform some modification on diagram and hit save. I want to get all the nodes and links on editor to modify xml file while saving.
How can I achieve it?
I got the solution from other forum.
diagram.Graph gives us whole graph currently held in underlying Diagram.
so, now you can access graph.nodes and graph.links to get edited values.