-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
194 lines (164 loc) · 9.98 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
<!DOCTYPE html>
<html>
<head>
<title>MedRT</title>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/distrochart.css">
<link rel="stylesheet" href="css/bar_chart.css">
<link rel="stylesheet" href="css/bubble.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body >
<script src="https://d3js.org/d3.v3.js"></script>
<script src="https://d3js.org/d3-color.v1.min.js"></script>
<div id="details">
<div id="details_organName">name_of_organ</div>
<br>
<table class="" id="details_table">
<tr>
<td style="text-align: right; color: #000000;">Volume:</td>
<td id="details_volume_val">N/A</td>
</tr>
<tr>
<td style="text-align: right; color: #000000;">Mean Dose:</td>
<td id="details_meanDose_val">N/A</td>
</tr>
<tr>
<td style="text-align: right; color: #000000;">Min Dose:</td>
<td id="details_minDose_val">N/A</td>
</tr>
<tr>
<td style="text-align: right; color: #000000;">Max Dose:</td>
<td id="details_maxDose_val">N/A</td>
</tr>
</table>
</div>
<div id="leftContent">
<div id="chart_holder">
<div class="chart-wrapper" id="chart-distro1">
<!--Sorry about all the inline JS. It is a quick way to show what options are available-->
<div class="chart-options" id="button_div">
<center>
<!-- <p>Show: </p> -->
<button id="myBtn" style="height: 50px;width: 75px;background-color: steelblue;color: azure;">Overview</button>
<button onclick="chart1.violinPlots.hide();chart1.boxPlots.show({reset:true});chart1.dataPlots.change({showPlot:false})">Box Plot</button>
<!-- <button onclick="chart1.violinPlots.hide();chart1.notchBoxes.show({reset:true});chart1.boxPlots.show({reset:true, showBox:false,showOutliers:true,boxWidth:20,scatterOutliers:true});chart1.dataPlots.change({showPlot:false,showBeanLines:false})">Notched Box Plot</button> -->
<button onclick="chart1.violinPlots.show({reset:true,clamp:0});chart1.boxPlots.show({reset:true, showWhiskers:false,showOutliers:false,boxWidth:10,lineWidth:15,colors:['#555']});chart1.dataPlots.change({showPlot:false})">Violin Plot Unbound</button>
<!-- <button onclick="chart1.violinPlots.show({reset:true, width:75, clamp:0, resolution:30, bandwidth:50});chart1.dataPlots.show({showBeanLines:true,beanWidth:15,showPlot:false,colors:['#555']});chart1.boxPlots.hide();chart1.notchBoxes.hide()">Bean Plot</button> -->
<button onclick="chart1.violinPlots.hide();chart1.dataPlots.show({showPlot:true, plotType:'beeswarm',colors:null});chart1.boxPlots.hide();">Scatter Plot</button>
</center>
</div>
<script src="js/distrochart.js" charset="utf-8"></script>
<script type="text/javascript">
var chart1;
d3.csv('data/distribution.csv', function(error, data) {
data.forEach(function (d) {d.value = +d.value;
});
var h = document.getElementById("chart_holder").offsetHeight;
var bh = document.getElementById("button_div").offsetHeight;
var w = document.getElementById("chart_holder").offsetWidth;
// console.log(h);
// console.log(bh);
// console.log(h - bh)
chart1 = makeDistroChart({
data:data,
xName:'name',
yName:'value',
axisLabels: {xAxis: null, yAxis: 'Values'},
selector:"#chart-distro1",
chartSize:{height: h - bh, width: w},
constrainExtremes:true});
chart1.renderBoxPlot();
chart1.renderDataPlots();
// chart1.renderNotchBoxes({showNotchBox:false});
chart1.renderViolinPlot({showViolinPlot:false});
});
</script>
</div>
</div>
<div id="bubble_holder">
<div class="row" id="dropdown_legend_container">
<div class="col-4" id="bubble_dropdown"></div>
<div class="col-8" id="legend3D" style="display: inline-block;"></div>
</div>
<div id="bubble"></div>
</div>
<div id="bar_holder">
<div id="dropDown"></div>
<div id="bar_chart" style="overflow: auto;"></div>
</div>
</div>
</div>
<div id= "content" >
<canvas id="c"></canvas>
</div>
<!-- popup -->
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<h1 style="text-align: center">MedRT</h1>
<hr style="width: 100%; border: 0px; border-top: 8px groove #ddd;" />
<p>Radiation therapy is a primary modality to treat head and neck cancer patients.
In this project, we propose a novel approach to correlate similarities and differences between the cancer patients.
We have used the head and neck cancer patients’ data from UIC and MDACC Radiation Therapy plan and visualized
the similarities and dissimilarities between them.</p>
<h5>Distribution plot:</h5>
<p>Data distribution chart is added for the MDACC patient dataset on the basis of patients’ tumor size, age, given dose volume,
treatment duration and smoking status.
Different encodings (i.e. box plot, violin plot, scatter plot) are shown to visualize data distribution.
The yellow circle is the UIC Patient
On hovering mouse over the plots, a tooltip shows the maximum, median, minimum and quartiles.</p>
<h5>Bubble plot:</h5>
<p>Bubble plot shows the patients’ cohorts in terms of gender, race, HPV, overall survival, T-category, tumor subsite.
The radius of the bubbles is dependent on the GTVp tumor volume.
On hovering mouse over a certain cohort, only that cohort shows and other cohorts fade out.
On hovering over a bubble a tooltip will provide the information of a patient ID and the cohor it falls under.
The <b>Brown</b> colored bubble is the UIC patient
If a single patient is clicked, the color will change to white and the you will see the ID in the dropdown menu as well.
additionally, the bar chart - showing the selected patient's organs and the 3D plot will also change according to it.
To get a better view user can zoom in by using mouse scroll. User can move the chart by clicking
and holding a bubble and move the mouse direction.
</p>
<h5>Bar Chart:</h5>
<p>A dropdown is added for selecting a patient.
A bar chart shows how much the patient’s organs were affected by the dose volume given to the patient.
Select a Patient from the dropdown menu, the patient will be highlighted in the bubble chart as well</p>
<h5>3D plot:</h5>
<p>For 3D view, the organs and distributed the color range depending upon the dose amount each organ received are shown.
For one patient (selected from the dropdown / clicking on the patient from the bubble chart),
six most similar patients according to dose pattern are showing on the right side.
Hovering the mouse on the organs, a tooltip shows the organ name and dose value. User can rotate the 3D view for their convenence</p>
</div>
</div>
<script id="template" type="notjs">
<div class='patientSceneTop'>
<div class="description" style="text-align:center; padding-top: 5px;">$</div>
</div>
<div class="scene"></div>
</script>
<!-- 3d plotting -->
<script src="js/3d/three/three.js"></script>
<script src="js/3d/controls/OrbitControls.js"></script>
<script src="js/3d/renderers/Projector.js"></script>
<script src="js/3d/THREEx.KeyboardState.js"></script>
<script src="js/3d/loaders/VTKLoader.js"></script>
<script type="text/javascript" src="js/3d/sceneControl.js"></script>
<script type="text/javascript" src="js/3d/getAllData.js"></script>
<!-- <script type="text/javascript" src="js/3d/colorScale.js"></script> -->
<script type="text/javascript" src="js/3d/medrt.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- boxplot -->
<script src="library/box.js"></script>
<!-- <script src="http://bl.ocks.org/jensgrubert/raw/7789216/box.js"></script> -->
<script src="js/marker.js"></script>
<script src="js/bar_chart.js"></script>
<script src="js/bubble.js"></script>
<script src="js/popup.js"></script>
<script src="js/legend.js"></script>
<script src="library/d3.tip.v0.6.3.js"></script>
<!-- <script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script> -->
</body>
</html>