Layer prototyping

A protoype for a newer design pattern for charting using a layered approach.

by Blake Dietz

JavaScript

// Ignore the margins here, this is just remnant code
var margin = {top:20,right: 20, bottom:20,left:20};
	var width  = 650 - margin.left - margin.right ;
	var height = 450 - margin.top - margin.bottom;

	var svg    = d3.select("body").append("svg")
		.attr("height",height + margin.top + margin.bottom)
		.attr("width",width + margin.left + margin.right)
	.append("g")

    var lowerLayer  = svg.append("g");
    var middleLayer = svg.append("g");
    var upperLayer  = svg.append("g");

    // Doesn't matter the order in which we append elements to the svg
    // element as long as the layer was appended after the layers 
    // which you want to occlude.
    upperLayer.append("rect")
        .attr("width",200)
        .attr("height",200)
        .attr("x",0)
        .attr("y",0)
        .attr("fill","red");

    // Here we attempt to occlude the upper layer by appending an element to the svg
    // at a later time, but we see that the topmost layer will always be above any newly
    // appended elements on lower layers
    lowerLayer.append("rect")
        .attr("width",300)
        .attr("height",300)
        .attr("x",0)
        .attr("y",0)
        .attr("fill","black");

   lowerLayer.append("rect")
        .attr("width",250)
        .attr("height",250)
        .attr("x",0)
        .attr("y",0)
        .attr("fill","yellow");

    // We shouldn't see the lower layer because this was appended above it
    middleLayer.append("rect")
            .attr("width",250)
            .attr("height",250)
            .attr("x",0)
            .attr("y",0)
            .attr("fill","purple");

    // We should still see that the purple layer is visible 
     middleLayer.append("rect")
            .attr("width",225)
            .attr("height",225)
            .attr("x",0)
            .attr("y",0)
            .attr("fill","pink");