summaryrefslogtreecommitdiff
path: root/addicted-brands.html
diff options
context:
space:
mode:
authorPeter Wu <peter@lekensteyn.nl>2014-06-12 17:07:34 +0200
committerPeter Wu <peter@lekensteyn.nl>2014-06-12 17:07:34 +0200
commitb1262d77a3dfd57701b45a0f215314b5b3ebdd5a (patch)
tree59db9f64db0cc75d82fb4e8c33f7f65128486208 /addicted-brands.html
parent0180fc32695249d471259ed67a6b0245b082b324 (diff)
downloadd3viz-b1262d77a3dfd57701b45a0f215314b5b3ebdd5a.tar.gz
Add visualizer for hashtags vs users brands prefs
./run-psql csv "WITH q AS ($(cat queries/userbrand.sql)) SELECT brand, lhashtag as hashtag, sum, total, percentage FROM q" > drugs.csv
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>