Template Classification

<!
DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
crossorigin="anonymous">
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
.styled-table {
border-collapse: collapse;
margin: 25px 0;
font-size: 0.9em;
font-family: sans-serif;
min-width: 400px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
.styled-table thead tr {
background-color: #33b2ff;
color: #ffffff;
text-align: left;
}
.styled-table th,
.styled-table td {
padding: 12px 15px;
}
.styled-table tbody tr {
border-bottom: 1px solid #dddddd;
}
.styled-table tbody tr:nth-of-type(even) {

background-color: #f3f3f3;
}
.styled-table tbody tr:last-of-type {

border-bottom: 2px solid #009879;
}
.styled-table tbody td.active-row {
font-weight: bold;
background-color : #b7e6f98a;
color: #10b8d5;
}
.node circle {
fill: #999;
stroke: steelblue;
stroke-width: 3px;
}
.node text {
font: 12px sans-serif;
}
.link {
fill: none;
stroke: #ccc;
stroke-width: 2px;
}
#treeDiv {
width: 100%;
height: 600px;
margin: 0 auto;
}
</style>
<script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
<div id="figurediv" class="row" style="width: 100%;height: 100%;" >

<input type="hidden" name="AccuracyScore" id="hdnAccuracyScore" value="">




<div class="col-6" style="border:1px solid black;height: 100%;overflow-y:
auto;">
<table class="styled-table">
<thead>
<tr style="position: sticky;top: 0;">
<th> # </th>
<th> Precision (%)</th>
<th> Recall (%) </th>
</tr>
</thead>
<tbody>
{% for row in df_precision_recall %}
<tr>
<td>
{{ row.index }}
</td>
<td>
{{ row.Precision }}
</td>
<td>
{{ row.Recall }}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="col-6" style="border:1px solid black;height: 100%;overflow-y:
auto;">
<table class="styled-table">
<thead>
<tr style="position: sticky;top: 0;">
<th> # </th>
{% for row in df_conf_matrix_index %}
<th> {{row}} </th>
{% endfor %}
</tr>
</thead>
<tbody>
{% for item in df_conf_matrix %}
<tr>
<td> {{ item.index }}</td>
{% for header in df_conf_matrix_index %}

<td>{{ item[header] }}</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
</div>


{%- if tree_json -%}
<div id="treeDiv" class="col-6" style="border:1px solid black;">
</div>
{% else %}
<div class="col-6" style="border:1px solid black;">
{{fig}}
</div>
{% endif %}
<div class="col-6" style="border:1px solid black;">
{{corr_fig}}
</div>
</div>
<script>
const treeData = {{tree_json}};

var dataset = {{data}};
//========== Table view ==========//
var columns = Object.keys(dataset[0] || {}).map(function(key) {

return { "data": key, "title": key };
});
// Initialize DataTable
$('#example').DataTable({
data: dataset,
columns: columns,
order: [[0, 'desc']],
scrollY: '300px',
scrollX: true,
scrollCollapse: true,
createdRow: function(row, data, dataIndex) {
debugger;
// Highlight rows from dataset1
var isInDataset1 = dataset1.some(function(item) {
// Check if all key-value pairs in the row match an item in
dataset1
return Object.keys(item).every(function(key) {
return item[key] === data[key];
});
});
if (isInDataset1) {
$('td:eq(1)', row).addClass('highlight');
}
}
});
//========== Tree View ==========//

const margin = { top: 20, right: 90, bottom: 30, left: 90 },
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
const svg = d3.select("#treeDiv").append("svg")

.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top
+ ")");
const tree = d3.tree().size([height, width]);
let rootData = d3.hierarchy(treeData, d => d.children);

rootData.x0 = height / 2;
rootData.y0 = 0;
let i = 0; // Initialize i
const duration = 750; // Initialize duration
// Collapse nodes to start with

