t-viSNE: Interactive Assessment and Interpretation of t-SNE Projections https://doi.org/10.1109/TVCG.2020.2986996
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
t-viSNE/css/style.css

553 lines
8.8 KiB

/* Custom styling */
/* Main html/body configurations */
html, body {
max-width: 100%;
font-family: sans-serif !important;
font-size: 15px !important;
/*overflow-x: hidden;
overflow-y: hidden;*/
}
.container-fluid {
margin-top: 8px;
}
.btn{
font-size: 15px !important;
}
#param-correlation {
flex: 1;
display: flex;
flex-direction: column;
}
#param-correlation > .param {
display: flex;
margin: 5px 0px;
}
#param-correlation > .param > label {
width: 200px;
text-align: left;
padding: 4px 0 0 0px;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
cursor: default;
}
#param-correlation > .param > input[type='range'] {
width: 60%;
margin-right: 10px;
text-align: left;
}
#param-correlation > .param > select {
flex: 0 0 45%;
width: 100%;
text-align: left;
}
#param-correlation > .param > output {
flex: 1;
text-align: left;
padding:5px 0;
vertical-align: middle;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
cursor: default;
}
/* Control panels on the left side are styled */
#control-panel {
flex: 1;
display: flex;
flex-direction: column;
}
#control-panel > .param {
display: flex;
margin: 5px 0px;
}
#control-panel > .param > label {
width: 200px;
text-align: left;
padding: 4px 0 0 8px;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
cursor: default;
}
#control-panel > .param > input[type='range'] {
width: 60%;
margin-right: 10px;
text-align: left;
}
#control-panel > .param > select {
flex: 0 0 45%;
width: 100%;
text-align: left;
}
#control-panel > .param > output {
flex: 1;
text-align: left;
padding:5px 0;
vertical-align: middle;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
cursor: default;
}
.right-side-cor {
margin-top: -120px;
}
.right-side-hist {
margin-left:-2px;
margin-top: 1px;
}
.right-side-PCP {
margin-top: -57px;
}
#left-side-visual{
margin-left: 15px;
margin-right: -5px;
}
/* Styling of the main canvas */
#modtSNEcanvas {
width: 50vw !important;
height: 42.8vw !important;
border: 1px solid black;
position: absolute;
margin-left: -15px;
z-index: 2;
}
.dot {
fill: steelblue;
}
.bounding-rect {
stroke: red;
stroke-width: 1;
fill: transparent;
}
#overviewRect {
border: 1px solid black;
width: 11vw;
height: 11vw;
position: absolute;
z-index: 1;
}
/* A little styling for knn's bar chart */
#knnBarChart {
width: 48.7vw !important;
height: 2.8vw;
position: absolute !important;
z-index: 1;
}
#hider {
width: 48.7vw !important;
height: 3vw;
background-color: white;
position: absolute !important;
z-index: 2;
}
.med-bottom {
margin-top: 6.7vw;
margin-left: -16px;
width: 50.1vw !important;
height: 5.4vw !important;
}
.med-bottomProv {
margin-top: 6.7vw;
margin-left: -16px;
width: 50.1vw !important;
height: 6.4vw !important;
}
/* Styling of the main SVG behind canvas */
#modtSNEcanvas_svg {
width: 50vw ;
height: 42.8vw ;
opacity: 1.0;
margin-top: 178px;
position:absolute;
z-index: 2;
}
#modtSNEcanvas_svg_Schema {
width: 50vw;
height: 42.8vw;
opacity: 1.0;
position:absolute;
margin-left: -15px;
z-index: 2;
}
circle.swatch{
opacity: 0.5;
}
/* Legend of the Overview t-SNE canvas */
#legend2 {
height: 9vw;
width: 11vw;
text-align: left;
overflow: auto;
margin-left: -6px;
}
/* Legend of the Overview t-SNE canvas */
#legend1 {
height: 7vw;
width: 5vw;
margin-top: -5px;
text-align: left;
}
/* Legend of the Overview t-SNE canvas */
#legend4 {
height: 7vw;
width: 7vw;
margin-left: -20px;
margin-top: -10px;
text-align: left;
}
/* Styling of the ShepardHeatmap */
#sheparheat {
width: 11vw;
height: 11vw;
position: absolute;
}
/* Number of Points font-size */
text.legendtitle {
font-size: 15px;
}
/* Number of Points font-size */
text.label {
font-size: 15px;
}
/* Styling of the ShepardHeatmap */
svg#legend3 {
height: 8vw;
width: 11vw;
text-align: left;
overflow: auto;
}
#PlotCost {
height: 3vw;
width: 8.1vw;
margin-left: -5px;
text-align: left;
z-index: 1;
}
#hider2 {
height: 3vw;
width: 8.4vw;
margin-left: -5px;
text-align: left;
background-color: white;
position: absolute !important;
z-index: 2;
}
.axis text {
font-size: 9pt;
fill: #000;
}
.axis path,
.axis line {
fill: none;
stroke: none;
}
.d3-tip {
line-height: 1;
font-size: 14px;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: rgb(185, 185, 185);
border-radius: 2px;
}
/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
box-sizing: border-box;
display: inline;
font-size: 10px;
line-height: 1;
color: rgba(0, 0, 0, 0.8);
content: "\25BC";
position: absolute;
text-align: center;
}
/* Style northward tooltips differently */
.d3-tip.n:after {
margin: -1px 0 0 0;
top: 100%;
left: 0;
}
/* Dropdown Button */
.dropbtn {
background-color: rgb(185, 185, 185);
color: black;
padding: 14px;
border: none;
cursor: pointer;
}
/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: lightblue;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: rgb(146, 168, 177);
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
/* This is for the Correlation bar chart */
#correlation{
margin-left: -20px;
margin-top: -20px;
}
.y.axis line {
fill: none;
}
.x.axis line {
fill: none;
stroke: #e0e0e0;
shape-rendering: crispEdges;
}
.axis path {
display: none;
}
.brush .extent {
fill-opacity: .125;
shape-rendering: crispEdges;
}
.resize {
display: inline !important; /* show when empty */
fill: #7A7A7A;
fill-opacity: 1;
stroke: #7A7A7A;
stroke-width: 2px;
}
.bar {
shape-rendering: crispEdges;
}
/* Styling for the annotation circle */
.annotation circle {
fill: none;
stroke: black;
}
.annotation path {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
/* Styling of the main SVG behind canvas */
#SvgAnnotator {
position: absolute;
margin-left:-15px;
z-index: 1;
}
#selectionLabel{
border: 1px solid black;
padding: 5px 5px 5px 5px;
}
#PCP{
margin-left:-15px;
margin-top:0px;
width: 23.2vw;
height: 11.6vw;
}
.parent-row{
display: flex;
}
.children-columns{
display: flex;
}
/* Margins for the extra-information panel and the kNNInfo */
#extra-information {
margin-top: -5px;
margin-left: -12px;
}
#kNNInfo {
margin-top: 10px;
}
/* Load and Save Analysis Buttons Styling */
.button {
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin-left:10px;
}
/* Load and Save Analysis Buttons Styling */
.buttonOptimize {
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 15px;
margin-left:10px;
margin-top: -2px;
}
/* Draw a red colored button for reset */
#FactRes{
color: red;
padding-right: 10px;
padding-left: 10px;
}
#isItLoaded {
display: none;
}
#loading {
z-index: 10;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
width: 100%;
height: 90vh;
}
/* kNN barchart color box (legend)*/
ul {
margin: 20px;
}
.input-color {
position: relative;
}
.input-color input {
padding-left: 20px;
}
.input-color .color-box {
width: 10px;
height: 10px;
display: inline-block;
background-color: #ccc;
position: absolute;
left: 5px;
top: 5px;
}
#costHist {
width: 6vw;
height: 9.55vw;
}
#loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 140px;
height: 140px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
margin-left: 450px;
margin-top: 500px;
margin-bottom: 500px;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Add animation to "page content" */
.animate-bottom {
position: relative;
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 1s;
animation-name: animatebottom;
animation-duration: 1s
}
@-webkit-keyframes animatebottom {
from { bottom:-100px; opacity:0 }
to { bottom:0px; opacity:1 }
}
@keyframes animatebottom {
from{ bottom:-100px; opacity:0 }
to{ bottom:0; opacity:1 }
}
#myDiv {
display: none;
text-align: center;
}