Custom visual Heatmap

Hi 

I am trying to develop a heatmap custom visual. The input data are two categorical variables ("axis" and "yaxis" in the code) and one numeric value ("value" in the code).

The names of the unique categories of "xaxis" and "yaxis" should be displayed as legends of the x and y-axes of the grid, and inside the grid should be the color depending on the value of "value". I used static data inside the custom visual to test the visual before data binding.

However, when I run the visual it only displays the first "value" in color of the sample and no legends of the axes at all. What am I missing here? Any help is appreciated, thanks! 

module powerbi.extensibility.visual {

    interface DataPoint {
        xaxis: string;
        yaxis: string;
        value: number;
    };

    interface ViewModel {
        dataPoints: DataPoint[];
    }

    export class Visual implements IVisual {
        private host: IVisualHost;
        private svg: d3.Selection<SVGElement>;
        private group: d3.Selection<SVGElement>;

        constructor(options: VisualConstructorOptions) {
            this.host = options.host;
            this.svg = d3.select(options.element)
                .append("svg");
            this.group = this.svg.append("g")

        }

        public update(options: VisualUpdateOptions) {
            let sample: DataPoint[] = [
                {
                    xaxis: "A",
                    yaxis: "D",
                    value: 1
                },
                {
                    xaxis: "A",
                    yaxis: "E",
                    value: 2
                },
                {
                    xaxis: "B",
                    yaxis: "D",
                    value: 3
                },
                {
                    xaxis: "B",
                    yaxis: "E",
                    value: 4
                },
                {
                    xaxis: "C",
                    yaxis: "D",
                    value: 5
                },
                {
                    xaxis: "C",
                    yaxis: "E",
                    value: 6
                },
            ]; 

            let viewModel: ViewModel = { 
                dataPoints: sample
            };

            let width = options.viewport.width;
            let height = options.viewport.height;
            let gridSize = Math.floor(width / 24);
            let legendElementWidth = gridSize * 2;
            let colors = ["#ffffd9", "#edf8b1", "#c7e9b4", "#7fcdbb", "#41b6c4", "#1d91c0", "#225ea8", "#253494", "#081d58"];
            let xAxisLabels = _.uniq(viewModel.dataPoints.map(function (d) { return d.xaxis }), 'xaxis');
            let yAxisLabels = _.uniq(viewModel.dataPoints.map(function (d) { return d.yaxis }), 'yaxis');
            let buckets = yAxisLabels.length;

            this.svg.attr({
                width: width,
                height: height
            });

            this.svg.selectAll(".yAxisLabel")
                .data(yAxisLabels)
                .enter().append("text")
                .text(function (d) { return d; })
                .attr("x", 0)
                .attr("y", function (d, i) { return i * gridSize; })
                .style("text-anchor", "end")
                .attr("transform", "translate(-6," + gridSize / 1.5 + ")")
                .attr("class", function (d, i) { return "yAxisLabel mono axis axis-workweek"; });

            this.svg.selectAll(".xAxisLabel")
                .data(xAxisLabels)
                .enter()
                .append('g')
                .attr('transform', function (d, i) { return 'translate(' + (i * gridSize) + ', 0)'; })
                .append("text")
                .text(function (d) { return d.substring(0, 11) + (d.length > 10 ? '...' : ''); })
                .attr("x", function (d, i) { return 12; })
                .attr("y", 12)
                .style("text-anchor", "start")
                .attr("transform", "rotate(-45)")
                .attr("class", function (d, i) { return "xAxisLabel mono axis axis-worktime"; });

            let colorScale = d3.scale.quantile()
                .domain([0, buckets - 1, d3.max(viewModel.dataPoints, function (d) { return d.value; })])
                .range(colors);

            let cards = this.group.selectAll(".xaxis")
                .data(viewModel.dataPoints, function (d) {
                    return yAxisLabels.indexOf(d.yaxis) + ':' + xAxisLabels.indexOf(d.xaxis);
                });

            cards.append("title");

            cards.enter()
                .append("rect");

            cards.attr({
                x: function (d) { return (xAxisLabels.indexOf(d.xaxis) + 1 - 1) * gridSize; },
                y: function (d) { return (yAxisLabels.indexOf(d.yaxis) + 1 - 1) * gridSize; },
                rx: 4,
                ry: 4,
                class: "xaxis bordered",
                width: gridSize,
                height: gridSize
            });

            cards.style("fill", colors[0])

            cards.select("title").text(function (d) { return d.value; });

            cards.exit().remove();

        };

    }

}