Last active
December 15, 2015 15:39
-
-
Save aficionado/5283549 to your computer and use it in GitHub Desktop.
Iris - Scattergraph (support vs confidence) -
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("model.json", 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> | |
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
| {"category": 0, "code": 200, "columns": 5, "created": "2013-03-29T04:45:44.618000", "credits": 0.017578125, "credits_per_prediction": 0.0, "dataset": "dataset/51551c780c0b5e04c5000255", "dataset_status": true, "description": "", "excluded_fields": [], "fields_meta": {"count": 5, "limit": 1000, "offset": 0, "total": 5}, "input_fields": ["000000", "000001", "000002", "000003"], "locale": "en-US", "max_columns": 0, "max_rows": 150, "model": {"depth_threshold": 20, "fields": {"000000": {"column_number": 0, "datatype": "double", "name": "sepal length", "optype": "numeric", "order": 0, "preferred": true, "summary": {"bins": [[4.3, 1], [4.425, 4], [4.6, 4], [4.7, 2], [4.8, 5], [4.9, 6], [5, 10], [5.1, 9], [5.2, 4], [5.3, 1], [5.4, 6], [5.5, 7], [5.6, 6], [5.7, 8], [5.8, 7], [5.9, 3], [6, 6], [6.1, 6], [6.2, 4], [6.3, 9], [6.44167, 12], [6.6, 2], [6.7, 8], [6.8, 3], [6.92, 5], [7.1, 1], [7.2, 3], [7.3, 1], [7.4, 1], [7.6, 1], [7.7, 4], [7.9, 1]], "maximum": 7.9, "mean": 5.84333, "median": 5.77889, "minimum": 4.3, "missing_count": 0, "population": 150, "splits": [4.51526, 4.67252, 4.81113, 4.89582, 4.96139, 5.01131, 5.05992, 5.11148, 5.18177, 5.35681, 5.44129, 5.5108, 5.58255, 5.65532, 5.71658, 5.77889, 5.85381, 5.97078, 6.05104, 6.13074, 6.23023, 6.29578, 6.35078, 6.41459, 6.49383, 6.63013, 6.70719, 6.79218, 6.92597, 7.20423, 7.64746], "standard_deviation": 0.82807, "sum": 876.5, "sum_squares": 5223.85, "variance": 0.68569}}, "000001": {"column_number": 1, "datatype": "double", "name": "sepal width", "optype": "numeric", "order": 1, "preferred": true, "summary": {"counts": [[2, 1], [2.2, 3], [2.3, 4], [2.4, 3], [2.5, 8], [2.6, 5], [2.7, 9], [2.8, 14], [2.9, 10], [3, 26], [3.1, 11], [3.2, 13], [3.3, 6], [3.4, 12], [3.5, 6], [3.6, 4], [3.7, 3], [3.8, 6], [3.9, 2], [4, 1], [4.1, 1], [4.2, 1], [4.4, 1]], "maximum": 4.4, "mean": 3.05733, "median": 3.02044, "minimum": 2, "missing_count": 0, "population": 150, "standard_deviation": 0.43587, "sum": 458.6, "sum_squares": 1430.4, "variance": 0.18998}}, "000002": {"column_number": 2, "datatype": "double", "name": "petal length", "optype": "numeric", "order": 2, "preferred": true, "summary": {"bins": [[1, 1], [1.1, 1], [1.2, 2], [1.3, 7], [1.4, 13], [1.5, 13], [1.63636, 11], [1.9, 2], [3, 1], [3.3, 2], [3.5, 2], [3.6, 1], [3.75, 2], [3.9, 3], [4.0375, 8], [4.23333, 6], [4.46667, 12], [4.6, 3], [4.74444, 9], [4.94444, 9], [5.1, 8], [5.25, 4], [5.46, 5], [5.6, 6], [5.75, 6], [5.95, 4], [6.1, 3], [6.3, 1], [6.4, 1], [6.6, 1], [6.7, 2], [6.9, 1]], "maximum": 6.9, "mean": 3.758, "median": 4.34142, "minimum": 1, "missing_count": 0, "population": 150, "splits": [1.25138, 1.32426, 1.37171, 1.40962, 1.44567, 1.48173, 1.51859, 1.56301, 1.6255, 1.74645, 3.23033, 3.675, 3.94203, 4.0469, 4.18243, 4.34142, 4.45309, 4.51823, 4.61771, 4.72566, 4.83445, 4.93363, 5.03807, 5.1064, 5.20938, 5.43979, 5.5744, 5.6646, 5.81496, 6.02913, 6.38125], "standard_deviation": 1.7653, "sum": 563.7, "sum_squares": 2582.71, "variance": 3.11628}}, "000003": {"column_number": 3, "datatype": "double", "name": "petal width", "optype": "numeric", "order": 3, "preferred": true, "summary": {"counts": [[0.1, 5], [0.2, 29], [0.3, 7], [0.4, 7], [0.5, 1], [0.6, 1], [1, 7], [1.1, 3], [1.2, 5], [1.3, 13], [1.4, 8], [1.5, 12], [1.6, 4], [1.7, 2], [1.8, 12], [1.9, 5], [2, 6], [2.1, 6], [2.2, 3], [2.3, 8], [2.4, 3], [2.5, 3]], "maximum": 2.5, "mean": 1.19933, "median": 1.32848, "minimum": 0.1, "missing_count": 0, "population": 150, "standard_deviation": 0.76224, "sum": 179.9, "sum_squares": 302.33, "variance": 0.58101}}, "000004": {"column_number": 4, "datatype": "string", "name": "species", "optype": "categorical", "order": 4, "preferred": true, "summary": {"categories": [["Iris-versicolor", 50], ["Iris-setosa", 50], ["Iris-virginica", 50]], "missing_count": 0}}}, "importance": [["000002", 0.53159], ["000003", 0.4633], ["000000", 0.00511], ["000001", 0]], "kind": "stree", "missing_strategy": "last_prediction", "model_fields": {"000000": {"column_number": 0, "datatype": "double", "name": "sepal length", "optype": "numeric", "order": 0, "preferred": true}, "000001": {"column_number": 1, "datatype": "double", "name": "sepal width", "optype": "numeric", "order": 1, "preferred": true}, "000002": {"column_number": 2, "datatype": "double", "name": "petal length", "optype": "numeric", "order": 2, "preferred": true}, "000003": {"column_number": 3, "datatype": "double", "name": "petal width", "optype": "numeric", "order": 3, "preferred": true}, "000004": {"column_number": 4, "datatype": "string", "name": "species", "optype": "categorical", "order": 4, "preferred": true}}, "root": {"children": [{"confidence": 0.92865, "count": 50, "objective_summary": {"categories": [["Iris-setosa", 50]]}, "output": "Iris-setosa", "predicate": {"field": "000002", "operator": "<=", "value": 2.45}}, {"children": [{"children": [{"children": [{"children": [{"children": [{"confidence": 0.34237, "count": 2, "objective_summary": {"categories": [["Iris-virginica", 2]]}, "output": "Iris-virginica", "predicate": {"field": "000000", "operator": ">", "value": 5.95}}, {"confidence": 0.20654, "count": 1, "objective_summary": {"categories": [["Iris-versicolor", 1]]}, "output": "Iris-versicolor", "predicate": {"field": "000000", "operator": "<=", "value": 5.95}}], "confidence": 0.20765, "count": 3, "objective_summary": {"categories": [["Iris-versicolor", 1], ["Iris-virginica", 2]]}, "output": "Iris-virginica", "predicate": {"field": "000000", "operator": "<=", "value": 6.4}}, {"confidence": 0.20654, "count": 1, "objective_summary": {"categories": [["Iris-versicolor", 1]]}, "output": "Iris-versicolor", "predicate": {"field": "000000", "operator": ">", "value": 6.4}}], "confidence": 0.15004, "count": 4, "objective_summary": {"categories": [["Iris-versicolor", 2], ["Iris-virginica", 2]]}, "output": "Iris-virginica", "predicate": {"field": "000001", "operator": ">", "value": 2.9}}, {"confidence": 0.60966, "count": 6, "objective_summary": {"categories": [["Iris-virginica", 6]]}, "output": "Iris-virginica", "predicate": {"field": "000001", "operator": "<=", "value": 2.9}}], "confidence": 0.49016, "count": 10, "objective_summary": {"categories": [["Iris-versicolor", 2], ["Iris-virginica", 8]]}, "output": "Iris-virginica", "predicate": {"field": "000002", "operator": "<=", "value": 5.05}}, {"confidence": 0.90819, "count": 38, "objective_summary": {"categories": [["Iris-virginica", 38]]}, "output": "Iris-virginica", "predicate": {"field": "000002", "operator": ">", "value": 5.05}}], "confidence": 0.86024, "count": 48, "objective_summary": {"categories": [["Iris-versicolor", 2], ["Iris-virginica", 46]]}, "output": "Iris-virginica", "predicate": {"field": "000003", "operator": ">", "value": 1.65}}, {"children": [{"confidence": 0.92444, "count": 47, "objective_summary": {"categories": [["Iris-versicolor", 47]]}, "output": "Iris-versicolor", "predicate": {"field": "000002", "operator": "<=", "value": 4.95}}, {"children": [{"confidence": 0.43849, "count": 3, "objective_summary": {"categories": [["Iris-virginica", 3]]}, "output": "Iris-virginica", "predicate": {"field": "000000", "operator": ">", "value": 6.05}}, {"children": [{"confidence": 0.20654, "count": 1, "objective_summary": {"categories": [["Iris-virginica", 1]]}, "output": "Iris-virginica", "predicate": {"field": "000003", "operator": "<=", "value": 1.55}}, {"confidence": 0.20654, "count": 1, "objective_summary": {"categories": [["Iris-versicolor", 1]]}, "output": "Iris-versicolor", "predicate": {"field": "000003", "operator": ">", "value": 1.55}}], "confidence": 0.09453, "count": 2, "objective_summary": {"categories": [["Iris-versicolor", 1], ["Iris-virginica", 1]]}, "output": "Iris-virginica", "predicate": {"field": "000000", "operator": "<=", "value": 6.05}}], "confidence": 0.37553, "count": 5, "objective_summary": {"categories": [["Iris-versicolor", 1], ["Iris-virginica", 4]]}, "output": "Iris-virginica", "predicate": {"field": "000002", "operator": ">", "value": 4.95}}], "confidence": 0.81826, "count": 52, "objective_summary": {"categories": [["Iris-virginica", 4], ["Iris-versicolor", 48]]}, "output": "Iris-versicolor", "predicate": {"field": "000003", "operator": "<=", "value": 1.65}}], "confidence": 0.40383, "count": 100, "objective_summary": {"categories": [["Iris-versicolor", 50], ["Iris-virginica", 50]]}, "output": "Iris-virginica", "predicate": {"field": "000002", "operator": ">", "value": 2.45}}], "confidence": 0.26289, "count": 150, "objective_summary": {"categories": [["Iris-versicolor", 50], ["Iris-setosa", 50], ["Iris-virginica", 50]]}, "output": "Iris-virginica", "predicate": true}, "split_criterion": "information_gain_mix", "support_threshold": 0}, "name": "iris' dataset model", "number_of_evaluations": 0, "number_of_predictions": 0, "number_of_public_predictions": 0, "objective_field": "000004", "objective_fields": ["000004"], "ordering": 0, "out_of_bag": false, "price": 0.0, "private": true, "randomize": false, "range": [1, 150], "replacement": false, "resource": "model/51551c780c0b5e04c5000259", "rows": 150, "sample_rate": 1.0, "selective_pruning": true, "size": 4608, "source": "source/51551c730c0b5e04c5000252", "source_status": true, "stat_pruning": true, "status": {"code": 5, "elapsed": 97, "message": "The model has been created", "progress": 1.0}, "tags": [], "updated": "2013-03-29T04:45:45.157000", "views": 0, "white_box": false} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment