Skip to content

Instantly share code, notes, and snippets.

@danharr

danharr/index.html

Last active August 29, 2015 13:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save danharr/9837048 to your computer and use it in GitHub Desktop.
Save danharr/9837048 to your computer and use it in GitHub Desktop.
Download ZIP
Day Parting
Raw
index.html
<!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