Веб-трехмерный точечный график (XYZ / RGB) с использованием CSS или Canvas

Ну, я пытаюсь изобразить значения RGB, чтобы я мог легко знать, что ставить в качестве значения K для теоремы о значении Kmean.

Но я пытаюсь понять, как мне построить график своих трехмерных данных. Прямо сейчас я пытаюсь использовать css3 и -webkit-transform: translate3d (x, y, z); имущество. Но у меня проблемы с визуализацией того, каким должно быть каждое вращение и все такое.

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

Я полностью готов использовать систему, которую кто-то уже создал с холстом и т. Д. Я видел только графики с java или flash.


canvas css 3d scatter-plot
person MLM    schedule 16.01.2012    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете просмотреть демонстрацию здесь: http://jsfiddle.net/MadLittleMods/yhCpf/

Чтобы добавить баллы, следуйте инструкциям ниже для каждого цвета:

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

Например, если у вас были цвета 255, 85, 89, то есть # FF554F. Ваша точка зрения была бы такой:

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

Причина, по которой вам нужно выполнять сложение и вычитание, заключается в том, что начало координат на плоскости находится не в 0, 0, 0, а в 251, 251, -124.

Обновление (2013-11-9):

Вот (0, 0, 0) потрясающая трехмерная ось, которую я сделал. Включает трехмерные стрелки, указывающие в положительном направлении на каждой оси.

Демо

Также ознакомьтесь с этим веб-приложением, которое я сделал, которое показывает трехмерное тело, определенное некоторыми уравнениями (не динамическими) с некоторыми элементами управления поворотом и масштабированием: http://apps.visualpulse.net/calculus-solid/

person MLM    schedule 16.01.2012