diff --git a/css/style.css b/css/style.css index 0e9973d0c5..4d490e8f15 100644 --- a/css/style.css +++ b/css/style.css @@ -1,3 +1,142 @@ + +.popover { + position: absolute; + top: 0; + left: 0; + font-size:12px; + z-index: 1010; + display: none; + max-width: 276px; + padding: 1px; + text-align: left; + white-space: normal; + background-color: #ffffff; + border: 1px solid #cccccc; + border: 1px solid rgba(0, 0, 0, 0.2); + border-radius: 6px; + -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); + background-clip: padding-box; +} + +.popover.top { + margin-top: -10px; +} + +.popover.right { + margin-left: 10px; +} + +.popover.bottom { + margin-top: 10px; +} + +.popover.left { + margin-left: -10px; +} + +.popover-title { + padding: 8px 14px; + margin: 0; + font-size: 14px; + font-weight: normal; + line-height: 18px; + background-color: #f7f7f7; + border-bottom: 1px solid #ebebeb; + border-radius: 5px 5px 0 0; +} + +.popover-content { + padding: 9px 14px; +} + +.popover .arrow, +.popover .arrow:after { + position: absolute; + display: block; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; +} + +.popover .arrow { + border-width: 11px; +} + +.popover .arrow:after { + border-width: 10px; + content: ""; +} + +.popover.top .arrow { + bottom: -11px; + left: 50%; + margin-left: -11px; + border-top-color: #999999; + border-top-color: rgba(0, 0, 0, 0.25); + border-bottom-width: 0; +} + +.popover.top .arrow:after { + bottom: 1px; + margin-left: -10px; + border-top-color: #ffffff; + border-bottom-width: 0; + content: " "; +} + +.popover.right .arrow { + top: 50%; + left: -11px; + margin-top: -11px; + border-right-color: #999999; + border-right-color: rgba(0, 0, 0, 0.25); + border-left-width: 0; +} + +.popover.right .arrow:after { + bottom: -10px; + left: 1px; + border-right-color: #ffffff; + border-left-width: 0; + content: " "; +} + +.popover.bottom .arrow { + top: -11px; + left: 50%; + margin-left: -11px; + border-bottom-color: #999999; + border-bottom-color: rgba(0, 0, 0, 0.25); + border-top-width: 0; +} + +.popover.bottom .arrow:after { + top: 1px; + margin-left: -10px; + border-bottom-color: #ffffff; + border-top-width: 0; + content: " "; +} + +.popover.left .arrow { + top: 50%; + right: -11px; + margin-top: -11px; + border-left-color: #999999; + border-left-color: rgba(0, 0, 0, 0.25); + border-right-width: 0; +} + +.popover.left .arrow:after { + right: 1px; + bottom: -10px; + border-left-color: #ffffff; + border-right-width: 0; + content: " "; +} + .area1-color { fill: #0000ff; } @@ -74,11 +213,17 @@ circle { font-weight: 400; } -h2 { +h2.chart_title { font-weight: 400; margin-bottom: 0; } +h2.chart_title span { + font-size:.5em; + color:darkgray; + font-weight:800; +} + #head { margin-bottom: 20px; } diff --git a/index.html b/index.html index 99cabd29de..1ad7959ea5 100644 --- a/index.html +++ b/index.html @@ -7,12 +7,13 @@ rel='stylesheet' type='text/css'> - + + @@ -26,6 +27,7 @@
Here is a collection, and something of a set of visual tests, of graphics we will be using. The point of this repository is to ensure that everything under js/metrics_graphics.js works properly, so we diff --git a/js/main.js b/js/main.js index bc9c2bc4cf..d3b64a45c8 100644 --- a/js/main.js +++ b/js/main.js @@ -1,9 +1,16 @@ $(document).ready(function() { //sample chart 1 - var fake_baselines = [{value:150000000, label:"first baseline"},{value:15000000, label:"second baseline"}] d3.json('data/fake_users1.json', function(data) { - $('#fake_users1').append('