2024-06-26 08:52:38 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
<html>
|
|
|
|
<head>
|
|
|
|
<meta http-equiv="refresh" content="5">
|
|
|
|
<title>DVC Plot</title>
|
|
|
|
|
|
|
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/vega@5.20.2"></script>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/vega-lite@5.2.0"></script>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6.18.2"></script>
|
|
|
|
|
|
|
|
<style>
|
|
|
|
table {
|
|
|
|
border-spacing: 15px;
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
|
|
|
|
<div id="params_yaml" style="text-align: center; padding: 10x">
|
|
|
|
<p>params_yaml</p>
|
|
|
|
<div style="display: flex;justify-content: center;">
|
|
|
|
<table>
|
|
|
|
<thead>
|
|
|
|
<tr><th style="text-align: right;"> myParam</th></tr>
|
|
|
|
</thead>
|
|
|
|
<tbody>
|
|
|
|
<tr><td style="text-align: right;"> 123</td></tr>
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div id="metrics_json" style="text-align: center; padding: 10x">
|
|
|
|
<p>metrics_json</p>
|
|
|
|
<div style="display: flex;justify-content: center;">
|
|
|
|
<table>
|
|
|
|
<thead>
|
2024-06-26 08:59:17 +00:00
|
|
|
<tr><th style="text-align: right;"> myMetric</th><th style="text-align: right;"> new_metric</th></tr>
|
2024-06-26 08:52:38 +00:00
|
|
|
</thead>
|
|
|
|
<tbody>
|
2024-06-26 08:59:17 +00:00
|
|
|
<tr><td style="text-align: right;"> 543</td><td style="text-align: right;"> 333</td></tr>
|
2024-06-26 08:52:38 +00:00
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div id = "static_myMetric">
|
|
|
|
<script type = "text/javascript">
|
|
|
|
var spec = {"$schema": "https://vega.github.io/schema/vega-lite/v5.json", "data": {"values": [{"step": "0", "myMetric": "543", "rev": "workspace"}]}, "title": "myMetric", "width": 300, "height": 300, "params": [{"name": "smooth", "value": 0.001, "bind": {"input": "range", "min": 0.001, "max": 1, "step": 0.001}}], "layer": [{"mark": "line", "encoding": {"x": {"field": "step", "type": "quantitative", "title": "step"}, "y": {"field": "myMetric", "type": "quantitative", "title": "myMetric", "scale": {"zero": false}}, "color": {"field": "rev", "type": "nominal"}, "tooltip": [{"field": "step", "title": "step", "type": "quantitative"}, {"field": "myMetric", "title": "myMetric", "type": "quantitative"}]}, "transform": [{"loess": "myMetric", "on": "step", "groupby": ["rev", "filename", "field", "filename::field"], "bandwidth": {"signal": "smooth"}}]}, {"mark": {"type": "line", "opacity": 0.2}, "encoding": {"x": {"field": "step", "type": "quantitative", "title": "step"}, "y": {"field": "myMetric", "type": "quantitative", "title": "myMetric", "scale": {"zero": false}}, "color": {"field": "rev", "type": "nominal"}, "tooltip": [{"field": "step", "title": "step", "type": "quantitative"}, {"field": "myMetric", "title": "myMetric", "type": "quantitative"}]}}, {"mark": {"type": "circle", "size": 10, "tooltip": {"content": "encoding"}}, "encoding": {"x": {"aggregate": "max", "field": "step", "type": "quantitative", "title": "step"}, "y": {"aggregate": {"argmax": "step"}, "field": "myMetric", "type": "quantitative", "title": "myMetric", "scale": {"zero": false}}, "color": {"field": "rev", "type": "nominal"}}}]};
|
|
|
|
vegaEmbed('#static_myMetric', spec);
|
|
|
|
</script>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
2024-06-26 08:59:17 +00:00
|
|
|
<div id = "static_new_metric">
|
|
|
|
<script type = "text/javascript">
|
|
|
|
var spec = {"$schema": "https://vega.github.io/schema/vega-lite/v5.json", "data": {"values": [{"step": "0", "new_metric": "333", "rev": "workspace"}]}, "title": "new_metric", "width": 300, "height": 300, "params": [{"name": "smooth", "value": 0.001, "bind": {"input": "range", "min": 0.001, "max": 1, "step": 0.001}}], "layer": [{"mark": "line", "encoding": {"x": {"field": "step", "type": "quantitative", "title": "step"}, "y": {"field": "new_metric", "type": "quantitative", "title": "new_metric", "scale": {"zero": false}}, "color": {"field": "rev", "type": "nominal"}, "tooltip": [{"field": "step", "title": "step", "type": "quantitative"}, {"field": "new_metric", "title": "new_metric", "type": "quantitative"}]}, "transform": [{"loess": "new_metric", "on": "step", "groupby": ["rev", "filename", "field", "filename::field"], "bandwidth": {"signal": "smooth"}}]}, {"mark": {"type": "line", "opacity": 0.2}, "encoding": {"x": {"field": "step", "type": "quantitative", "title": "step"}, "y": {"field": "new_metric", "type": "quantitative", "title": "new_metric", "scale": {"zero": false}}, "color": {"field": "rev", "type": "nominal"}, "tooltip": [{"field": "step", "title": "step", "type": "quantitative"}, {"field": "new_metric", "title": "new_metric", "type": "quantitative"}]}}, {"mark": {"type": "circle", "size": 10, "tooltip": {"content": "encoding"}}, "encoding": {"x": {"aggregate": "max", "field": "step", "type": "quantitative", "title": "step"}, "y": {"aggregate": {"argmax": "step"}, "field": "new_metric", "type": "quantitative", "title": "new_metric", "scale": {"zero": false}}, "color": {"field": "rev", "type": "nominal"}}}]};
|
|
|
|
vegaEmbed('#static_new_metric', spec);
|
|
|
|
</script>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
2024-06-26 08:52:38 +00:00
|
|
|
<div id = "iris_feature_importance">
|
|
|
|
<script type = "text/javascript">
|
|
|
|
var spec = {"$schema": "https://vega.github.io/schema/vega-lite/v5.json", "data": {"values": [{"name": "petal_width", "importance": 0.4, "rev": "workspace"}, {"name": "petal_length", "importance": 0.33, "rev": "workspace"}, {"name": "sepal_width", "importance": 0.24, "rev": "workspace"}, {"name": "sepal_length", "importance": 0.03, "rev": "workspace"}]}, "title": "Iris Dataset: Feature Importance", "width": 300, "height": 300, "mark": {"type": "bar"}, "encoding": {"x": {"field": "importance", "type": "quantitative", "title": "Feature Importance", "scale": {"zero": false}}, "y": {"field": "name", "type": "nominal", "title": "Feature Name"}, "yOffset": {"field": "rev"}, "color": {"field": "rev", "type": "nominal"}}};
|
|
|
|
vegaEmbed('#iris_feature_importance', spec);
|
|
|
|
</script>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</body>
|
|
|
|
</html>
|