doevisualizations/doeVisualization/css/doeviz.css

Data Visualization Library based on RequireJS and D3.js (v4+)

/* .clearfix::after {
    content: "";
    clear: both;
    display: table;
}*/

.container {
    border: 1px solid;
}

.doebarcontainer {
    margin: 0 0;
    padding: 0 0;
}

.doestackedbarcontainer {
    margin: 0 0;
    padding: 0 0;
}


/* .doedivergedbarcontainer {
    width: 700px;
    height: 300px;
    margin: auto;
} */

.doedonutcontainer {
    width: 600px;
    height: 375px;
    /* margin: 25px 25px 100px 300px; */
    /* transform: translateX(100%); */
}

.doepiecontainer {
    width: 600px;
    height: 375px;
    /* margin: 25px 25px 100px 300px; */
}

.doetextcontainer {
    margin: 25px 25px 25px 25px;
}

body {
    font-size: 11px;
    font-family: "Open Sans"
}

.doebar .title {
    font-size: 21px;
    font-weight: bold;
    margin: 10px;
}

.doebar .subTitle {
    font-size: 16px;
    padding: 10px 0px;
}

.doebar .note {
    font-size: 13px;
    font-style: italic;
    padding: 10px 0px;
}

.doebar .lock {
    font-size: 13px;
    padding: 10px 0px;
}


/* .doebar .bar {
    fill: rgb(53, 150, 206);
} */


/* .doebar .bar {
    fill : #23467C;
} */


/* .doebar .bar:hover {
    fill: brown;
} */

.doebar .text {
    /* font-family: sans-serif; */
    font-size: 7px;
    font-weight: 'bold';
    /* fill: white; */
    text-anchor: 'middle';
}

.doebar .bartext {
    font-size: 12px;
    fill: white;
}

.doebar .axis path,
.doebar .axis line {
    fill: none;
    stroke: #000;
    stroke-opacity: .5;
    stroke-width: 1.0;
    shape-rendering: crispEdges;
}

.doebar .axis text {
    font-size: 12px;
    /* font-weight: bold; */
}

.doebar .xLabel {
    font-size: 16px;
    font-weight: bold;
}

.doebar .yLabel {
    font-size: 16px;
    font-weight: bold;
}

.doebar .legend {
    font-size: 12px;
}

.doebar .tooltip {
    background: #eee;
    box-shadow: 0 0 5px #999999;
    border-radius: 50px;
    color: #333;
    display: none;
    font-size: 12px;
    font-weight: normal;
    left: 130px;
    padding: 10px;
    position: absolute;
    text-align: center;
    top: 95px;
    min-width: 90px;
    z-index: 10;
}

.doebar #limit {
    stroke: black;
    stroke-width: 1;
    stroke-dasharray: 3 6;
}


/* donut */

.donutChart h2 {
    font-size: 14px;
    text-align: center;
}

.donutChart .title {
    font-size: 21px;
    font-weight: bold;
    margin: 10px;
}

.donutChart .subTitle {
    font-size: 16px;
    padding: 10px 0px
}

.donutChart p {
    font-size: 10px;
    text-align: center;
}

.donutChart .arc text {
    font: 10px sans-serif;
    text-anchor: middle;
}

.donutChart .arc path {
    stroke: #fff;
}

.donutChart .legend {
    font-size: 12px;
}

.tooltip {
    background: #eee;
    box-shadow: 0 0 5px #999999;
    border-radius: 50px;
    color: #333;
    display: none;
    font-size: 12px;
    font-weight: normal;
    left: 130px;
    padding: 10px;
    position: absolute;
    text-align: center;
    top: 95px;
    min-width: 90px;
    z-index: 10;
    opacity: 1;
}


/* pie */

.pieChart .title {
    font-size: 21px;
    font-weight: bold;
    margin: 10px;
}

.pieChart .subTitle {
    font-size: 16px;
    padding: 10px 0px
}

.pieChart h2 {
    font-size: 14px;
    text-align: center;
}

.pieChart p {
    font-size: 10px;
    text-align: center;
}

.pieChart .arc text {
    font: 10px sans-serif;
    text-anchor: middle;
}

.pieChart .arc path {
    stroke: #fff;
}

.pieChart .legend {
    font-size: 12px;
}


/* .pieChart .tooltip {
    background: #eee;
    box-shadow: 0 0 5px #999999;
    border-radius: 50px;
    color: #333;
    display: none;
    font-size: 10px;
    font-weight: normal;
    left: 130px;
    padding: 10px;
    position: absolute;
    text-align: center;
    top: 95px;
    min-width: 90px;
    z-index: 10;
} */


