Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add first version of Vega ROC plots #77

Merged
merged 12 commits into from
Feb 1, 2017
9 changes: 9 additions & 0 deletions explore/visualization/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
# A directory for creating Vega based visualizations

In order to run these sample files, you should first start up a simple HTTP server such as:

```sh
python -m SimpleHTTPServer 8000
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note that this repository's environment uses Python 3.

In Python 3, I think this should be:

python -m http.server 8000

Feel free to include both commands, if you'd like.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, I'll fix that.

```

Then navigate to that instance (localhost:8000) and click on the file that you wish to view.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Replacing localhost:8000 with http://localhost:8000/ will make the link clickable -- just worried that some ML devs will be confused by what localhost is.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will do.

25 changes: 25 additions & 0 deletions explore/visualization/data/sample_roc_data.csv
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
false_positive,true_positive,curve,data
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

May want to add 0, 0 and 1, 1 to each curve to more closely represent the ROC curves on real data.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we make the column names more descriptive:

  • false_positive_rate
  • true_positive_rate
  • partition
  • feature_set

0.5,0.99,train,full features
0.39,0.97,train,full features
0.2,0.83,train,full features
0.1,0.6,train,full features
0.05,0.4,train,full features
0.02,0.2,train,full features
0.5,0.97,test,full features
0.39,0.93,test,full features
0.2,0.8,test,full features
0.1,0.56,test,full features
0.05,0.36,test,full features
0.02,0.17,test,full features
0.55,0.891,train,covariates only
0.429,0.873,train,covariates only
0.22,0.747,train,covariates only
0.11,0.54,train,covariates only
0.055,0.36,train,covariates only
0.022,0.18,train,covariates only
0.55,0.873,test,covariates only
0.429,0.837,test,covariates only
0.22,0.72,test,covariates only
0.11,0.504,test,covariates only
0.055,0.324,test,covariates only
0.022,0.153,test,covariates only
287 changes: 287 additions & 0 deletions explore/visualization/roc_curves_sample.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,287 @@
<head>
<title>ROC Curves</title>
<meta charset="utf-8">

<!-- TODO -->
<!-- Install with npm install vega -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega/2.6.5/vega.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-lite/1.3.1/vega-lite.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-embed/2.2.0/vega-embed.min.js" charset="utf-8"></script>



<style media="screen">
/* Add space between vega-embed links */
.vega-actions a {
margin-right: 5px;
}
</style>
</head>
<body>

<h1>ROC Sample</h1>

<div id="roc_plot"></div>

<script>
var vSpec ={
"width": 600,
"height": 400,
"padding": {"top": 10, "left": 70, "bottom": 60, "right": 150},
"data": [
{
"name": "roc",
"url": "data/sample_roc_data.csv",
"format": {"type": "csv"},
"transform": [{"type": "formula", "field": "legend", "expr": "datum.curve + ' (' + datum.data + ')'"}]
}
],
"scales": [
{
"name": "xscale",
"type": "linear",
"domain": {"data": "roc", "field": "false_positive"},
"range": "width",
"zero": "true",
"round": "true"
},
{
"name": "yscale",
"type": "linear",
"domain": {"data": "roc", "field": "true_positive"},
"range": "height",
"zero": "true",
"round": "true",
"nice": "true"
},
{
"name": "colorscale",
"type": "ordinal",
"domain": {"data": "roc", "field": "legend"},
//"range": "category10"
"range": ["#9c9ede","#5254a3","#fdd0a2","#fd8d3c"]
}/*,
{
"name": "dashscale",
"type": "ordinal",
"domain": {"data": "roc", "field": "data"},
"range": [[5,2]]
}*/
],
"axes": [
{
"type": "x",
"title": "False positive rate",
"scale": "xscale",
"grid": "true",
"layer": "back",
"format": "%"
},
{
"type": "y",
"title": "True positive rate",
"scale": "yscale",
"grid": "true",
"layer": "back",
"format": "%"
}
],
"legends": [
{
"title": "curve",
"fill": "colorscale",
"orient": "right"
}
],
"signals": [
{
"name": "hover",
"init": {},
"streams": [
{"type": "symbol:mouseover","expr": "datum"},
{"type": "symbol:mouseout","expr": "{}"}
]
}
],
"predicates": [
{
"name": "ifHover",
"type": "==",
"operands": [{"signal": "hover._id"},{"arg": "id"}]
}
],
"marks": [
{
"type": "group",
"from": {
"data": "roc",
"transform": [{"type": "facet", "groupby": "legend"}]
},
"marks": [
{
"type": "line",
"properties": {
"update": {
"x": {"scale": "xscale","field": "false_positive"},
"y": {"scale": "yscale","field": "true_positive"},
"stroke": {"scale": "colorscale","field": "legend"},
"strokeWidth": {"value": 3},
//"strokeDash": {"value": [5,2]}
//"strokeDash": {"scale": "dashscale", "field": "data"}
}
}
},
{
"type": "symbol",
"from": {"data": "roc"},
"properties": {
"update": {
"x": {"scale": "xscale","field": "false_positive"},
"y": {"scale": "yscale","field": "true_positive"},
"fill": {"scale": "colorscale","field": "legend"},
"stroke": {"scale": "colorscale","field": "legend"},
"size": {"value": 20}
}
}
},
{
"type": "group",
"from": {
"data": "roc",
"transform": [{"type": "facet","groupby": "legend"}]
},
"properties": {
"update": {
"x": {
"scale": "xscale",
"signal": "hover.false_positive",
"offset": 2
},
"y": {
"scale": "yscale",
"signal": "hover.true_positive",
"offset": 15
},
"width": {"value": 130},
"height": {"value": 50},
"strokeWidth": {"value": 0.5},
"fill": {
"rule": [
{
"predicate": {
"name": "ifHover",
"id": {"value": null}
},
"value": null
},
{"value": "white"}
]
},
"stroke": {
"rule": [
{
"predicate": {
"name": "ifHover",
"id": {"value": null}
},
"value": null
},
{"value": "black"}
]
}
}
},
"marks": [
{
"type": "text",
"properties": {
"update": {
"x": {"value": 6},
"y": {"value": 13},
"fontWeight": {"value": "bold"},
"text": {
"template": "{{hover.legend}}"
},
"fill": {
"rule": [
{
"predicate": {
"name": "ifHover",
"id": {"value": null}
},
"value": null
},
{"value": "black"}
]
}
}
}
},
{
"type": "text",
"properties": {
"update": {
"x": {"value": 6},
"y": {"value": 28},
"text": {
"template": "True positive: {{hover.true_positive}}"
},
"fill": {
"rule": [
{
"predicate": {
"name": "ifHover",
"id": {"value": null}
},
"value": null
},
{"value": "black"}
]
}
}
}
},
{
"type": "text",
"properties": {
"update": {
"x": {"value": 6},
"y": {"value": 43},
"text": {
"template": "False positive: {{hover.false_positive}}"
},
"fill": {
"rule": [
{
"predicate": {
"name": "ifHover",
"id": {"value": null}
},
"value": null
},
{"value": "black"}
]
}
}
}
}
]
}
]
}
]
}

var embedSpec = {
mode: "vega",
spec: vSpec,
actions: false
};

vg.embed("#roc_plot", embedSpec, function(error, result) {

});
</script>
</body>
</html>