Skip to content

Instantly share code, notes, and snippets.

@zanarmstrong
Last active November 20, 2015 20:47
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save zanarmstrong/b66a37afe6581eb5bc0c to your computer and use it in GitHub Desktop.
D3 Bingo! (Zan)

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!

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;
}
}
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
})
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]
<!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