/* boxplot */

.doeboxplot .title {
    width: 98%;
    margin: 15px auto;
    text-align: center;
    font-size: 21px;
    font-weight: bold;
}

.doeboxplot .subTitle {
    width: 98%;
    margin: 15px auto;
    text-align: center;
    font-size: 16px;
}

.doeboxplot .axis path,
.doeboxplot .axis line {
    fill: none;
    stroke: grey;
    shape-rendering: crispEdges;
}

.doeboxplot .doeboxplottooltip {
    position: absolute;
    padding: 5px;
    font-family: inherit;
    font-size: 12px;
    border: 2px solid #5e5450;
    border-radius: 3px;
    background-color: white;
    color: #5e5450;
}

.doeboxplot .instancetitle {
    font-size: 12px;
    fill: #363333;
    font-style: bold;
}

.doeboxplot .bartext {
    font-size: 11px;
    fill: white;
}

.doeboxplot .legend {
    font-size: 11px;
}

.doeboxplot .xaxis,
.yaxis {
    font-family: inherit;
}

.doeboxplot .tooltipd3 {}


/* divergedbar */

.doedivergedbar .axis path,
.doedivergedbar .axis line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}

.doedivergedbar .titleV {
    width: 98%;
    /*margin: 15px auto;*/
    text-align: center;
    font-size: 21px;
    font-weight: bold;
    padding: 20px 0px 10px 0px;
    /* margin: 10px; */
}

.doedivergedbar .subTitleV {
    width: 98%;
    /*margin: 15px auto;*/
    text-align: center;
    font-size: 16px;
    /*padding: 10px 0px 10px 0px;*/
    padding: 10px 0px;
}

.doedivergedbar .note {
    font-family: FontAwesome;
    width: 98%;
    /* text-align: center; */
    font-size: 13px;
    /* font-style: italic; */
    padding: 10px 0px 20px 50px;
}

.doedivergedbar .legendcontainer {
    padding: 10px 0px 20px 0px;
}

.doedivergedbar .tooltip {
    /*background: #eee;*/
    background-color: white;
    box-shadow: 0 0 5px #999999;
    border-radius: 50px;
    color: #333;
    display: none;
    font-size: 12px;
    font-weight: normal;
    left: 130px;
    padding: 10px;
    position: absolute;
    text-align: center;
    top: 95px;
    min-width: 90px;
    z-index: 10;
}

.doedivergedbar .instancetitle {
    font-family: "Arial";
    font-size: 16px;
    fill: #363333;
    /* font-style: bold; */
    font-weight: bold;
}

.doedivergedbar .bartext {
    font-size: 13px;
    /* fill: white; */
    fill: black;
    /* display: inline;
    padding: .2em .6em .3em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em; */
}

.doedivergedbar .legend {
    font-size: 12px;
    padding: 10px 0px 10px 0px;
}

.doedivergedbar .xaxis,
.yaxis {
    /* font-family: inherit; */
    font-family: "Arial";
    font-size: 14px;
    /* opacity: 0.6; */
}

.doedivergedbar .tooltipd3 {}


/* stackedbar */

.doestackedbar .title {
    font-size: 21px;
    font-weight: bold;
    margin: 10px;
}

.doestackedbar .subTitle {
    font-size: 16px;
    padding: 10px 0px;
}

.doestackedbar .axis text {
    font-size: 12px;
}

.doestackedbar .tooltip {
    background: #eee;
    box-shadow: 0 0 5px #999999;
    border-radius: 50px;
    color: #333;
    display: none;
    font-size: 12px;
    font-weight: normal;
    left: 130px;
    padding: 10px;
    position: absolute;
    text-align: center;
    top: 95px;
    min-width: 90px;
    z-index: 10;
}

.doestackedbar .legend {
    font-size: 12px;
}

.doestackedbar .bartext {
    font-size: 12px;
    fill: white;
}

.doestackedbar .xLabel {
    font-size: 16px;
    font-weight: bold;
}

.doestackedbar .yLabel {
    font-size: 16px;
    font-weight: bold;
}

.doestackedbar .note {
    font-size: 13px;
    font-style: italic;
    padding: 10px 0px;
}


/* .doestackedbar .bar:hover {
    fill: brown;
} */


