Skip to content

Instantly share code, notes, and snippets.

@Saminu

Saminu/prediction.html

Last active July 10, 2019 14:51
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Saminu/ba7e679a722d07395de104e53ccb6608 to your computer and use it in GitHub Desktop.
Save Saminu/ba7e679a722d07395de104e53ccb6608 to your computer and use it in GitHub Desktop.
Download ZIP
prediction.html - Visualizing Uncertainty in Models using Pandas, Scikit Learn, Jinja, Flask, and D3.js
Raw
prediction.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.5.0/d3.js"></script>
<script src="/static/uvis.js"></script>
</head>
<body>
<body class="text-center">
<div class="cover-container d-flex h-100 p-3 mx-auto flex-column">
<header class="masthead mb-auto">
<div class="inner">
<h3 class="masthead-brand">IEEE Vis Predictor</h3>
<nav class="nav nav-masthead justify-content-center">
<a class="nav-link active" href="#">Data</a>
<a class="nav-link" href="#">Info</a>
<a class="nav-link" href="#">Contact</a>
</nav>
</div>
</header>
<main role="main" class="inner cover">
<h1 class="cover-heading">Prediction Result</h1>
<p class="lead">Your Abstract is Best suited to the IEEE Vis Track</p>
<div class="results">
{% if prediction == 0%}
<h2 style="color:red;">InfoVis</h2>
{% elif prediction == 1%}
<h2 style="color:red;">SciVis</h2>
{% elif prediction == 2%}
<h2 style="color:red;">VAST</h2>
{% elif prediction == 3%}
<h2 style="color:red;">Vis</h2>
{% endif %}
<div>
<p>With a Prediction Accuracy of <span style="color:red;"> {{report.accuracy}} </span></p>
</div>
<a href="/">Back</a>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<hr/>
Macro Average
<div id="macro_avg"></div>
</div>
<div class="col-md-12">
<hr/>
Weighted Average
<div id="weighted_avg"></div>
</div>
</div>
</div>
</main>
<footer class="mastfoot mt-auto">
<div class="inner">
<p>Read More on <a href="https://getbootstrap.com/">Medium</a>.</p>
</div>
</footer>
</div>
<script>
let reportData = {{ report | safe }}
let predictionData = {{ prediction | safe }}
let macro_avg = [
{name:'precision', value:reportData['macro avg'].precision, uncert: reportData['accuracy']* 10},
{name:'recall', value:reportData['macro avg'].recall, uncert: reportData['accuracy']* 10},
{name:'f1-score', value:reportData['macro avg']['f1-score'], uncert: reportData['accuracy']* 10}]
let weighted_avg = [
{name:'precision', value:reportData['weighted avg'].precision, uncert: reportData['accuracy']* 10},
{name:'recall', value:reportData['weighted avg'].recall, uncert: reportData['accuracy']* 10},
{name:'f1-score', value:reportData['weighted avg']['f1-score'], uncert: reportData['accuracy']* 10}]
let macroAvgChart = uvis.barChart().utype('gradient').width(600);
d3.select('#macro_avg')
.datum(macro_avg)
.call(macroAvgChart)
let weightedAvgChart = uvis.barChart().utype('gradient').width(600);
d3.select('#weighted_avg')
.datum(weighted_avg)
.call(weightedAvgChart)
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment