Scatter Plot 3D for Web Application

问题

I am looking for a Scatter Plot 3D component for a Web application. Right now I am using JMathPlot (inside a Java Applet) to produce something like this:

alt text http://jmathtools.berlios.de/lib/exe/fetch.php?media=scatterplot3d.png

JMathPlot is fine, but is missing some required functionality (I am especially interested in having tooltips for the plot points).

Are there any alternatives? Any interactive web technology (javascript, java applet, flash, silverlight) is fine. The user should be able to rotate/zoom the plot and see the tooltips, when hovering the mouse over a point.

回答1:

There are several simple 3D engines for both silverlight (eg. http://www.markdawson.org/Kit3D/ or http://www.codeplex.com/aXelerateSL3D) and flash (list here) given that you know either ActionScript, VB.NET or C# it should be easy to create such a chart yourself.

Version 10 of flash even has a built in simple "3d engine":

Flash Player 10 allows xyz translation and xyz rotation of 2D surfaces on the x, y, and z axes. Flash Player 10 also displays the perspective and camera angles you set to create 3D-like effects.

That's probably all you need to quickly built it yourself.

Since JMathPlot is open source, adopting it for your needs could be another option.

回答2:

You might also want to look into Processing. They may not have ready-made components, but there are thousands of good source-code examples on the web.

回答3:

James Black's suggestion to use the canvas tag, is a very good one, but it requires a non IE updated browser. Or does it? Thanks to google, you will be able use the Chrome Renderer within IE. This way you'd target HTML5 enabled browsers (Gecko, Webkit and Presto) with your dynamic graphs, and ask IE users to install Google's Add on once it comes out. canvas works cross browser thanks to native support in everything non-IE, and to Google's Explore Canvas plugin for IE. SVG support is also available cross browser thanks to some plugins for IE. Note that if you require the Chrome Renderer for IE, you don't need anything else.

You could either use canvas or svg to do the graphs, and there are already some libraries to do so. Both technologies allow you to create dynamic graphs, but they have some different approaches.

SVG                                        canvas
-------------------------------------------------------------------------------
Has scene DOM (SVG DOM, though)            Single HTML element, 
                                           rendering script-driven
Deals in shapes                            Deals in pixels
Somewhat hard to mix with HTML (not XHTML) Behaves like an image in both
Event handling easy                        Event handling hard

I'd think that I'd go with SVG to do what you want, as it will be dead simple to add dynamic labels to it, but it will be hard to create a truly flexible API for pseudo 3D scatter plots.

The problem with svg is that by attempting to make a very flexible language, you have a very complex one. Here you can see code written in both libraries that do the same thing.

SVG

var rect = document.createElementNS(SVG_NS, "rect");
rect.setAttribute("x", "5");
rect.setAttribute("y", "5");
rect.setAttribute("width", "20");
rect.setAttribute("height", "20");
rect.setAttribute("fill", "red");
parent.appendChild(rect);

var poly = document.createElementNS(SVG_NS, "polygon");
poly.setAttribute("fill", "green");
poly.setAttribute("points", "-40,40 0,-40, 40,40");
parent.appendChild(poly);

Canvas

with (ctx) {
  fillStyle = "red";
  fillRect(5, 5, 20, 20);
}

with (ctx) {
  fillStyle = "green";
  beginPath();
  moveTo(-40, 40);
  moveTo(0, -40);
  moveTo(40, 40);
  closePath();
  fill();
}

回答4:

FlashAndMath have some interesting libraries for this sort of thing:

http://www.flashandmath.com/advanced/contours/combo.html

回答5:

You could look at just doing this with the canvas tag, and for any updated browser, except IE, you could get tooltips, as it has events just like any other html tag.

You can get most of the functionality on IE using excanvas, I just haven't had luck drawing text.

It isn't a library, but it would provide you the capability to work just in html with javascript.

回答6:

The 3d scatter plot from canvasXpress offers a JavaScript and Canvas alternative. http://canvasxpress.org/scatter3d.html

来源：https://stackoverflow.com/questions/1405352/scatter-plot-3d-for-web-application

标签

scatter-plot