/* .doestackedbar .tooltip {
    background: #eee;
    box-shadow: 0 0 5px #999999;
    border-radius: 50px;
    color: #333;
    display: none;
    font-size: 10px;
    font-weight: normal;
    left: 130px;
    padding: 10px;
    position: absolute;
    text-align: center;
    top: 95px;
    min-width: 90px;
    z-index: 10;
} */


/* text chart*/

.doetext .title {
    width: 98%;
    /*margin: 15px auto;*/
    text-align: center;
    font-size: 21px;
    font-weight: bold;
    margin: 10px;
}

.doetext .subTitle {
    width: 98%;
    /*margin: 15px auto;*/
    text-align: center;
    font-size: 16px;
    padding: 10px 0px;
}

table.textTable {
    font-family: arial, sans-serif;
    width: 100%;
}

table.textTable,
th,
td {
    border: 1px solid black;
    border-collapse: collapse;
    text-align: left;
    padding: 10px;
}

table.textTable th {
    background-color: #4486c9;
}

table.textTable tr:nth-child(even) {
    background-color: #dddddd;
}

table.textTable tr:hover {
    background-color: yellow;
}


/* general */

.highlight {
    /* font-size: 12px; */
    font-weight: bold;
}

.doehide {
    display: none;
}

.doeshow {
    display: block;
}


/* Responsive, for tablets 768*1024 */


/* @media only screen and (max-width: 768px) {
    body {
        background-color: lightgreen;
    }
    .doebarcontainer {
        width: 600px;
        height: 600px;
        margin: auto;
        transform: scale(1);
    }
} */


/* Large screen phones (414*736), 414 and down*/


/* @media only screen and (max-width: 414px) {
    body {
        background-color: pink;
    }
    .doebarcontainer {
        width: 600px;
        height: 600px;
        margin: auto;
        transform: scale(0.7);
    }
    .doestackedbarcontainer {
        width: 600px;
        height: 600px;
        margin: auto;
        transform: scale(0.7);
    }
    .doedonutcontainer {
        width: 400px;
        height: 400px;
        margin: 25px 25px 100px 300px;
        transform: scale(0.55);
    }
    .doepiecontainer {
        width: 400px;
        height: 400px;
        margin: 25px 25px 100px 300px;
        transform: scale(0.55);
    }
    .doetextcontainer {
        margin: 25px 35px 25px 35px;
        transform: scale(0.65);
    }
    .doedivergedbarcontainer {
        width: 700px;
        height: 300px;
        margin: auto;
        transform: scale(0.55);
    }
} */


/* Small devices (phones, 375*667), 375px and down */


/* @media only screen and (max-width: 375px) {
    body {
        background-color: lightblue;
    }
    .doebarcontainer {
        width: 600px;
        height: 600px;
        margin: auto;
        transform: scale(0.6);
    }
    .doestackedbarcontainer {
        width: 600px;
        height: 600px;
        margin: auto;
        transform: scale(0.7);
    }
    .doedonutcontainer {
        width: 400px;
        height: 400px;
        margin: 25px 25px 100px 300px;
        transform: scale(0.5);
    }
    .doepiecontainer {
        width: 400px;
        height: 400px;
        margin: 25px 25px 100px 300px;
        transform: scale(0.5);
    }
    .doetextcontainer {
        margin: 25px 35px 25px 35px;
        transform: scale(0.6);
    }
    .doedivergedbarcontainer {
        width: 700px;
        height: 300px;
        margin: auto;
        transform: scale(0.5);
    }
} */


/* Extra small devices (phones, 320*568), 320px and down */


/* @media only screen and (max-width: 320px) {
    body {
        background-color: lightgrey;
    }
    .doebarcontainer {
        width: 600px;
        height: 600px;
        margin: auto;
        transform: scale(0.5);
    }
    .doestackedbarcontainer {
        width: 600px;
        height: 600px;
        margin: auto;
        transform: scale(0.55);
    }
    .doedonutcontainer {
        width: 400px;
        height: 400px;
        margin: 25px 25px 100px 300px;
        transform: scale(0.4);
    }
    .doepiecontainer {
        width: 400px;
        height: 400px;
        margin: 25px 25px 100px 300px;
        transform: scale(0.4);
    }
    .doetextcontainer {
        margin: 25px 35px 25px 35px;
        transform: scale(0.5);
    }
    .doedivergedbarcontainer {
        width: 700px;
        height: 300px;
        margin: auto;
        transform: scale(0.4);
    }
} */