I'm building a modeling tool that contains 2 sets of sliders -- one set that changes the amount per month payment (at top), and one set that shows user the date their debt is paid off (bottom), effectively so that changes to one can be seen in the other:
modeling tool http://doufeel.com/model.png
I was able to use jQuery UI slider to generate the payment data that creates the line graph at the bottom (using D3) but now I realize that I will probably need to create both sets of sliders in svg using either D3 or Raphael to make this work smoothly. I'm hoping to find someone who has addressed this, perhaps created something similar and might be able to advise on the best approach. Thanks in advance!
Need to support older browsers? Use Raphael. If not then D3.
Related
I'm working with a small group to build an interactive interface that will render a list of nodes and show how they are connected, almost like how some database modelers are. This is within a pre-existing application, and we will have up to a couple thousand data points that should be able to be dragged.
Some people have mentioned using a canvas element or packages like Konva.js or D3. I'm wondering if options like using a canvas or React-Konva would be able to handle something like this, or if we would need to go with an alternative like D3 or something else. Does anyone have any experience or knowledge about this?
It depends on what exactly you are going to draw and what kind of interactivity you needed. For Konva it may be hard to handle a thousand data points. But there are many Konva Performance Tips to improve the performance.
If some parts of your drawings are static, you can use layers or node.cache() method to boost the performance.
The only good way to know if a tool (Konva, D3 or anything else) is good is to make a prototype version of your app. Make a very simplified version with a lot of objects with every framework/library. And see what works best for you.
Summary
I wonder if anyone else has had this requirement and could steer me in the right direction. I am currently working on getting a chart library implemented for a crosstab BI that allows multiple groupings on the X axis.
Example
The functionality I'm trying to achieve works¹ in Spotfire as shown here (dev data, not live!):
With the colours representing the columns from the crosstab:
¹ - the rendering of the labels is a bit funky, but the grouping works
Requirement
I am looking to replicate this in (at minimum) JavaScript, preferably with a premade React library if possible. I'm currently looking at d3 and in particular Nivo, as this has a nice aesthetic that has appealed to the team, but this appears to be limited to grouping only on 2 levels (for the example above, I could group by Country, but I am then unable to group by gender as a sub-group).
What I've tried
My solution so far is to merge the remaining layers, so for example in the France group we'd have Male - Not Tested, Male - Mutant, Male - Wild Type, etc. The problem this presents is that I need to allow up to 6 levels of grouping - the example shows 3 levels. (6 levels is rare, but I need to allow it as a requirement)
Plan
My next steps if I can't find a library to do it, is to branch off Nivo and try to modify it to implement it myself, but of course as we all know, this conflicts with the time we have to implement this. I would really appreciate hearing from someone that has had to deal with this before, and what solutions you came up with.
I think you need to checkout AmCharts, it offers one of the best charts libraries with a very rich API that allows you to perform several combination
here's an example for nested Value Axis but you can also generate similar thing for XAxis
https://www.amcharts.com/demos/multiple-value-axes/
I am trying to make a browser-based tool that lets you inspect dependency graphs as they appear in module systems of programming languages and Makefiles.
I am looking for a visualization framework that does the drawing for me.
The requirements are that the toolkit can
label nodes (and hopefully edges)
automatically space out the graph to the right size (I don't have to guess good dimensions) given that I have infinit space (scroll bars are fine)
layout the graph nicely so that it doesn't look as messy
be fine with <= 5000 nodes
run with JS only (no Flash or desktop apps)
Optionally, it would be nice if it made it easy to move nodes around and highlight or hide parts of the graph for better overview.
It does not matter much what backed is used (SVG, canvas, all fine).
I have looked at quite a few libraries so far (especially from Graph visualization library in JavaScript), but not found a fitting one yet:
d3 is nice but the only node-graph it delivers is a force graph, which is focused on real time physics. Once loaded, you have to wait and watch for the physics engine to stabilize. I don't need animations nor the Force, and want to show the graph right away.
GraphDracula's examples are pretty much what I am looking for, but already with 70 nodes and 400 edges, the drawing performance becomes really bad. It also has very little documentation (being a 35 line code example).
Do you know something that meets my requirements? Thanks!
In a commercial scenario you might want to consider yFiles for HTML:
Regarding your requirements it can:
Add any number of labels to nodes and edges
Provide virtually infinite scrolling/panning/zooming area
Layout your graph automatically using a great variety of automatic layout algorithms. For dependency graphs, the Hierarchic Layouter is very well suited
works nicely on desktop browsers with larger numbers of nodes. Depending on the visual complexity and graph structure, 5000 elements might proove difficult with todays browser implementations, though.
It's a pure Javascript library with no dependencies whatsoever
Uses SVG as the main backend, but can also leverage Canvas
The library is well documented, which is necessary given its complexity
Here is a screenshot showing some of the above features in action - the layout was calculated automatically:
Disclaimer: I work for the company that creates the library. On SO/SE I do not represent my employer. This is my own post.
Dagre works pretty well for graph layout (horizontal/vertical alignment, labels, etc.) and has D3 renderer.
https://github.com/cpettitt/dagre-d3 (check images at the end)
https://github.com/cpettitt/dagre
I would like to know about the available js libraries for drawing multilevel trees. Some functionalities I'd like to add to the created tree would be to make the nodes click-able and to be able to select an area on the graph and do actions based on the selection.
Maybe you should try arbor.js?
I'd check out Protovis. I've had good success with it. However, it is a very general library, giving you lots of building blocks to make nice graphs, but it won't be a turnkey solution.
Is it possible for someone to give me a few pointers on how to display a multidimensional array in the form of a bar graph?
The array is multidimensional, with three elements in each part - and the elements are determined by a HTML form.
So if it is possible to display this kind of array in the form of a bar graph in Javascript on a standard HTML site, i'd appreciate some help!
Thanks
Check out Flot and MilkChart. The former extends jQuery, the latter MooTools. Both use the canvas element, which is now supported by all the major browsers (even IE with the inclusion of an extra script). Take a look at the reputation tab in your stackoverflow profile to see it in use. I've used Flot (haven't tried MilkChart) in a project before and while the manner you pass data into it can seem a bit unintuitive at first, you'll find that it is actually pretty powerful for a non-flash charting solution. Flot also defines custom events that you can use to define chart interactions. Flot supports stacked bar charts with a plugin, and I believe you can do clustered bar charts with it as well.
You could always go with some sort of declarative graphics solution using div elements as bars in a graph, but that's not as easy or consistent across browsers as drawing charts with the canvas.
If you are leery of either of those solutions you could send the data to a service to return a static image. The Google Charting API supports grouped bar charts, or you could use some service you host yourself.
My recommendation is the first solution using the HTML canvas, specifically leveraging Flot since that is the library I have the most experience with and can vouch for. Maybe someone else has some comments about MilkChart.
EDIT:
Another library I forgot to mention is PlotKit which extends MochiKit. I haven't used it but apparently it supports not only the charting using the canvas element but also supports charting using SVG. Scalable Vector Graphics offer you another declarative graphics option beyond hacking a solution using HTML, however I'm not sure how crossbrowser an SVG based solution would be (particularly in IE).
EDIT:
Here is a jQuery plugin which charts using div elements. I personally don't like this option because I think it is more complex and less easily configurable than some of the other options. I feel like using HTML elements to create complex declarative graphics (while impressive) is sort of a hacked solution and will, in my experience, cause problems at some point.
According to the documentation, both Flot and MilkChart only work in IE if the excanvas extension is installed.
For greater portability, I suggest checking out the Google Visualization API which is incredibly simple to use and has many different display possibilities. Visualizations are rendered as either flash elements (interactive) or as plain images (static).