-
Notifications
You must be signed in to change notification settings - Fork 47
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
Changes from 3 commits
00d01e2
7bab733
82832c9
03dafcc
ed835ff
567562a
677913a
b12b2d3
4d92d48
c0e2e61
10c8c0b
122619d
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
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 | ||
``` | ||
|
||
Then navigate to that instance (localhost:8000) and click on the file that you wish to view. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Replacing There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Will do. |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
false_positive,true_positive,curve,data | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. May want to add There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Can we make the column names more descriptive:
|
||
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 |
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> |
There was a problem hiding this comment.
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:
Feel free to include both commands, if you'd like.
There was a problem hiding this comment.
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.