Last active
August 29, 2015 13:57
-
-
Save danharr/9837048 to your computer and use it in GitHub Desktop.
Day Parting
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta http-equiv="content-type" content="text/html;charset=utf-8"> | |
<title>Social Dashboard</title> | |
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.v2.js"></script> | |
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script> | |
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'> | |
<style type="text/css"> | |
p { | |
font-family: 'Open Sans Condensed', cursive; | |
font-size: 40px; | |
} | |
h1 { | |
font-family: 'Open Sans Condensed', 'arial' ,cursive; | |
font-size: 26px; | |
} | |
p.SMD { | |
font-size:22px; | |
color:black;} | |
p.right { | |
text-align: right; | |
position: fixed; | |
max-width: 200px; | |
top: 200px; | |
left:800px; | |
font-size:18px; | |
} | |
button { | |
border-top: 1px solid #96d1f8; | |
background: #65a9d7; | |
background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7)); | |
background: -webkit-linear-gradient(top, #3e779d, #65a9d7); | |
background: -moz-linear-gradient(top, #3e779d, #65a9d7); | |
background: -ms-linear-gradient(top, #3e779d, #65a9d7); | |
background: -o-linear-gradient(top, #3e779d, #65a9d7); | |
padding: 5px 10px; | |
-webkit-border-radius: 0px; | |
-moz-border-radius: 0px; | |
border-radius: 0px; | |
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0; | |
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0; | |
box-shadow: rgba(0,0,0,1) 0 1px 0; | |
text-shadow: rgba(0,0,0,.4) 0 1px 0; | |
color: white; | |
font-size: 18px; | |
font-family: 'Open Sans Condensed',Georgia, serif; | |
text-decoration: none; | |
vertical-align: middle; | |
} | |
button:hover { | |
border-top-color: #28597a; | |
background: #28597a; | |
color: #ccc; | |
} | |
button:active { | |
border-top-color: #1b435e; | |
background: #1b435e; | |
} | |
#bimps { | |
position: fixed; | |
top: 80px; | |
left:60px; } | |
#bclicks { | |
position: fixed; | |
top: 80px; | |
left:180px; } | |
#bconvs { | |
position: fixed; | |
top: 80px; | |
left:255px; } | |
</style> | |
</head> | |
<body> | |
<div id="banner"> | |
<p class = "SMD">Day Parting Test - Artemis</p> | |
</div> | |
<button id="bimps" onclick="myImps()">Impressions</button> | |
<button id="bclicks" onclick="myClicks()">Clicks</button> | |
<button id="bconvs" onclick="myConvs()">Conversions</button> | |
<script type="text/javascript"> | |
function myImps() | |
{ | |
svg.selectAll("rect.pos1") | |
.transition() | |
.duration(2000) | |
.attr("fill",function(d) { | |
return p1icolor(d[2]); | |
}) | |
svg.selectAll("rect.pos2") | |
.transition() | |
.duration(2000) | |
.attr("fill",function(d) { | |
return p2icolor(d[2]); | |
}) | |
} | |
function myClicks() | |
{ | |
svg.selectAll("rect.pos1") | |
.transition() | |
.duration(2000) | |
.attr("fill",function(d) { | |
return p1ccolor(d[3]); | |
}) | |
svg.selectAll("rect.pos2") | |
.transition() | |
.duration(2000) | |
.attr("fill",function(d) { | |
return p2ccolor(d[3]); | |
}) | |
} | |
function myConvs() | |
{ | |
svg.selectAll("rect.pos1") | |
.transition() | |
.duration(2000) | |
.attr("fill",function(d) { | |
return p1scolor(d[4]); | |
}) | |
svg.selectAll("rect.pos2") | |
.transition() | |
.duration(2000) | |
.attr("fill",function(d) { | |
return p2scolor(d[4]); | |
}) | |
} | |
//Width and height | |
var w = 1000; | |
var h = 1000; | |
//click color scales | |
var p1ccolor = d3.scale.linear() | |
.domain([0,140000]) | |
.range(["white","blue"]); | |
var p2ccolor = d3.scale.linear() | |
.domain([0,600]) | |
.range(["white","blue"]); | |
//sales color scales | |
var p1scolor = d3.scale.linear() | |
.domain([0,11000]) | |
.range(["white","red"]); | |
var p2scolor = d3.scale.linear() | |
.domain([0,1500]) | |
.range(["white","red"]); | |
//imps color scales | |
var p1icolor = d3.scale.linear() | |
.domain([0,0]) | |
.range(["white","green"]); | |
var p2icolor = d3.scale.linear() | |
.domain([0,2200000]) | |
.range(["white","green"]); | |
//Create SVG element | |
var svg = d3.select("body") | |
.append("svg") | |
.attr("width", w) | |
.attr("height", h); | |
svg.selectAll("pos1") | |
.data([ | |
[100,95,0,26,6], | |
[100,115,0,18,12], | |
[100,135,0,74,13], | |
[100,155,0,99,11], | |
[100,175,0,29,15], | |
[100,195,0,39,2], | |
[100,215,0,35,16], | |
[120,95,0,2994,22], | |
[120,115,0,2973,35], | |
[120,135,0,5981,61], | |
[120,155,0,13356,62], | |
[120,175,0,4356,77], | |
[120,195,0,4305,30], | |
[120,215,0,3783,31], | |
[140,95,0,7073,40], | |
[140,115,0,6739,110], | |
[140,135,0,11042,141], | |
[140,155,0,23068,151], | |
[140,175,0,9148,245], | |
[140,195,0,10465,140], | |
[140,215,0,10090,91], | |
[160,95,0,10347,94], | |
[160,115,0,9466,231], | |
[160,135,0,12203,220], | |
[160,155,0,23910,215], | |
[160,175,0,12537,452], | |
[160,195,0,15527,208], | |
[160,215,0,17890,152], | |
[180,95,0,12363,179], | |
[180,115,0,10734,321], | |
[180,135,0,13115,279], | |
[180,155,0,21322,297], | |
[180,175,0,14913,618], | |
[180,195,0,17816,306], | |
[180,215,0,22376,246], | |
[200,95,0,11846,220], | |
[200,115,0,11258,412], | |
[200,135,0,24122,396], | |
[200,155,0,17815,380], | |
[200,175,0,16763,798], | |
[200,195,0,15199,321], | |
[200,215,0,22858,220], | |
[220,95,0,31875,609], | |
[220,115,0,29257,853], | |
[220,135,0,48509,932], | |
[220,155,0,41063,778], | |
[220,175,0,37914,1452], | |
[220,195,0,57317,1091], | |
[220,215,0,68666,669], | |
[240,95,0,30705,670], | |
[240,115,0,30951,1123], | |
[240,135,0,45313,1096], | |
[240,155,0,38773,795], | |
[240,175,0,39353,1604], | |
[240,195,0,50508,1212], | |
[240,215,0,55191,608], | |
[260,95,0,30010,686], | |
[260,115,0,33573,1319], | |
[260,135,0,45943,1211], | |
[260,155,0,37335,838], | |
[260,175,0,44394,2024], | |
[260,195,0,44434,1216], | |
[260,215,0,43996,548], | |
[280,95,0,27035,692], | |
[280,115,0,31782,1353], | |
[280,135,0,41293,1267], | |
[280,155,0,33453,824], | |
[280,175,0,45374,2460], | |
[280,195,0,41083,1397], | |
[280,215,0,39110,616], | |
[300,95,0,26452,699], | |
[300,115,0,33163,1591], | |
[300,135,0,41491,1341], | |
[300,155,0,32183,863], | |
[300,175,0,51619,2775], | |
[300,195,0,41301,1637], | |
[300,215,0,38370,604], | |
[320,95,0,28605,759], | |
[320,115,0,41093,1960], | |
[320,135,0,51284,1745], | |
[320,155,0,35602,916], | |
[320,175,0,69579,4091], | |
[320,195,0,48392,2238], | |
[320,215,0,39222,701], | |
[340,95,0,29522,761], | |
[340,115,0,54129,2704], | |
[340,135,0,62840,2254], | |
[340,155,0,38798,908], | |
[340,175,0,96388,6142], | |
[340,195,0,67996,3403], | |
[340,215,0,38969,665], | |
[360,95,0,31442,812], | |
[360,115,0,81391,4605], | |
[360,135,0,80061,3132], | |
[360,155,0,41355,1078], | |
[360,175,0,137988,10642], | |
[360,195,0,87019,5118], | |
[360,215,0,39346,631], | |
[380,95,0,34816,888], | |
[380,115,0,64050,3662], | |
[380,135,0,53337,2069], | |
[380,155,0,41951,1112], | |
[380,175,0,8668,1831], | |
[380,195,0,43478,2488], | |
[380,215,0,40365,693], | |
[400,95,0,38476,1030], | |
[400,115,0,33087,1181], | |
[400,135,0,36887,962], | |
[400,155,0,44167,1242], | |
[400,175,0,458,214], | |
[400,195,0,26914,650], | |
[400,215,0,41167,720], | |
[420,95,0,35282,963], | |
[420,115,0,40142,1095], | |
[420,135,0,41876,976], | |
[420,155,0,43547,1187], | |
[420,175,0,451,225], | |
[420,195,0,75727,896], | |
[420,215,0,34656,597], | |
[440,95,0,27815,704], | |
[440,115,0,52356,1057], | |
[440,135,0,56631,915], | |
[440,155,0,35397,992], | |
[440,175,0,541,211], | |
[440,195,0,53523,627], | |
[440,215,0,26212,502], | |
[460,95,0,8509,300], | |
[460,115,0,18345,382], | |
[460,135,0,28762,467], | |
[460,155,0,11006,380], | |
[460,175,0,276,187], | |
[460,195,0,19616,288], | |
[460,215,0,8343,186], | |
[480,95,0,33,33], | |
[480,115,0,65,46], | |
[480,135,0,146,97], | |
[480,155,0,59,52], | |
[480,175,0,100,92], | |
[480,195,0,138,88], | |
[480,215,0,61,30], | |
[500,95,0,18,19], | |
[500,115,0,33,13], | |
[500,135,0,55,29], | |
[500,155,0,27,34], | |
[500,175,0,44,48], | |
[500,195,0,74,0], | |
[500,215,0,29,1], | |
[520,95,0,12,0], | |
[520,115,0,21,0], | |
[520,135,0,27,1], | |
[520,155,0,15,0], | |
[520,175,0,18,0], | |
[520,195,0,45,0], | |
[520,215,0,16,0], | |
[540,95,0,5,0], | |
[540,115,0,15,0], | |
[540,135,0,751,0], | |
[540,155,0,10,0], | |
[540,175,0,25,0], | |
[540,195,0,27,0], | |
[540,215,0,8,0], | |
[560,95,0,9,0], | |
[560,115,0,26,0], | |
[560,135,0,46,0], | |
[560,155,0,16,0], | |
[560,175,0,22,0], | |
[560,195,0,11,0], | |
[560,215,0,8,0] | |
]) | |
.enter() | |
.append("rect") | |
.attr("x", function(d) { | |
return d[0]; | |
}) | |
.attr("y", function(d) { | |
return d[1]; | |
}) | |
.attr("height", 20) | |
.attr("width", 20) | |
.style("stroke","black") | |
.style("stroke-width",0.1) | |
.attr("class", "pos1") | |
.attr("fill","white") | |
.transition() | |
.duration(1000) | |
.attr("fill",function(d) { | |
return p1ccolor(d[3]); | |
}) | |
svg.selectAll("pos2") | |
.data([ | |
[100,315,0,0,14], | |
[100,335,0,0,15], | |
[100,355,0,0,12], | |
[100,375,0,0,19], | |
[100,395,0,0,3], | |
[100,415,0,0,20], | |
[120,295,243743,31,15], | |
[120,315,411778,60,36], | |
[120,335,461568,80,52], | |
[120,355,314242,24,64], | |
[120,375,574182,64,39], | |
[120,395,416648,43,67], | |
[120,415,226718,24,55], | |
[140,295,421237,35,58], | |
[140,315,722034,49,55], | |
[140,335,783423,58,123], | |
[140,355,515246,47,148], | |
[140,375,1163359,210,124], | |
[140,395,856740,84,170], | |
[140,415,416483,38,164], | |
[160,295,542680,41,99], | |
[160,315,997587,105,92], | |
[160,335,964957,65,185], | |
[160,355,593948,38,203], | |
[160,375,1669731,291,184], | |
[160,395,1274996,82,326], | |
[160,415,621055,42,285], | |
[180,295,610977,43,125], | |
[180,315,1123816,91,139], | |
[180,335,1088883,77,232], | |
[180,355,599444,35,269], | |
[180,375,2019351,353,244], | |
[180,395,1312673,92,448], | |
[180,415,656495,44,429], | |
[200,295,512840,24,135], | |
[200,315,1072919,99,162], | |
[200,335,1135946,69,268], | |
[200,355,579154,31,276], | |
[200,375,2031996,353,337], | |
[200,395,1317992,81,425], | |
[200,415,573290,55,396], | |
[220,295,466557,34,160], | |
[220,315,999926,96,177], | |
[220,335,1032164,67,252], | |
[220,355,497832,32,273], | |
[220,375,1996784,360,301], | |
[220,395,1235118,101,446], | |
[220,415,559306,49,391], | |
[240,295,481205,33,176], | |
[240,315,1018198,89,209], | |
[240,335,1050281,67,264], | |
[240,355,495213,36,213], | |
[240,375,2015906,331,323], | |
[240,395,1164825,96,412], | |
[240,415,556147,58,312], | |
[260,295,485944,37,123], | |
[260,315,1046613,86,215], | |
[260,335,1068578,63,204], | |
[260,355,531140,47,207], | |
[260,375,2083494,399,402], | |
[260,395,1191741,78,406], | |
[260,415,561866,61,287], | |
[280,295,465609,30,172], | |
[280,315,974151,93,222], | |
[280,335,957289,69,254], | |
[280,355,472732,27,206], | |
[280,375,2013523,413,428], | |
[280,395,1184956,106,472], | |
[280,415,565353,57,283], | |
[300,295,447512,45,193], | |
[300,315,1130735,103,269], | |
[300,335,993116,70,282], | |
[300,355,493181,45,212], | |
[300,375,1980518,424,469], | |
[300,395,1218515,117,499], | |
[300,415,612356,75,217], | |
[320,295,512566,56,188], | |
[320,315,1310281,130,365], | |
[320,335,1142119,81,367], | |
[320,355,495579,42,226], | |
[320,375,2180938,469,652], | |
[320,395,1266855,116,604], | |
[320,415,658887,95,256], | |
[340,295,493911,57,171], | |
[340,315,1364282,160,406], | |
[340,335,1094728,91,421], | |
[340,355,496405,37,201], | |
[340,375,2194516,544,905], | |
[340,395,1314245,150,977], | |
[340,415,722634,107,266], | |
[360,295,527488,77,183], | |
[360,315,1524692,166,656], | |
[360,335,1247827,100,720], | |
[360,355,564485,51,246], | |
[360,375,2243403,567,1424], | |
[360,395,1312019,133,1365], | |
[360,415,732574,120,267], | |
[380,295,615667,98,213], | |
[380,315,1918368,250,546], | |
[380,335,1456088,113,520], | |
[380,355,627966,84,248], | |
[380,375,2116066,240,1428], | |
[380,395,1392015,155,1005], | |
[380,415,731389,144,283], | |
[400,295,735478,154,204], | |
[400,315,1922541,336,268], | |
[400,335,1694065,155,250], | |
[400,355,771891,136,241], | |
[400,375,2283339,230,388], | |
[400,395,1368401,139,362], | |
[400,415,705295,132,260], | |
[420,295,707839,120,209], | |
[420,315,1952217,282,251], | |
[420,335,1689103,200,335], | |
[420,355,723603,96,235], | |
[420,375,2272418,293,469], | |
[420,395,1353250,125,614], | |
[420,415,711746,117,215], | |
[440,295,571214,95,157], | |
[440,315,1633012,240,302], | |
[440,335,1366803,147,402], | |
[440,355,601422,94,223], | |
[440,375,1853095,279,469], | |
[440,395,1147316,129,544], | |
[440,415,586649,103,182], | |
[460,295,395570,69,107], | |
[460,315,953318,122,179], | |
[460,335,908931,101,321], | |
[460,355,419091,54,104], | |
[460,375,1194244,163,329], | |
[460,395,909443,97,371], | |
[460,415,477724,65,103], | |
[480,295,847057,117,56], | |
[480,315,674680,45,120], | |
[480,335,392753,33,116], | |
[480,355,1168895,91,94], | |
[480,375,914333,74,181], | |
[480,395,302330,29,212], | |
[480,415,304956,28,54], | |
[500,295,427274,51,40], | |
[500,315,324172,21,54], | |
[500,335,255907,19,59], | |
[500,355,626936,41,50], | |
[500,375,484833,33,89], | |
[500,395,263470,18,17], | |
[500,415,243116,18,5], | |
[520,295,0,4,0], | |
[520,315,0,1,1], | |
[520,335,1,0,0], | |
[520,355,6,0,0], | |
[520,375,1,0,0], | |
[520,395,1,0,0], | |
[520,415,3,0,0], | |
[540,375,0,1,0], | |
[560,375,0,1,0] | |
]) | |
.enter() | |
.append("rect") | |
.attr("x", function(d) { | |
return d[0]; | |
}) | |
.attr("y", function(d) { | |
return d[1]; | |
}) | |
.attr("height", 20) | |
.attr("width", 20) | |
.style("stroke","black") | |
.style("stroke-width",0.1) | |
.attr("class", "pos2") | |
.attr("fill","white") | |
.transition() | |
.duration(1000) | |
.attr("fill",function(d) { | |
return p2ccolor(d[3]); | |
}) | |
svg.selectAll("labels1") | |
.data(["M","Tu","W","Th","Fr","Sa","Su"] | |
) | |
.enter() | |
.append("text") | |
.attr("x", function(d,i) { | |
return 70; | |
}) | |
.attr("y", function(d,i) { | |
return 115+(20*i); | |
}) | |
.text(function(d) { | |
return d; | |
}) | |
.style("font-family","calibri") | |
.style("fill","grey") | |
.style("font-size","12px") | |
svg.selectAll("labels2") | |
.data(["06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","00","01","02","03","04","05"] | |
) | |
.enter() | |
.append("text") | |
.attr("x", function(d,i) { | |
return 105+(20*i); | |
}) | |
.attr("y", function(d,i) { | |
return 90; | |
}) | |
.text(function(d) { | |
return d; | |
}) | |
.style("font-family","calibri") | |
.style("fill","grey") | |
.style("font-size","12px") | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment