aficionado/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: auto;
  position: relative;
  width: 960px;
  background: #fff;
}

text {
  font: 10px sans-serif;
}

#chart {
  position: absolute;
  left: 10px;
  top: 10px;
  line-height: 150%
}

.axis path,
.axis line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}

.axis text {
    font-family: sans-serif;
    font-size: 11px;
}

</style>
<body>
  <div id="chart"></div>
</body>

<script src="http://d3js.org/d3.v3.min.js"></script>

<script>
d3.json("https://bigml.io/andromeda/model/515b5bb00c0b5e5b1e000076?username=public;api_key=5c5538c5ab79d0bcf5ce8a4508b10d1b2ecc57f6", function(error, model) {
    var margin = {top: 20, right: 20, bottom: 50, left: 45};
    var width = 900 - margin.left - margin.right;
    var height = 500 - margin.top - margin.bottom;
    var xPadding = 20;
    var yPadding = 35;
    var leaves = get_leaves(model.model.root);

    var max_support = (leaves.sort(function (x, y) {
                                    return y.count - x.count})[0].count)/model.rows;

    var xScale = d3.scale.linear()
                   .domain([0, max_support + 0.025])
                   .range([0, width]);

    var yScale = d3.scale.linear()
                   .domain([0, 1])
                   .range([height, 0]);

    var xAxis = d3.svg.axis()
                  .scale(xScale)
                  .orient("bottom")
                  .ticks(15);

    var yAxis = d3.svg.axis()
                  .scale(yScale)
                  .orient("left")
                  .ticks(25);

    var colorPrediction = d3.scale.category10();

    var colorLookup = function(leaf) {
        return hoverAdjust(leaf, colorPrediction(leaf.output));
    };

    // SVG panel.
    var svg = d3.select("#chart")
        .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    // Adds X axis
    svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
    .append("text")
      .attr("class", "label")
      .attr("x", width/2)
      .attr("y", 32)
      .style("text-anchor", "middle")
      .text("Support");

    // Adds Y axis
    svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("class", "label")
      .attr("transform", "rotate(-90)")
      .attr("x", -height/2)
      .attr("y", -45)
      .attr("dy", ".71em")
      .style("text-anchor", "middle")
      .text("Confidence")


    // Draw X-axis grid lines
    svg.selectAll("line.x")
      .data(xScale.ticks(10))
      .enter().append("line")
      .attr("class", "x")
      .attr("x1", xScale)
      .attr("x2", xScale)
      .attr("y1", 0)
      .attr("y2", height)
      .style("stroke", "#ccc");

    // Draw Y-axis grid lines
    svg.selectAll("line.y")
      .data(yScale.ticks(10))
      .enter().append("line")
      .attr("class", "y")
      .attr("x1", 0)
      .attr("x2", width)
      .attr("y1", yScale)
      .attr("y2", yScale)
      .style("stroke", "#ccc");

    // Output
    svg.append('text')
       .attr("text-anchor", "middle")
       .attr({'id': 'outputLabel', 'x': width/2, 'y': height-20})
       .style({'font-size': '40px', 'font-weight': 'bold', 'fill': '#ddd'});

    // Draw leaves
    svg.selectAll("circle")
        .data(leaves)
        .enter()
        .append("circle")
        .attr("cx", function(leaf) {
            return xScale(leaf.count/model.rows);
         })
        .attr("cy", function(leaf) {
            return yScale(leaf.confidence);
        })
        .attr("r", function(leaf) {
            return 2 * Math.sqrt(height - yScale(leaf.count/model.rows));
        })
        .attr("fill", colorLookup)
        .attr("stroke", colorLookup)
        .style('cursor', 'pointer')
        .on('mouseover', function(leaf) {
          d3.select('svg #outputLabel')
            .text(leaf.output + " (" + ((leaf.count/model.rows) * 100).toFixed(2) + "%, " + (leaf.confidence * 100).toFixed(2) + "%)")
            .transition()
            .style('opacity', 1);
        })
        .on('mouseout', function(d) {
          d3.select('svg #outputLabel')
            .transition()
            .duration(1500)
            .style('opacity', 0);
        });

    // Draw legends
    var legend = svg.selectAll(".legend")
      .data(colorPrediction.domain())
      .enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

    legend.append("rect")
      .attr("x", width - 18)
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", colorPrediction);

    legend.append("text")
      .attr("x", width - 24)
      .attr("y", 9)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text(function(d) { return d; });

});

// Returns the list of leaves of a tree
function get_leaves(node) {
    var leaves = [];

    if ('children' in node) {
        for (var i=0; i < node.children.length; i++) {
            var childLeaves = get_leaves(node.children[i]);
            for (var j=0; j < childLeaves.length; j++) {
                leaves.push(childLeaves[j]);
            }
        }
    } else {
        var distribution = [];
        if ('bins' in node.objective_summary) {
            distribution = node.objective_summary.bins;
        }
        else if ('counts' in node.objective_summary) {
            distribution = node.objective_summary.counts;
        }
        else if ('categories' in node.objective_summary) {
            distribution = node.objective_summary.categories
        }
        leaves = [{
            "confidence": node.confidence,
            "count": node.count,
            "distribution": distribution,
            "output": node.output}];
    }
    return leaves;
};

// Adjust hover
function hoverAdjust(d, color) {
    return d.hover ? d3.rgb(color).brighter(0.66) : color;
};


