Web 3D Scatter Plot (XYZ / RGB) using CSS or Canvas

StackOverflow https://stackoverflow.com/questions/8875372

  •  28-10-2019
  •  | 
  •  

Question

Well, I am trying to graph RGB values so that I can easily know what to put as the value of K for the Kmean value theorem.

But what I am trying to figure out is how I should graph my 3 dimensional data. Right now I am trying to use css3 and the -webkit-transform: translate3d(x, y, z); property. But I am having trouble visualizing what each rotation and stuff should be.

echo '
    <div style="width: 500px; height: 500px; background: #ffffff; -webkit-transform: perspective(800); -webkit-transform-style: preserve-3d;">
        <div style="-webkit-transform: rotateZ(0deg); -webkit-transform-style: preserve-3d; position: relative;">
        <div style="-webkit-transform: rotateY(-45deg); -webkit-transform-style: preserve-3d; position: relative;">
        <div style="-webkit-transform: rotateX(-15deg); -webkit-transform-style: preserve-3d; position: relative;">
';
            foreach($Kmean_array['clusters'] as $key_cluster => $cluster)
            {
                foreach($cluster['points'] as $key_point => $point)
                {
                    echo '
                    <div style="position: absolute; opacity: .2; width: 4px; height: 4px; background: #', $Kmean_array['chosen_centroid']['hex'] ,'; -webkit-transform: translate3d(', $point['rgb']['r'] ,'px, ', $point['rgb']['g'] ,'px, ',$point['rgb']['b'] ,'px);"></div>
                    ';
                }
            }
echo '
        </div>
        </div>
        </div>
    </div>
';

I am totally up to using a system that someone has already made with canvas, etc. I have only seen plots with java or flash.

Was it helpful?

Solution

You can view a demo here: http://jsfiddle.net/MadLittleMods/yhCpf/

To add points follow the guidelines below for each color:

Red: 251 - {Your Red}
Green: 251 - {Your Green
Blue: -124 + {Your Blue}

For example if you had the color 255, 85, 89 which is #FF554F. Your point would be:

<div class="point" style="-webkit-transform: translate3d(-4px, 166px, -35px); -moz-transform: translate3d(0px, 170px, -39px); -o-transform: translate3d(0px, 170px, -39px); -ms-transform: translate3d(0px, 170px, -39px); transform: translate3d(0px, 170px, -39px);">
    <div class="face one"></div>
    <div class="face two"></div>
    <div class="face three"></div>
    <div class="face four"></div>
    <div class="face five"></div>
    <div class="face six"></div>
</div>

The reason you have to do the adding and subtracting is because the origin on the plane is not at 0, 0, 0 instead it is at 251, 251, -124

Update (2013-11-9):

Here is (0, 0, 0) awesome 3D axis I made. Includes 3D arrows pointing in positive directions on each axis.

Demo

Also check out this web app I made that shows a 3D solid defined some equations (not dynamic) with some rotation and zoom controls: http://apps.visualpulse.net/calculus-solid/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top