So I'm working on a project that will, in the end, generate a kind of flow chart using the Flickr api. You will supply a seed tag, and the program will use that seed tag to find other related Flickr pictures that have common tags...
I have all of the back end stuff up and running but I'm stumped on the formatting. Here is a screenie of what I would like it to look like...
Here's my question. Is there a good way of approaching the spacing of each branch? By this is mean, I would like to have a function where I could simply create a new node (or "branch") and specify which existing node I would like it to attach to. This is all good and fine, but I need to be able to automatically and intelligently place the new node on the page so it doesn't overlap any existing lines or nodes. I guess this is more of a general programming question as if I knew the process I could code it, but for those who are interested I am doing this in Javascript/HTML/CSS for the styling and maybe some PHP for the Flickr calls.
Feel free to ask any questions to clarify my rambling.
You could use a spring model between the nodes. Each node exerts a repelling force against every other node. Allow all the nodes to push against each other a certain number of times and you'll come up with a reasonable solution. You'll want to have a couple limits to make sure nodes don't go flying off into space and that you don't oscillate between a couple similar states.
Implementing it in Javascript/PHP is left as an exercise for the reader.
An alternative is to use a graph layout program such as GraphViz.
I look forward to seeing the results of your project. I agree with scompt about using graphviz.
Related
I'm working on a force directed graph for a university project. We have to create a 'research archive' that presents all our research material – I've started mine here as a digital garden using Maxime Vaillancourt's Jekyll digital garden template (which uses d3). You can view it here.
Part of the reason I started with this was I was using obsidian for a while, but wanted a) it in a website format, c) something I could easily share with my tutors etc, and c) more customisable options than obsidian). Maybe it's a bit of an obsidian hang-up, but I really want to be able to add 'tags' to entry, e.g. by theme, or by entry type (so different tags for images, journal articles, primary research, etc). I'm struggling to find answers relating to this, and think maybe I'm too stuck on the idea of 'tags' and not thinking through other ways people might be expressing/phrasing something which achieves the same thing.
Ideally, I'd like these to be a toggleable feature, e.g. click a sidebar button to view all entries tagged with XYZ.
However, I was also thinking it could work through different styled/coloured lines that show connections by tag (so an entry would have, say, bold black lines to other entries they're linked to; a dashed grey line to ones that are also tagged with 'photograph'; a dotted blue ones to ones that are also tagged with 'health'; etc). Or, giving each entry only one tag, and that tag denoting the colour of the node.
The reason I am keen on this, is I would like to be able to show different 'levels' of connections, but at the moment am struggling with the 'difinitiveness' of the single line. I know for some people who use Obsidian as a zettelkasten tool they're into using links effectively as tags (e.g. having a list of 'tags' at the bottom which are in effect links), but a) I don't think this really works in the same way, and b) it requires creating full entries for themes or tags that might not naturally need one (going back to the photograph example - this work around would require creating a separate .md file titled 'photograph' which people would be able to navigate to, which would either mean I'd have to write some forced entry for this, or people would inevitably stumble on lots of dead pages.
I'm not expecting someone to come and fix my problem, but more ideas on what sort of features could work. I am self taught at a lot of this stuff, and so in particular often struggle with knowing what it is I am looking for/asking for – like I lack the language, even though I'm often able to actually work out how to do things once I've got on the right track.
In case anyone is ever stuck in a similar position –
I was managing to do a lot of the things I wanted on fiddles, but not via the template above. For some reason, I could get it to there being no errors/problems in the console log, but it just wouldn't actually 'work' (ie, there was a search bar, but typing into it wasn't performing the right functions, etc). I'm sure a more technologically capable person could work out what was the clash between the template and my edits that was causing this. But, after lots of trying, I stumbled upon https://github.com/jackyzha0/quartz – which so far already has a lot of things I wanted semi built in, and so far seems a bit more receptive to edits in this way.
My research has found me powerful libraries like paper.js which are quick to show all the next-level awesome stuff they can do, but I'm not sure how (or if) I can accomplish a basic task:
I want to present a simple Stick Figure to my user:
o
\|/
/ \
Then let them grab the ends of the lines ("hands and feet"), and drag them into different positions, leaving the connecting nodes ("shoulders and hips") intact.
Simple.
In short, what is the simplest way to draw something with lines and nodes that users can manipulate.
Requirements:
Some line lengths are fixed, others can be lengthened.
Some nodes are fixed, others can be moved.
I need to at least display the angles of the lines, but ideally can modify those angles (via text input).
I feel like this shouldn't be this hard, but as I said, most libraries skip the basics and go straight to their coolest features, while any search for "edit vector nodes" and the like brings up lots of irrelevant results about node.js...
Probably you must have found the solution, but since it is unanswered, I thought of posting about a fantastic library I know.
The library is konva.js. You can find demo application references on site itself.
It features powerful set of functions to create custom shapes and layering support(In fact there is lot more). You can easily modify the properties of any shape, add animation and more.
You can find documentation here.
Essentially, I had this idea in my head for a sort of evolution simulator, not exactly like Conways Game of Life, but the one part where they do match is that they will both be based on a square grid.
Now, personally, I like working in HTML+Javascript+ for simple apps, since it allows fast UI creation, and if you're not doing something computationally heavy, then JS in a browser is a decent platform.
The problem I'm trying to solve right now involves drawing and updating the grid. I might be missing something, but it seems like there is no easy AND computationally light way of doing this for an 80x40 grid. The easy way would be to generate a div with absolute position and a specific background color for any square that is NOT empty. However that can become very slow with anything more than 60-70 colored squares.
I'm definitely willing to switch to a different language if the situation calls for it, but first I just want to know I'm not stupidly missing out on an easy way to do this with HTML+JS.
Answer should include either one of the following:
a) A reasonable way to draw and update a 80x40 grid ( where the squares change color and "move" ) in HTML+JS
b) Another language that can do this reasonably fast. I would prefer to avoid having to spend a few days learning DirectDraw or something of the sort.
Why not build the grid as an HTML Table? After all this is what you want?
Give each cell a computed id and create some javascript functions to update them. Shoudlnt be a problem at all.
You could look at the new canvas tag in HTML 5 but from what you've said I dont think you need it.
<canvas> seems to be the right way to do this. A library like Raphael will help you avoid cross-platform issues. Another options is Processing.js, but it does not work in IE.
For a small grid (< 100x100), use a table and give each cell an ID for fast access.
For bigger grids, you should consider using a canvas object or embedding an Java or Flash applet.
I want to build a tool (with HTML5, JS and CSS3), which helps customers to arrange elements on a website mockup (e.g. text blocks and pictures). I want to save the position of these
elements in order to reconstruct the whole mockup website later.
Maybe a grid system would be the best?
alt text http://img.skitch.com/20090817-t4p54kbxw3rj58mkmqxspj4qch.png
I would be happy to get some ideas on approaches for this challenge. Are there any similar projects, I should take a look at?
Regards,
Stefan
YUI has lots of widgets for this sorta thing with lots of examples.
Drag & Drop: Examples
Especially this example
Drag & Drop: Using Interaction Groups
All you would have to do register a listener on the drop event to send an ajax request to the server and save the xy co-ordinates.
ALSO, if you want to do resizing as well
Resize Utility: Examples
They have a few really neat examples, including this image cropper
ImageCropper Control: Real Time Crop Feedback
The jQuery framework would help you in synchronizing the JS and DHTML events. As far as other projects that use this, I'm not aware of any, but a grid model seems like a good way to go. Just make sure it's more precise than the 125px you currently have :)
EDIT: The website that was mentioned in the DHTML book I mentioned in my comment was http://www.panic.com . You can take a look at their JavaScript code for some inspiration, as they implement a drag and drop system for downloading their products.
Not sure if it'll help, but my "PanelManager" might make things a little easier (if you're not already using a larger framework with similar functionality):
DP_PanelManager
"Panels" are just normal DOM elements with extensions for common actions/modifications (moving, resizing, etc). Panels can exist within one or more "PanelManagers" which allow you to treat them as a single unit (sorting, looping, etc).
Look at the example "Drag-and-Drop with Ordering" for a simplified example of (what I think) you're looking for. You would then need to do the same kind of looping to save whatever information you want (probably just name and position).
In any case there might be some code there you can rip out - feel free to fold, spindle and/or mutilate.
As a keen windsurfer, I'm interested in how windy the next few weeks are going to be. To that end, I've been writing a little app to scrape a popular weather site (personal use only - not relaying the information or anything) and collate the data into a single graph so that I can easily see when's going to be worth heading out.
I have the back end working but need a way to display the data. My scraper currently gives me two series of data which tell me how strong the general wind is and how strong it's likely to gust to. What I'd like to do next is display those two data sets as a pair of lines in a graph and shade the region between them.
I was considering using something like the flot library to display the data. The only problem is that I can't see a way to shade an area between two lines?
If anyone has suggestions of how to do this in flot or other libraries or graphing techniques (I have DJango on my server so anything pythonic or javascripty should be fine), I'd be interested to hear them. Ideally this will be a javascript solution to avoid having to serve up images.
Take a look at the Google chart API's. They make this sort of thing pretty easy. Without some example code, I would have a hard time giving you an example, but Google has nice one on the docs.
You should check out Dojo. It looks like it'd be pretty easy for you to do, just plot the bottom line with the same fill color as the background. That should get you the effect you're going for.
http://dojocampus.org/explorer/#Dojox_Charting_2D
I'd use open flash chart, you just have to create a JSON with the data and then you've to all the flashy coolness in your page....
http://teethgrinder.co.uk/open-flash-chart-2/