Scribd
Upload
30 views

Template Classification

Uploaded by

Rana Pratik
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
30 views

Template Classification

Uploaded by

Rana Pratik
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 6

<!

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-4" style="border:1px solid black;"> -->


<!-- <p> {{ tree_fig }} </p> -->
<!-- </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>
<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>

<!-- Decision Tree Visualization -->


{%- 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>

You might also like