D3 Examples - Hexakis Icosahedron

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
    .cool-point {
        fill: none;
        stroke: #33e;
        stroke-width: 1.5;
        stroke-opacity: 0.33;
    }
​
    .hot-point {
        fill: none;
        stroke: #f33;
        stroke-width: 1.5;
        stroke-opacity: 0.33;
    }
​
    .balance-point {
        fill: none;
        stroke: #333;
        stroke-width: 1;
        stroke-opacity: 0.33;
    }
​
    .graticule {
        fill: none;
        stroke: #333;
        stroke-width: 0.125;
        stroke-opacity: 0.66;
    }
​
    .cool-edge {
        fill: none;
        stroke: #33e;
        stroke-width: 5;
        stroke-opacity: .25;
    }
​
    .hot-edge {
        fill: none;
        stroke: #f33;
        stroke-width: 4;
        stroke-opacity: .25;
    }
​
    .balance-edge {
        fill: none;
        stroke: #333;
        stroke-width: 4;
        stroke-opacity: .25;
    }
</style>
<body>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="hexakis-icosahedron.js"></script>
<script>
    var width = 960, height = 500;
​
    var projectionLines = d3.geo
            .orthographic()
            .translate([width / 2, height / 2])
            .scale(245);
​
    var pathLines = d3.geo.path()
            .projection(projectionLines);
​
    var svg = d3.select('body').append('svg').attr('width', width).attr('height', height);
​
    var h = d3.geo.hexakisIcosahedron;
    var ce = svg.append('path').datum(h.icosahedronEdges).attr('class', 'cool-edge').attr('d', pathLines);
    var he = svg.append('path').datum(h.hexakisCenterEdges).attr('class', 'hot-edge').attr('d', pathLines);
    var be = svg.append('path').datum(h.hexakisSideEdges).attr('class', 'balance-edge').attr('d', pathLines);
    var cp = svg.append('path').datum(h.icosahedronPoints).attr('class', 'cool-point').attr('d', pathLines);
    var hp = svg.append('path').datum(h.hexakisCenterPoints).attr('class', 'hot-point').attr('d', pathLines);
    var bp = svg.append('path').datum(h.hexakisCrossPoints).attr('class', 'balance-point').attr('d', pathLines);
​
    d3.timer(function (elapsed) {
        projectionLines.rotate([elapsed * 0.02, elapsed * 0.01, 0]);
​
        ce.attr('d', pathLines);
        he.attr('d', pathLines);
        be.attr('d', pathLines);
        cp.attr('d', pathLines);
        hp.attr('d', pathLines);
        bp.attr('d', pathLines);
    });
</script>
​
    