Tuesday, January 27, 2015

3D Scatterplot Online, XYZ Plot in Javascript


Background

I'm an engineer by trade and by education. In my role I spend large amounts of time summarizing and presenting data to other people, usually engineers. Data comes in a variety of forms, and each form has a different way to be displayed. Information Visualization is an entire field of study on it's own. There are many software packages that have the ability to create charts and graphs. Some of them, like Microsoft Excel, are heavily used in almost every company. Other, more specialized, packages are often bought by a company to provide additional functionality.

One frequent type of data I use is called "xyz" data. I often just want to quickly chart a bunch of points in 3D space. Oddly enough, most standard software does a poor job of graphing "xyz" data. The default format for "xyz" data is a long list of rows where each row represents a point, and each point has three entries; one for each of x, y and z values. Excel won't chart this data unless you "pivot" the data into a different format. Other packages will chart the data from that format, but the chart controls to rotate, resize, zoom in and out, etc are kludgy at best.

The Idea

Since I need the xyz scatter plot so often, and sometimes in unusual places, it would be great to have an online interface to quickly paste some data and present a simple chart that can be rotated and scaled in real-time. Is that really too much to ask?! My Google-Fu is pretty good and I can't find anything online. How has no one done this yet? I've found contingency table calculators online that require a Chi table lookup. Most people in my industry don't even know what that IS despite it's usefulness. I don't want a free download, or an R script or an excel hack. I need to copy and paste my data and look at a plot in under a minute.

So I have to do it myself. Writing something server-side would be the fastest. I really like ColdFusion for this exact purpose, but that's not very common and I'd have to pay for some hosting. Maybe I will someday. My next natural inclination is to use JavaScript since it is client-side and available EVERYWHERE. But JavaScript doesn't have native graphics without using some kind of extension or additional package. Well, that was true until HTML 5, now we can use the canvas element to draw and display graphics natively in the browser.

Progress

01/27/2015 - First I created a static canvas of 2D points. Then I added the ability to import 2D points from a textarea html element. I added functions to project 3D points onto a 2D viewing plane then added buttons to modify the viewing angles. That took me a few hours. Next time I will add automatic scaling and chart annotations to give the chart some perspective. In the future I might add the ability for axis title and data labels, but that is a ways off.

02/10/2015 - Added automatic scaling and centering of chart, and the ability to make manual changes. Added corner points and XYZ reference lines. Once again it took me a few hours. Next I will add back-planes, gridlines and axis value labels.

02/21/2015 - Shading and grids are done. Shading helps a little, but perspective is needed to make the orientation clear. Also, drag to rotate would be helpful. I didn't want this to be a full-blown 3D project, so I'll probably stop here. I have what I needed; quick and simple 3D scatter plot.

Your browser does not support the HTML5 canvas tag.
Rotation Settings
Rotate By:     deg
X Rotation: deg
Y Rotation: deg
Z Rotation: deg
Axis Settings
 MinMax# Intervals
X Axis
Y Axis
Z Axis
View Settings
Marker Size: px
Zoom: %
Paste xyz data below, separated by tabs, commas or spaces, then click "Import".

No comments:

Post a Comment