diff options
author | Peter Wu <peter@lekensteyn.nl> | 2014-06-12 17:07:34 +0200 |
---|---|---|
committer | Peter Wu <peter@lekensteyn.nl> | 2014-06-12 17:07:34 +0200 |
commit | b1262d77a3dfd57701b45a0f215314b5b3ebdd5a (patch) | |
tree | 59db9f64db0cc75d82fb4e8c33f7f65128486208 /addicted-brands.html | |
parent | 0180fc32695249d471259ed67a6b0245b082b324 (diff) | |
download | d3viz-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.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> |