Skip to content

Instantly share code, notes, and snippets.

@zanarmstrong

zanarmstrong/README.md

Last active November 20, 2015 20:47
Download ZIP
D3 Bingo! (Zan)
Raw
README.md

D3 Bingo is meant to be a fun challenge to inspire you to explore parts of D3 (and engaging with the D3 community) that you might not have done yet... and to celebrate what you have done so far!

To play D3 Bingo, fork the gist for a blank Bingo Board on blockbuilder.

In the data.js file, add a URL for any projects that you have that fulfil a challenge. Then save. Your bingo card on bl.ocks will now show your completed squares. If you click on a square, it will open the URL for that project.

You can see my completed bingo card here as an example.

forked from zanarmstrong's block: D3 Bingo!

Raw
bingo.css
body {
background: #FAEBC4;
}
.viz {
margin: 0 auto;
max-width: 1180px;
}
hr.top {
margin: 40px auto 0 auto;
border: none;
border-top: medium double #3e3a30;
color: #3e3a30;
max-width: 1200px;
text-align: center;
height: 30px;
}
hr.top:after {
font-family: 'Rammetto One', cursive;
font-size: 40px;
content: "D3";
display: inline-block;
position: relative;
top: -0.8em;
padding: 0 0.25em;
background: #FAEBC4;
}
.title {
font-family: 'Rammetto One', cursive;
font-size: 124px;
margin: -50px auto -50px auto;
color: #3e3a30;
display: flex;
max-width: 1180px;
}
.title span {
flex: 1 1 20%;
text-align: center;
}
.bingoBoard, .header-container {
margin: 20px;
}
.bingoRow {
margin: 0 auto 0 auto;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
max-width: 1180px;
}
.bingoChips {
flex: 0 0 20%;
fill: #FAEBC4;
height: 95px;
border-left: 3px solid #3e3a30;
border-bottom: 3px solid #3e3a30;
display: flex;
justify-content: center;
align-items: center;
color: #3e3a30;
font-family: 'Smythe', cursive;
font-size: 26px;
overflow: hidden;
}
.lastColumn {
border-right: 3px solid #3e3a30;
}
.topRow div {
border-top: 3px solid #3e3a30;
}
.free {
font-size: 60px;
letter-spacing: 0.1em;
font-weight: 700;
}
.chosen {
background: #625d51;
color: white;
}
.url {
cursor: pointer;
}
@media (max-width: 800px) {
.title {
font-size: 100px;
margin: -30px auto -40px auto;
}
.bingoChips {
font-size: 20px
}
.free {
font-size: 50px;
}
}
@media (max-width: 600px) {
.title {
font-size: 64px;
margin: -20px 20px -30px 20px;
}
.bingoChips {
font-size: 16px
}
.free {
font-size: 30px;
}
}
Raw
bingo.js
var regEx = /(\w+)\/(\w+)/
toggleOnClick = function(d, element) {
if (d.url)
window.open(d.url, target = "_blank")
else
d3.select(element).classed("chosen", !d3.select(element).classed("chosen"));
}
// Feel free to change or delete any of the code you see!
d3.select(".viz").append("div").classed("bingoBoard", true).selectAll(".bingoRow")
.data(bingoBlocks)
.enter()
.append("div")
.attr("class", function(d, i) {
if (i == 0) {
return "bingoRow topRow"
} else {
return "bingoRow"
}
})
.selectAll("bingoChips")
.data(function(row) {
return row
})
.enter()
.append("div")
.attr("class", function(d, i) {
var classes = "bingoChips"
if (d.url != "") {
classes += " chosen url"
}
if (d.free) {
classes += " free"
}
if (i == 4) {
classes += " lastColumn"
}
return classes
})
.classed("chosen", function(d) {
if (d.url != "")
return true
})
.on("click", function(d) {
toggleOnClick(d, this)
})
.text(function(d) {
return d.goal
})
Raw
data.js
var row1 = [{
goal: "d3.geo",
url: "http://bl.ocks.org/zanarmstrong/raw/caa2da1ea1558cdc3357/"
}, {
goal: "data defines position",
url: "http://bl.ocks.org/zanarmstrong/raw/0f3f39deed0ee1653354/"
}, {
goal: "build a D3-related tool",
url: "http://bl.ocks.org/zanarmstrong/raw/05c1e95bf7aa16c4768e/"
}, {
goal: "d3.nest",
url: ""
}, {
goal: "data defines text size",
url: ""
}]
var row2 = [{
goal: "data defines angle",
url: "http://weather.zanarmstrong.com/#city=SAN FRANCISCO&metric=cloudCover&colored=1"
}, {
goal: "teach/explain a D3 function",
url: "http://blog.zanarmstrong.com/explanations/2015/02/12/Revisiting%20Delaunay%20Triangulations/"
}, {
goal: "scatterplot, from scratch",
url: ""
}, {
goal: "nested data binding",
url: ""
}, {
goal: "log scale",
url: "http://research.google.com/pubs/pub42901.html"
}]
var row3 = [{
goal: "chain transitions",
url: ""
}, {
goal: "interpolation",
url: "http://bl.ocks.org/zanarmstrong/23137b412caf6e80b34a"
}, {
goal: "FREE",
url: "http://bl.ocks.org/kenpenn/raw/9476266/",
free: true
}, {
goal: "use HCL, HSL, or LAB colors",
url: "http://bl.ocks.org/zanarmstrong/c0f07275634de1f12769"
}, {
goal: "mouse position as input data",
url: "http://bl.ocks.org/zanarmstrong/raw/5fbc4b93f62227dedeb7/"
}]
var row4 = [{
goal: "closest point using voronoi",
url: "http://weatherlines.zanarmstrong.com/#city=SAN FRANCISCO&metric=cloudCover"
}, {
goal: "d3.geom.hull",
url: ""
}, {
goal: "color brewer",
url: ""
}, {
goal: "enter/exit transformation w/ object constancy",
url: "http://bl.ocks.org/zanarmstrong/0a30763350f28bda3546"
}, {
goal: "d3.layout",
url: "http://bl.ocks.org/zanarmstrong/76d263bd36f312cb0f9f"
}]
var row5 = [{
goal: "D3 and canvas",
url: "http://bl.ocks.org/zanarmstrong/caa2da1ea1558cdc3357"
}, {
goal: "create a d3.layout",
url: ""
}, {
goal: "fork a block on blockbuilder",
url: "http://bl.ocks.org/zanarmstrong/9aa16ddc5e0c71d73a77"
}, {
goal: "animation",
url: "http://bl.ocks.org/zanarmstrong/5fbc4b93f62227dedeb7"
}, {
goal: "brush",
url: "http://bl.ocks.org/zanarmstrong/c9bb2842647140265d57"
}]
var bingoBlocks = [row1, row2, row3, row4, row5]
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Smythe' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Rammetto+One' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="bingo.css">
</head>
<body>
<div class="viz">
<div class="header-container"><hr class="top"></div>
<div class="title"><span>B</span><span>I</span><span>N</span><span>G</span><span>O</span></div>
</div>
<script src="data.js"></script>
<script src="bingo.js"></script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment