diff options
Diffstat (limited to 'addicted-brands.html')
-rw-r--r-- | addicted-brands.html | 77 |
1 files changed, 77 insertions, 0 deletions
diff --git a/addicted-brands.html b/addicted-brands.html new file mode 100644 index 0000000..d8f9d9c --- /dev/null +++ b/addicted-brands.html @@ -0,0 +1,77 @@ +<!doctype html> +<html> +<head> +<meta charset="utf-8"> +<title>Addicted Brands</title> +</head> +<style> +html, body { + padding: 0; + margin: 0; +} +#legenda { display: none; } +/* +#legenda { + position: fixed; +} +#legenda span { + color: white; + width: 100px; + display: block; +} +#charts { + margin-left: 100px; +} +*/ +/* graphs and bars */ +.graph { + position: relative; + height: 200px; + background: #eee; + padding: 5px; + margin: 3px; + width: 300px; + display: inline-block; + border-radius: 16px; +} +.graph .hashtag:before { + content: '#'; +} +.graph .hashtag { + font-weight: bold; + text-shadow: #ccc -1px -1px; +} +.graph .bar { + text-align: center; + background: red; + position: absolute; + width: 40px; + bottom: 1em; + border-top-left-radius: 6px; + border-top-right-radius: 6px; +} +.graph .perc { + position: absolute; + top: -1em; +} +.graph .details { + color: white; + text-shadow: #999 0 0 9px; +} +.graph .brand { + position: absolute; + bottom: -1em; + font-size: smaller; + left: 0; +} +</style> +<link rel="stylesheet" href="svg.css"> +<body> + +<div id="legenda"></div> +<div id="charts"></div> + +<script src="lib/d3.js"></script> +<script src="js/addicted-brands.js"></script> +</body> +</html> |