summaryrefslogtreecommitdiff
path: root/addicted-brands.html
diff options
context:
space:
mode:
Diffstat (limited to 'addicted-brands.html')
-rw-r--r--addicted-brands.html77
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>