Created
April 2, 2013 22:32
-
-
Save aficionado/5296811 to your computer and use it in GitHub Desktop.
private public model
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment