test "polygon"

by Igor Cuckovic

JavaScript

var width = 500,
    height = 500,
    dataArray = [10, 30, 50, 88, 15];

var max = d3.max(d3.values(dataArray));
var margin = {top: 50, right: 50, bottom: 50, left: 50};

var svgHeight = height - (margin.top + margin.bottom);

var scale = d3.scale.linear()
                .domain([0, max])
                .range([0, svgHeight]);

var svg = d3.select("body").append("svg")
                .attr({
                        "width": width,
                        "height": height                
                });

/* 

var stacks = svg.append("g").attr("transform", function () {return "translate(" + margin.top + "," + margin.left + ")";})
                .selectAll("rect")
                .data(dataArray)
                .enter()
                .append("rect")
                .attr({
                    "width": 60,
                    "height": function (d, i) {return scale(d);},
                      "x": function (d, i) { return i * 70 + 20;},
                    "y": function () {return svgHeight - this.height.animVal.value;},
                    "fill": "darkred"
                });  */


/* var point = svg.append("g").attr({
    "transform": "translate(50, 50) scale(3)"
});
 */
var points = svg.append("g").attr("classname", "iso").selectAll(".points")
    .data(dataArray)
    .enter()
    .append("g")
    .attr("class", ".points")
.attr("transform", function (d, i) {return "translate(" + 50  + "," + (3 * i) + ")";})

// test
l = ["#AE3E33", "#1E6098"];

function g(t) {
    return d3.rgb(t).hsl().brighter(0.5).toString()
};

function v(t, e) {
    var a = t.append("g");
    var n = g(e);
    a.append("polygon").attr("points", "13.59,5.745 0,2.873 13.59,0 27.179,2.873").style("fill", n);
    a.append("polygon").attr("points", "27.179,4.873 13.59,7.745 0,4.873 0,2.873 13.59,5.745 27.179,2.8733").style("fill", e);
    return a;
};

function y(t, e) {
    var a = t.append("g").style("opacity", .5);
    a.append("polygon").attr("points", "13.59,5.745 0,2.873...