style.css 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
  1. body {
  2. overflow: scroll;
  3. }
  4. /* For scatter plot */
  5. text {
  6. font-family: sans-serif;
  7. fill: #000000;
  8. }
  9. table {
  10. visibility: hidden;
  11. position: absolute;
  12. top: 30px;
  13. left: 500px;
  14. font-family: sans-serif;
  15. font-size: 0.7em;
  16. }
  17. tr:nth-child(even) {
  18. background-color: #d9d9d9;
  19. }
  20. .brushed {
  21. fill: #ff3399;
  22. stroke: #8e1b54;
  23. opacity: 1.0;
  24. }
  25. .brush .extent {
  26. stroke: #000;
  27. stroke-width: 1.5px;
  28. fill: #000;
  29. fill-opacity: 0.3;
  30. }
  31. .point.selected, .point.saved {
  32. stroke: darkred;
  33. stroke-width: 3;
  34. }
  35. #sct_container {
  36. display: flex;
  37. flex-direction: row;
  38. margin: 0 -5px;
  39. }
  40. #scatterplot_area {
  41. margin: 0 5px;
  42. }
  43. #sct_dropdown_area {
  44. margin: 0 5px;
  45. }
  46. #sct_checkbox_area {
  47. margin: 0 5px;
  48. }
  49. /* for node-link diagram */
  50. .node circle {
  51. fill: #fff;
  52. stroke: steelblue;
  53. stroke-width: 3px;
  54. }
  55. .node text {
  56. font: 12px sans-serif;
  57. }
  58. .link {
  59. fill: none;
  60. stroke: #ccc;
  61. stroke-width: 2px;
  62. }
  63. /*TREEMAP*/
  64. text {
  65. pointer-events: stroke;
  66. }
  67. .grandparent text {
  68. font-weight: bold;
  69. }
  70. rect.parent,
  71. .grandparent rect {
  72. stroke-width: 6px;
  73. }
  74. .grandparent rect {
  75. fill: orange;
  76. }
  77. .grandparent:hover rect {
  78. fill: #ee9700;
  79. }
  80. .children rect.parent,
  81. .grandparent rect {
  82. cursor: pointer;
  83. }
  84. .children rect.parent {
  85. fill: #bbb;
  86. fill-opacity: 0.5;
  87. }
  88. .children:hover rect {
  89. fill: #ee9700;
  90. fill-opacity: 0.5;
  91. }
  92. /* parallel coordinates style */
  93. .tick {
  94. font-size: 10pt;
  95. color: red;
  96. }
  97. .foreground path {
  98. fill: none !important;
  99. stroke: steelblue;
  100. stroke-width: 1.2px;
  101. }
  102. .foreground path.fade {
  103. stroke: #000;
  104. stroke-opacity: .05;
  105. }
  106. /* Brush on axis */
  107. .brush .extent .selection {
  108. fill-opacity: .3;
  109. stroke: #fff;
  110. shape-rendering: crispEdges;
  111. }
  112. .axis line,
  113. .axis path {
  114. fill: none;
  115. stroke: #000;
  116. stroke-width: 2px;
  117. shape-rendering: crispEdges;
  118. }
  119. .axis text {
  120. text-shadow: 0 1px 0 #fff;
  121. cursor: move;
  122. font-size: 12px;
  123. fill: black;
  124. }
  125. .background path {
  126. fill: none;
  127. stroke: #ddd;
  128. shape-rendering: crispEdges;
  129. }
  130. .eixoSexo line {
  131. fill: black;
  132. stroke-width: 3px;
  133. }
  134. .eixoSexo path {
  135. fill: none;
  136. stroke: url(#svgGradient);
  137. stroke-width: 3px;
  138. shape-rendering: crispEdges;
  139. }
  140. .eixoSexo text {
  141. text-shadow: 0 1px 0 #fff;
  142. cursor: move;
  143. font-size: 13pt;
  144. fill: black;
  145. }
  146. /* Heatmap Table */
  147. #super_container {
  148. display: flex;
  149. flex-direction: column;
  150. }
  151. #choropleth_heatmap_container {
  152. display: flex;
  153. flex-direction: row;
  154. }
  155. #heatmap_container {
  156. display: flex;
  157. flex-direction: row;
  158. margin: 0.5px;
  159. }
  160. #smallmultiples_container {
  161. display: flex;
  162. flex-direction: row;
  163. margin: 0.5px;
  164. }