I am searching for a way to build a multi-edge graph with Javascript.
The edges have to be different in color and thickness. Data for building it comes from a json file.
I already looked into d3.js, But the forced layout isn't what I am looking for, so please don't link my question to solutions with forced layout!
The treelayout offers no multiple edges or does it?
Any other way to get 5 edges between every node wich show a different grade of flow?
Sorry for my bad English.
Related
I went through the documentation and saw the examples given, but couldn't find anything related to the pattern that I want to display. Can anyone help me out how to make such network diagram in Vis.js or D3.js?
Basically I am working on an Angular project, after exploring a lot on google, reached to the conclusion of using Vis for the same. I need to make an interactive network diagram, where I can add delete nodes, select a particular node based on some actions performed. Please help me out, am I choosing the right library and
If not, what would be the better option?
If yes, then how can I achieve this?
I have to implement some graphs in a project I am building. I am currently studying what graph solutions I have, as I do not plan to code the graphs from scratch.
I ran into GraphJS and it seems to have everything I need. I should mention that the graphs are not complex in data they hadnel, but in the way they looks. Therefore we reach the question: can the tooltips of the axis be customised? I have to implement something like this
Better said, I need every second day in a 30 days span to not be displayed, but in its place to be shown a grey line. It is possible to achieve something like this with ChartJS?
I have read the documentation, I have not wrote any code as I am looking to find the proper library to use. On the same note, I do not seek an answer from someone providing me code, merely a "yes" or a "no".
I've got some homework tasks in topic surveys and diagrams. The first task is to normalize the input of a survey, because the structure of the data is changing from time-to-time.
So there are three types of surveys:
static fields, where text is stored
dynamic ones, where the user can select one option
and multiselect fields, where the user can select multiple options
So I'm not really a statistics guy, so I have really no idea what I can do with that incomming data.
So the data I have is stored in an huge XML file from there I can easily get how man times a survey was filled, and how many times a field was filled, so I can (for eg on a pie chart show the relation of filled or not filled).
The second idea is to show the relation between the content of a multi option element using a bar chart or so.
In case of the multi option elements I've got the idea to show data in implication of one option.
But the question is, what could be shown?
The other problem are the static elements (text fields and so). What data could be represented from a single field?
The data in the XML field is collected from 2001 to 2005 So maybe I can work with the dates of the surveys, but as I said, I don't really know how to process the data, to collect as much as possible, to create a really great amount of diagrams.
After normalizing your data (which could be more difficult than the visualizing part of your job), you might do the followings:
To show your static fields, which contains texts, you could recode theese text to new variables containing fewer categories, which could fit on a graph/plot. Another way is to make word clouds of the texts - like on wordle.net.
The dynamic fields, each containing only one answere, could be the easiest to display. You could make a pie chart to show the percentages of the attributes, or rather a bar chart which could also display percentages/densities or frequencies (e.g. see the ggplot2 package in R).
To display the multiselect fields, you should restructure the date to the appropriate format (I do not know how it looks like now). This could be done by different tables, that show the counts (frequencies) for every categories in all variables. E.g.: 187 people ate choclate, 160 ate bread and 50 people ate pizza yesterday. You could then show the values by a barchart easily. Look out for: the sum of theese vaules will not equal to the sample size, as anyone could select multiple values, so a pie chart would be a really bad choice.
I hope I could help.
I would not recommend pie charts. Use bar charts or dot plots instead. It is much easier to distinguish similar frequencies for different categories in them. Ordering the categories by frequencies in them is almost always a good idea, too. Here you can find a short article about why Pie Charts Are Bad.
3D diagrams might look nice and are a neat way of impressing people with little knowledge about data visialization (which might be what you need ;-) ). But they are considered bad practice by most experts, because using extra dimensions, which are not absolutely needed, distracts the reader from the actual data.
Personally I think that crosstables and scatter plots are pretty self-explanatory ways of displaying relationships between two dimensions of data.
It is often a good idea to report some basic statistics along with diagrams, but make sure you only do this when it's appropriate. See this Wikipedia article if you want to learn, which univariate statistics (like a mean for example) are appropriate for which data.
If you seriously want to learn about data visualization, I can highly recommend the books by Edward Tufte about the topic. They are really a pleasure to read. While they stand on a solid scientific base, they are easy to understand, even with little or no background in the field.
Good luck,
Alex
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.
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/