I am looking for recommendations to visualize points on a scale on a web page. A Gauge type of representation, as provided by Google, or a bullet chart as provided by Protovis seem to be good candidates. But perhaps there's more. (Or perhaps there are some libraries that do something similar that I haven't seen yet.)
I would suggest looking at some of the things you can do with Raphael and g.Raphael. It is a great pure JS library that lets you do the charts you suggest and a lot more. The interaction you can add with it is pretty interesting.
Related
I'd like to achieve something similar to this diagram using d3:
https://gojs.net/latest/samples/records.html
I was trying to look it up on the web but I hardly found any resources to get started with.
I'm quite new to d3 so I don't know how to approach this task, any help or guidance would be appreciated!
This is another one of those questions where people need to implement a sophisticated diagram visualization and they think just because D3 is a lot about visualization, it will be a good fit.
IMHO it is not.
D3 could be a part of the solution, but it certainly cannot be the solution alone: It's almost like asking whether JavaScript can be used to create this kind of diagram. Of course it can! D3 is just a very thin (but very useful) layer on top of the DOM+JavaScript, that can help you with crunching numbers, work with colors, coordinate systems, create DOM elements, and simplifies working with the DOM. Think of it as jquery for DOM and data plus a lot of very nice demos. But the value very often is in the demos, rather than in D3 itself: You need to implement a lot of things to get from a simple mapping from data to dom elements to a sophisticated diagram visualization like the one you are referring to.
If you don't want to implement and maintain most of the low-level diagram logic yourself, you should rather be looking at a diagramming solution, rather than a tool that will help you create SVG elements elegantly with less code.
Look at this question to see a list of graph and diagram visualization software. Agreed, D3 is also on this list (for the same reason you are asking this question), but there are also far more capable tools on that list that you should be looking at, my recommendation being either the one that you've found already or preferrably this one if your requirements are more sophisticated.
I have looked at d3.js, but it seems to not work well for large data sets. I might try to switch from svg to a canvas and see the effect, does anybody have any insight on how well this works for large data sets.
Or should I look into vivagraph.js or another graphing engine?
Additionally I saw similar posts on the same question, but the answers were from 3 years ago, so I'm looking to see if anything new is better.
Thanks
Depending on your definition of large, D3 might still work for you. If you leverage canvas, you can get to the low thousands of nodes and 10,000 or so edges:
http://bl.ocks.org/emeeks/e330141d1279c6115a3a
http://emeeks.github.io/introspect/block_block.html
If you're dealing with more than that in the browser, there are some interesting solutions on the horizon that use WebCL and WebGL like https://github.com/Superconductor/superconductor that can do massive networks and edge bundling and such.
I've been trying out different JavaScript based charting options. I love Highcharts but also wanted to take a look at gRaphael. I've found that the gRaphael documentation is really lacking and the efforts of kennyshen also do not cover a lot of the things. As a result, I'm having a ton of problem charting with gRaphael. Could someone point me to a robust documentation?
Also can I achieve similar charting with only Raphael? If so, can someone point me out to a tutorial of sorts. My primary requirement is bar/column charts.
I would recommend you to use Rgraph (http://www.rgraph.net/), which is easy to implement and well documented with lots of examples.
I've done a decent amount of research on JS charting libraries. I personally think High Charts and jqPlot are the best looking with adequate documentation. You can take a look and see what you think:
jqPlot Doc:
http://www.jqplot.com/docs/files/usage-txt.html
High Charts Doc:
http://www.highcharts.com/documentation/how-to-use
Where can I find tutorials to produce data representations on the web with gRaphael? There seem to be no documentation on line.
Many Thanks
I really would recommend against graphael just from personal experience. I looked at it and got stuck several times during my implementation (ex, simple things like axis labels require hacks like setting text at specific spots), and the physical x-axis scaling/ticks that is visible (at least for bar charts that I've tried) don't seem related to the data, as if there is some internal axis that you can't see. I could not find a single graph example that actually had even the minimum # of components a professional graph has (labels, legends, etc), so for me it's just a prettier 'sparklines'. All in all, a lot more trouble than it's worth, plus any documentation you find will be minimal at best.
I would look into jquery options (great documentation and easy browser support for js)
highcharts is #1 if it's for personal
use, very beautiful, interactive,
and easy to use
flot, nice looking though not as
interactive or as many options
jqplot, inspired by flot. this is my
current choice. there's a huge
amount of stuff you can do with
this. interactive and professional
looking, looks like a good sub for highcharts if the licensing fee is too much.
Flash charts (beautiful but flash is a no-no these days):
Open flash charts - It's not too bad
to implement and I used it before I
decided to switch to jqplot. Very
nice looking charts, but my graphs
needed to grab data from the server
more dynamically, and I decided js
was a better option to do it.
Amcharts - easily make good looking
graphs via XML data.
There doesn't seem to be that many beginner tutorials, but here's a couple of reasonably introductory text with examples:
http://www.treutech.com/42/visualizing-data-jqplot-graphael,
http://articles.sitepoint.com/article/graphael-javascript-graphs,
http://blog.jeremi.info/entry/creating-a-chart-with-raphael-js-from-a-google-spreadsheet
I know there has been several discussions on JavaScript chart/graphics libraries, and there is many out there. What I need is one that can:
Zooming and panning
Data point manipulation (like when click on a data point, highlight other data points within the data series with the same certain parameter of the clicked one)
Dynamically change data point values (e.g.: dragging a data point dynamically updating the line shape)
Error bar support, horizontally and vertically
Select data points on the chart
Seems like Flot may have most of the features, if not all(not sure about 3, and 4), but would like to see if I don't miss out on there nice libraries.
Check out the awesome Visualization API on Google's AJAX APIs Playground
Take a look at http://raphaeljs.com/ library.
It has a plugin called gRaphaël which is charting plugin.
Look good but personally didn't use it.
Good luck and share you expirience if you try it.
The Dojo Charting Engine has a pretty astonishing featureset. Sadly dojo seems to suffer from a general lack of evangelism.
I dont know if there are good introductory tuts, maybe the best way is to learn from examples.