</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin: auto;
	position: relative;
	width: 960px;
	background: #fff;
	}

	text {
	font: 10px sans-serif;
	}

	#chart {
	position: absolute;
	left: 10px;
	top: 10px;
	line-height: 150%
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
	}

	.axis text {
	font-family: sans-serif;
	font-size: 11px;
	}

	</style>
	<body>
	<div id="chart"></div>
	</body>

	<script src="http://d3js.org/d3.v3.min.js"></script>

	<script>
	d3.json("https://bigml.io/andromeda/model/515b5bb00c0b5e5b1e000076?username=public;api_key=5c5538c5ab79d0bcf5ce8a4508b10d1b2ecc57f6", function(error, model) {
	var margin = {top: 20, right: 20, bottom: 50, left: 45};
	var width = 900 - margin.left - margin.right;
	var height = 500 - margin.top - margin.bottom;
	var xPadding = 20;
	var yPadding = 35;
	var leaves = get_leaves(model.model.root);

	var max_support = (leaves.sort(function (x, y) {
	return y.count - x.count})[0].count)/model.rows;

	var xScale = d3.scale.linear()
	.domain([0, max_support + 0.025])
	.range([0, width]);

	var yScale = d3.scale.linear()
	.domain([0, 1])
	.range([height, 0]);

	var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom")
	.ticks(15);

	var yAxis = d3.svg.axis()
	.scale(yScale)
	.orient("left")
	.ticks(25);

	var colorPrediction = d3.scale.category10();

	var colorLookup = function(leaf) {
	return hoverAdjust(leaf, colorPrediction(leaf.output));
	};

	// SVG panel.
	var svg = d3.select("#chart")
	.append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	// Adds X axis
	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis)
	.append("text")
	.attr("class", "label")
	.attr("x", width/2)
	.attr("y", 32)
	.style("text-anchor", "middle")
	.text("Support");

	// Adds Y axis
	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis)
	.append("text")
	.attr("class", "label")
	.attr("transform", "rotate(-90)")
	.attr("x", -height/2)
	.attr("y", -45)
	.attr("dy", ".71em")
	.style("text-anchor", "middle")
	.text("Confidence")


	// Draw X-axis grid lines
	svg.selectAll("line.x")
	.data(xScale.ticks(10))
	.enter().append("line")
	.attr("class", "x")
	.attr("x1", xScale)
	.attr("x2", xScale)
	.attr("y1", 0)
	.attr("y2", height)
	.style("stroke", "#ccc");

	// Draw Y-axis grid lines
	svg.selectAll("line.y")
	.data(yScale.ticks(10))
	.enter().append("line")
	.attr("class", "y")
	.attr("x1", 0)
	.attr("x2", width)
	.attr("y1", yScale)
	.attr("y2", yScale)
	.style("stroke", "#ccc");

	// Output
	svg.append('text')
	.attr("text-anchor", "middle")
	.attr({'id': 'outputLabel', 'x': width/2, 'y': height-20})
	.style({'font-size': '40px', 'font-weight': 'bold', 'fill': '#ddd'});

	// Draw leaves
	svg.selectAll("circle")
	.data(leaves)
	.enter()
	.append("circle")
	.attr("cx", function(leaf) {
	return xScale(leaf.count/model.rows);
	})
	.attr("cy", function(leaf) {
	return yScale(leaf.confidence);
	})
	.attr("r", function(leaf) {
	return 2 * Math.sqrt(height - yScale(leaf.count/model.rows));
	})
	.attr("fill", colorLookup)
	.attr("stroke", colorLookup)
	.style('cursor', 'pointer')
	.on('mouseover', function(leaf) {
	d3.select('svg #outputLabel')
	.text(leaf.output + " (" + ((leaf.count/model.rows) * 100).toFixed(2) + "%, " + (leaf.confidence * 100).toFixed(2) + "%)")
	.transition()
	.style('opacity', 1);
	})
	.on('mouseout', function(d) {
	d3.select('svg #outputLabel')
	.transition()
	.duration(1500)
	.style('opacity', 0);
	});

	// Draw legends
	var legend = svg.selectAll(".legend")
	.data(colorPrediction.domain())
	.enter().append("g")
	.attr("class", "legend")
	.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

	legend.append("rect")
	.attr("x", width - 18)
	.attr("width", 18)
	.attr("height", 18)
	.style("fill", colorPrediction);

	legend.append("text")
	.attr("x", width - 24)
	.attr("y", 9)
	.attr("dy", ".35em")
	.style("text-anchor", "end")
	.text(function(d) { return d; });

	});

	// Returns the list of leaves of a tree
	function get_leaves(node) {
	var leaves = [];

	if ('children' in node) {
	for (var i=0; i < node.children.length; i++) {
	var childLeaves = get_leaves(node.children[i]);
	for (var j=0; j < childLeaves.length; j++) {
	leaves.push(childLeaves[j]);
	}
	}
	} else {
	var distribution = [];
	if ('bins' in node.objective_summary) {
	distribution = node.objective_summary.bins;
	}
	else if ('counts' in node.objective_summary) {
	distribution = node.objective_summary.counts;
	}
	else if ('categories' in node.objective_summary) {
	distribution = node.objective_summary.categories
	}
	leaves = [{
	"confidence": node.confidence,
	"count": node.count,
	"distribution": distribution,
	"output": node.output}];
	}
	return leaves;
	};

	// Adjust hover
	function hoverAdjust(d, color) {
	return d.hover ? d3.rgb(color).brighter(0.66) : color;
	};



	</script>