polygons

by Igor Cuckovic

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>

JavaScript

var width = 500,
    height = 500,
    dataArray = [10, 30, 300, 88, 120, 0, 30];

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                
                });





function drawFunction (expandedLine, stackNumber, item) {
   // console.log(expandedLine, stackNumber);
    
    var mask = svg.append("g").attr({
    "transform": "translate(0, 50)"
    });
    var points = mask.selectAll(".points")
    .data(expandedLine)
    .enter()
    .append("g")
    .attr("class", ".points")
    .attr("transform", function (d, i) {return "translate(" + 50 * stackNumber  + "," + d + ")";});
    
    var label = mask.append("g").append("text").text(item)
    .attr("text-anchor", "middle")
    .attr("transform", function () {return "translate(" + (50 * stackNumber + 13) + "," + (max - (item + 5)) + "              )";});
    
    if (item) {
        v(points, l[0]);
    } else {
       var points0 = mask.append("g")
            .attr("class", ".points")
            .attr("transform", function () {return "translate(" + (50 * stackNumber ) + "," + max + " )";});
        
        y(points0, l[0]);
    }
}


// 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", 0.5);
    a.append("polygon").attr("points",...