rootData.children.forEach(collapse);
update(rootData);
function update(source) {
const treeData = tree(rootData);
const nodes = treeData.descendants();

const links = treeData.descendants().slice(1);
nodes.forEach(d => d.y = d.depth * 180);
const node = svg.selectAll('g.node')

.data(nodes, d => d.id || (d.id = ++i));
const nodeEnter = node.enter().append('g')

.attr('class', 'node')
.attr("transform", d => "translate(" + source.y0 + "," +
source.x0 + ")")
.on('click', click);
nodeEnter.append('circle')
.attr('class', 'node')
.attr('r', 1e-6)
.style("fill", d => d.children ? "lightsteelblue" :
"green") // Default to lightsteelblue
.style("stroke", "#333")
.style("stroke-width", 2);
nodeEnter.append('text')
.attr("dy", ".35em")
.attr("x", d => d.children ? -13 : 13)
.attr("text-anchor", d => d.children ? "end" : "start")
.text(d => d.data.name);
const nodeUpdate = nodeEnter.merge(node);
nodeUpdate.transition()
.duration(duration)
.attr("transform", d => "translate(" + d.y + "," + d.x +
")");
nodeUpdate.select('circle.node')
.attr('r', 10)
.style("fill", d => {
if (d.children) {
return "lightsteelblue"; // Parent nodes
} else {
return "green"; // Leaf nodes
}
})
.attr('cursor', 'pointer');
const nodeExit = node.exit().transition()

.duration(duration)
.attr("transform", d => "translate(" + source.y + "," +
source.x + ")")
.remove();
nodeExit.select('circle')
.attr('r', 1e-6);
nodeExit.select('text')
.style('fill-opacity', 1e-6);
const link = svg.selectAll('path.link')

.data(links, d => d.id);
const linkEnter = link.enter().insert('path', "g")

.attr("class", "link")
.attr('d', d => {
const o = { x: source.x0, y: source.y0 };
return diagonal(o, o);
});
const linkUpdate = linkEnter.merge(link);

linkUpdate.transition()
.duration(duration)
.attr('d', d => diagonal(d, d.parent));
const linkExit = link.exit().transition()

.duration(duration)
.attr('d', d => {
const o = { x: source.x, y: source.y };
return diagonal(o, o);
})
.remove();
nodes.forEach(d => {
d.x0 = d.x;
d.y0 = d.y;
});
function diagonal(s, d) {
return `M ${s.y} ${s.x}
C ${(s.y + d.y) / 2} ${s.x},
${(s.y + d.y) / 2} ${d.x},
${d.y} ${d.x}`;
}
function click(event, d) {
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
update(d);
}
}
function collapse(d) {
if (d.children) {
d._children = d.children;
d._children.forEach(collapse);
d.children = null;
}
}
</script>
</body>
</html>

Template Classification

Uploaded by

Copyright:

Available Formats

Template Classification

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Template Classification

Uploaded by

Copyright:

Available Formats

<!

.styled-table tbody tr:nth-of-type(even) {

.styled-table tbody tr:last-of-type {

<div id="figurediv" class="row" style="width: 100%;height: 100%;" >

<td> {{ item.index }}</td>

{% for header in df_conf_matrix_index %}

const treeData = {{tree_json}};

//========== Table view ==========//

var columns = Object.keys(dataset[0] || {}).map(function(key) {

//========== Tree View ==========//

const svg = d3.select("#treeDiv").append("svg")

const tree = d3.tree().size([height, width]);

let rootData = d3.hierarchy(treeData, d => d.children);

// Collapse nodes to start with

const nodes = treeData.descendants();

nodes.forEach(d => d.y = d.depth * 180);

const node = svg.selectAll('g.node')

const nodeEnter = node.enter().append('g')

const nodeUpdate = nodeEnter.merge(node);

const nodeExit = node.exit().transition()

const link = svg.selectAll('path.link')

const linkEnter = link.enter().insert('path', "g")

const linkUpdate = linkEnter.merge(link);

const linkExit = link.exit().transition()

You might also like