Gender Color Preference DataViz

by Admiral Potato

HTML

<script src="http://admiralpotato.github.io/js/npos3d/build/npos3d.min.js"></script>
<div id="ui">
    <p>Data totally lifted from here:<br /><a href="http://www.datapointed.net/visualizations/color/men-women-color-names-d3/" target="_blank">His And Hers Colors:<br />Popular Color Names By Gender Preference</a>;<br />Credit for the data goes to Stephen Von Worley.<br>3D vizualization by <a href="http://nuclearpixel.com/" target="_blank">Admiral Potato</a>.<br />Scroll to zoom, click and drag to rotate</p>
    <input type="button" value="Sort by rgb" name="rgb" />
    <input type="button" value="Sort by gender" name="gender" />
    <input type="button" value="Sort by hue" name="hue" />
    <input type="button" value="Sort by hue alt" name="hueAlt" />
    <input type="button" value="Sort by popularity" name="popularity" />
    <input type="button" value="Sort by gender prism" name="genderPrism" />
</div>
<div id="dataText">green|40be3c|17.50|57.97|blue|2e57ce|16.58|54.98|purple|8d2eb0|15.06|57.44|pink|e95aaa|7.748|56.59|brown|895625|4.457|58.17|red|d42026|3.955|59.44|light blue|61bbe3|3.905|57.20|teal|30b69f|3.893|50.90|light green|7be56c|3.297|60.78|gray|919590|3.256|53.97|orange|ea791f|3.142|55.70|magenta|ce2097|3.007|51.19|yellow|e9e32e|2.615|56.66|sky blue|58b7e7|2.504|44.85|lime green|75e82a|2.309|41.66|lavender|b480d7|2.248|39.78|turquoise|2ec9b3|2.232|51.29|violet|9034bc|2.187|54.49|light purple|b56cd7|2.008|60.09|fuchsia|d425a8|1.896|35.42|aqua|36d5bf|1.658|43.39|tan|cead67|1.562|53.14|dark blue|1d277c|1.548|58.80|cyan|3cdeda|1.531|69.64|dark green|246325|1.530|64.70|forest green|296f2a|1.491|44.76|mauve|aa5e88|1.427|41.77|bright green|38e82c|1.404|39.07|lilac|b67cd7|1.254|33.07|olive|81942f|1.203|50.38|dark purple|521c5f|1.128|58.43|royal blue|2325b8|1.126|37.02|maroon|831c34|1.115|55.82|hot pink|ee229a|1.038|39.46|salmon|ea766b|1.007|49.30|yellow green|afe12e|0.9960|46.55|beige|d8c385|0.9816|51.83|periwinkle|8280de|0.9813|23.79|navy...

CSS

#ui{
    font-size: 11px;
    font-family: sans-serif;
    color: #fff;
    position: fixed;
    z-index: 10;
    padding: 4px;
}
a,a:hover{
    color: #f00;
}
input{
    display: block;
    width: 128px;
    margin: 4px;
    border: 0;
    border-radius: 8px;
    background-color: #ccc;
    cursor: pointer;
}
input:hover{
    background-color: #fff;
}
#dataText{
    display: none;
}

JavaScript

var n = NPos3d,
    s = new n.Scene(),
    scroll = 0,
    scrollHandler = function(e) {
        e.preventDefault(); //OSX 10.7 bouncy scrolling, I loath you
        scroll = e.detail || e.wheelDelta;
    },
    manual = false,
    manualFlip = function(event){
        event.preventDefault();
        manual = event.type === 'mousedown';
        shiftKey = event.shiftKey;
		lastX = s.mpos.x;
		lastY = s.mpos.y;
    },
    changeSortHandler = function(event) {
        globalState = event.currentTarget.name;
    },
    lastX = s.mpos.x,
    lastY = s.mpos.y,
    data = false;
window.addEventListener('mousewheel', scrollHandler, false); //Chrome event binding
window.addEventListener('DOMMouseScroll', scrollHandler, false); //FireFox event binding
s.canvas.addEventListener('mousedown', manualFlip, false);
s.canvas.addEventListener('mouseup', manualFlip, false);
$(document).on('click', 'input', changeSortHandler);


var loading = new n.VText({
    string: 'Loading...'
});

s.add(loading);

var dataControl = new n.Ob3D({
    scale: [15,15,15],
});
s.add(dataControl);
var dataHolder = new n.Ob3D({
    //scale: [0.05,0.05,0.05]
    scale: [20,20,20],
    shape: {}
});
dataControl.add(dataHolder);

var animationController = {
    update: function() {
        //dataControl.pos[0] = s.mpos.x;
        //dataControl.pos[1] = s.mpos.y;
        if(manual){
            dataControl.rot[1] -= (lastX - s.mpos.x) * deg / 2;
            dataControl.rot[0] += (lastY - s.mpos.y) * deg / 2;
        }
        
        if(scroll !== 0){
            dataControl.pos[2] += (scroll / Math.abs(scroll)) * -25;
            scroll = 0;
        }
		lastX = s.mpos.x;
		lastY = s.mpos.y;
    }
};
s.add(animationController);

var globalState = 'popularity';
//ref: https://raw.github.com/sole/tween.js/master/src/Tween.js
//var easingMethod = TWEEN.Easing.Quadratic.InOut;
var easingMethod =  function ( k ) {
    if ( ( k *= 2 ) < 1 ) return 0.5 * k * k;
	return - 0.5 * ( --k * ( k - 2 ) - 1 );
};
var...