Web 3D Scatter Trama (XYZ / RGB) usando CSS o tela

Question

Bene, sto cercando di grafici a graficamente i valori RGB in modo da poter facilmente sapere cosa mettere come valore di K per il teorema del valore Kmean.

Ma quello che sto cercando di capire è come dovrei rappresentare graficamente i miei dati tridimensionali. In questo momento sto cercando di usare CSS3 e -WebKit -Transform: Translate3D (X, Y, Z); proprietà. Ma ho difficoltà a visualizzare ciò che ogni rotazione e cose dovrebbero essere.

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>
';

Ho totalmente di usare un sistema che qualcuno ha già realizzato con tela, ecc. Ho visto solo grafici con Java o Flash.

Answer 1

Puoi visualizzare una demo qui: http://jsfiddle.net/madlittlemods/yhcpf/

Per aggiungere punti seguire le linee guida seguenti per ogni colore:

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

Ad esempio, se hai avuto il colore 255, 85, 89 che è #FF554F. Il tuo punto sarebbe:

<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>

Il motivo per cui devi fare l'aggiunta e la sottrazione è perché l'origine sul piano non è a 0, 0, 0 invece è a 251, 251, -124

Aggiornamento (2013-11-9):

Ecco (0, 0, 0) Asse 3D fantastico che ho fatto. Include frecce 3D che puntano in direzioni positive su ciascun asse.

Demo

Dai un'occhiata anche a questa app web che ho realizzato che mostra un solido 3D definito alcune equazioni (non dinamiche) con alcuni controlli di rotazione e zoom: http://apps.visualpulse.net/calculus-solid/