style.css 2.6 KB

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