custom_report.js

var eventSelect = d3.select("body").append("select").attr("name", "event").attr("onchange", "window.selectedEvent = this.value; window.getProperties()");
var prop1Select = d3.select("body").append("select").attr("name", "prop1").attr("onchange", "window.property1 = this.value; window.query()");
var prop2Select = d3.select("body").append("select").attr("name", "prop2").attr("onchange", "window.property2 = this.value; window.query()");

window.selectedEvent = 'Viewed report';
window.property1 = '$os';
window.property2 = 'mp_country_code';

MPAPI.top_events().done(function (results) {
    results = _.map(results, function(r){ return r.event;}).sort();
    eventSelect.selectAll("option")
        .data(results)
        .enter()
            .append("option")
            .text(function(d) {return d;})
            .attr("value", function(d) {return d;});
    eventSelect.property("value", window.selectedEvent);
});

window.getProperties = function (event) {
    MPAPI.top_properties(event).done(function (results) {
        results = _.keys(results).sort();
        prop1Select.selectAll("option")
            .data(results)
            .enter()
                .append("option")
                .text(function(d) {return d;})
                .attr("value", function(d) {return d;});
        prop1Select.property("value", window.property1);
        prop2Select.selectAll("option")
            .data(results)
            .enter()
                .append("option")
                .text(function(d) {return d;})
                .attr("value", function(d) {return d;});
        prop2Select.property("value", window.property2);
    });
};
window.getProperties();

window.query = function() {
    if (window.selectedEvent && window.property1 && window.property2) {
        console.log("test")
        MPAPI.query('/api/2.0/segmentation/multiseg', {
            'inner':'properties["'+window.property1+'"]',
            'outer':'properties["'+window.property2+'"]',
            'event':window.selectedEvent,
            'type':'unique',
            'limit':20,
            'from_date': MPDate.now(),
            'to_date':MPDate.now()
        }).done(function(data) {

            data = JSON.parse(data).data.values;
            var xkeys = _.keys(data).slice(0,20);
            var ykeys = _.union.apply(this, _.map(xkeys, function(k) {return _.keys(data[k]);})).slice(0,20);
            var max = 0, min;
            var points = _.flatten(_.map(xkeys, function(xk) { 
                return _.map(ykeys, function (yk) {
                    var value = data[xk][yk] !== undefined ? _.values(data[xk][yk])[0] : 0;
                    max = Math.max(max, value)
                    min = min === undefined ? value : Math.min(min, value)
                    return {'x':xk, 'y':yk, 'count':value};
                });
            }));
            min = Math.max(1,min);
            var cscale = d3.scale.log().domain([min,max]).range(['#aec7e8','#1f77b4']);

            var width = 850;
            var height = width * (ykeys.length / xkeys.length);
            var cellWidth = width / xkeys.length;
            var cellHeight = height / ykeys.length;

            d3.select("body").select("svg").remove();
            var svg = d3.select("body").append("svg").attr("width",width + 100).attr("height",height + 50);
            var g = svg.append("g")
                .attr("transform", "translate(100,100)");

            var xscale = d3.scale.ordinal()
                .domain(xkeys)
                .rangePoints([0,width], 1);
            var yscale = d3.scale.ordinal()
                .domain(ykeys)
                .rangePoints([0,height], 1);

            var xaxis = d3.svg.axis().scale(xscale).orient("top");
            g.append("g").attr("class", "x axis")
            .attr("transform", "translate(0,0)")
            .call(xaxis)
                .selectAll("text")
                .attr("text-anchor", "begin")
                .attr("transform", "rotate(-30) translate(10, -10)");

            var yaxis = d3.svg.axis().scale(yscale).orient("left");
            g.append("g").attr("class", "y axis")
            .attr("transform", "translate(0,0)")
            .call(yaxis);

            var nodes = g.selectAll(".node")
                .data(points)
                .enter()
                    .append("g")
                    .attr("class","node")

            nodes.append("circle")
                .attr("cx", function(d, i) {return xscale(d['x'])})
                .attr("cy", function(d, i) {return yscale(d['y']);})
                .attr("r", function(d, i) {return (Math.sqrt(d['count']) / Math.sqrt(max)) * (cellWidth/2);})
                .style("fill", function(d, i) {return cscale(d['count'] + 1);});
            
            var labels = nodes.append('text')
                .text(function(d) { return d['count'];})
                .attr("text-anchor", "middle")
                .attr("x", function(d, i) {return xscale(d['x']);})
                .attr("y", function(d, i) {return yscale(d['y']);})

            g.selectAll('.axis path')
                .style("display", "none")

            g.selectAll('text')
                .style("font-family", "sans-serif")
                .style("font-size", "12px");

             
        });
    }
};
window.query();