I have a list of constraints that are input by user in a HTML form and passed to a PHP page, as in this picture:
Each constraint is an array, containg all the x1,x2... values and the type of constraint (less than, equal or greater than), and the value of the right side after the constraint type.
How could I draw a graph based on those constraints with PHP, like the one in this picture:
That is, I'd build a code to solve the equations separately and draw the solutions (results) as segments in the graph, creating a region limited by the segments, as shown in the second picture.
Is there a way to implement there with D3.js? I'm new with JavaScript but it seems this library is useful for it, but I'm totally lost, since I'm only finding things that are really complex, like plotting scatter plots with input data that contains hundreds of elements. Any help?
Related
I'm working on a project where we have some Highcharts graphs populated from database; one of them is an scatter graph and we need to surround the points placed on the outside area of the graph.
We need a graph like this but we need the area surrounding the outside points of the scatter; is there a easy way to do this with Highcharts?
We need it to work on IE11 (client's specs).
We can do it with a new polygon serie to make by getting it from codebehind or from database, but that may take too much development time and will slow down the queries. So we need to know if there is an easier way to do it via Highcharts or Javascript
Thanks in advance.
I am not very familiar with Highcharts, but i could not find such functionality in their API. However there is an easy algorithm to solve your problem.
All you need is to have an array containing the border elements and connect the points from this list like here.
Finding those points is not too hard. Compute the linear equation between two extreme points (like the one on the very top and very right). The resulting formula looks like f(x) = m*x + b
Now you check for all points within that x-range if their y-coordinate is higher than this line (or lower when doing it with the point on the very bottom). If so just add them to your border array and continue with the other extreme points.
I would like to create a force directed graph, but i need it to stay the same every time it is generated (with the same data).
Is there any way to do this using d3.js?
UPDATE:
I found working solution, which is based on using seeded random number generator
// set the random seed
Math.seedrandom('mySeed');
You could by modifying D3's force layout, or by creating your own layout based on it. There are at least 3 places where randomness (Math.Random) is used in the positioning of nodes (there may be more, given the force layout references other code). You would have to eliminate all randomness in order to get the graph to display in the same way each time:
https://github.com/mbostock/d3/blob/master/src/layout/force.js
However, this would hamper how the layout works – it's using randomness to sort itself out into a legible diagram quickly. If your number of nodes is small, then it probably wouldn't be an issue, but a large number of nodes could just end up a tangle.
I have two network graphs but placing both of them next to each other is the easiest way to compare if the graphs are small. But as the graph grows, it is making hard for the user to compare the views. I wanted to know the best way to merge two graphs and show the comparison.
In the above picture it can be seen that no of nodes are same but the way they are linked is different.
I would like to know how to present the compared data.
Any ideas about different views to present such comparison using d3.js.
I would suggest not trying to apply force layout or similar method for drawing graphs (that would draw the graph in a fashion similar to the on in the picture in your question). Instead, I wold like to suggest using circular layout for both graphs (similar to chord diagram):
This visual example is made for other purposes, but similar principles could be applied to your problem:
Layout all vertexes on a circle, in equidistant style (if there are some vertices belonging only to one of two graphs, they can be grouped and marked different color)
If there is a link between two vertices in both graphs, connect them in one color (lets say green)
If there is a link between two vertices in one graph only, connect them in appropriate color, dependant on a graph (lets say red and purple)
This method scales well with number of vertices.
Hope this helps.
Following methods for network comparison could be useful in the current scenario:
NetConfer, a web application
Nature Scientific Reports, an article guiding comparisons
CompNet, a GUI tool
I have a table that makes extensive use of the features in Google Charts' Table Chart, notably, sorting by selected column and color gradients.
I'd like to add a sparkline column. Can anyone suggest methods for doing so? Google Sparkline doesn't appear to be at all integrable.
The only method I've come up with (I haven't tried it) is to create a set of images and set them as the CSS background, one cell at a time. Blecch.
I also have a need to show something like a pie chart or stacked bar per row in a column - something that shows gross proportions of the parts of a whole, with three to five parts. Here also, the Google chart tools don't integrate into Table, AFAICT.
Answers that suggest a different library that doesn't include Google table are fine - as long as the level of effort isn't too much higher, and a similar level of documentation is available.
I agree with Larry K regarding remembering the requirement to store/access the set of numbers that represent the points on your sparkline.
In terms of inserting it to the table, consider the image line charts api. You can easily generate sparkline images once you have the relevant set of numbers for them, and can embed the image url into a table cell, allowing it to render by specifying the allowHtml option in the table chart.
So, just making a cell with <img src='google.com?params=2&whatever=3' /> should do the trick.
You would write your own data formatter to display the sparkline rather than the contents of the cell.
The next issue is to access/store the array of numbers that you want to represent by a sparkline. -- Remember that a Sparkline represents a set of values, it does not represent a single column/value.
There are several ways to solve this problem--eg store the number set as a string; store a key that would be used to look up the number set; or the formatter could use other values in the same row to determine the number set.
Added On second thought, it is not clear if you have access to a generic formatter that can return arbitrary html as the format for the cell's data. I thought you did but perhaps not.
I don't know where this question goes, if it belongs in math, then someone should move it there.
I have a set of yes/no data (0s and 1s), what possible ways could you visualise this, apart from the normal pie charts and the like.
I want to do this in Javascript (edit: jquery would be easier), using AJAX with PHP.
Radiobuttons or Checkboxes are usually used on webpages to display Yes/No choices. Another option would be to use images like a green check mark to display a positive value and a red cross to display a negative value.
There are many ways to display data. Are you looking to show it as a graph? If so, try google charts API.
Just the binary choice with no other criteria? (time, location, etc.)
A two element bar chart, two shapes (circles?) in different sizes and colors (like a disjoint Venn diagram), or a pie chart immediately comes to mind.