Skip to content

Instantly share code, notes, and snippets.

@veltman
Last active October 3, 2018 19:13
Show Gist options
  • Save veltman/b86ba590cd13bb76eff554b5cbeeeef1 to your computer and use it in GitHub Desktop.
Save veltman/b86ba590cd13bb76eff554b5cbeeeef1 to your computer and use it in GitHub Desktop.
d3 Workshop - Selection playground
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="test"></div>
<script>
// Your script goes here! Make some divs
// Special classes: .invisible, .dotted, .striped, .checkered, .faded
var body = d3.select("body");
var red = body.append("div")
.style("background-color", "red");
var stripedDiv = body.append("div")
.attr("class", "striped");
var pink = body.append("div")
.style("background-color", "pink");
pink.append("div")
.style("background-color", "green")
.append("div")
.style("background-color", "yellow")
.append("div")
.attr("class", "striped");
red.remove();
var everythingStriped = d3.selectAll(".striped");
everythingStriped.attr("class", "checkered");
d3.select("#test")
.html("<b>HI</b>")
.append("span")
.text("HI");
</script>
</body>
body {
font: 16px sans-serif;
display: grid;
padding: 15px 240px;
margin: 0;
grid-template-columns: 150px 150px 150px;
grid-template-rows: 150px 150px 150px;
grid-gap: 15px;
background-color: #fff;
color: #444;
}
div {
box-sizing: border-box;
padding: 10px;
width: 100%;
height: 100%;
background-color: #ccc;
text-align: center;
}
.invisible {
visibility: hidden;
}
.faded {
opacity: 0.5;
}
.checkered {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiI+CiAgPHJlY3Qgd2lkdGg9IjguNDgiIGhlaWdodD0iOC40OCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNiAwKSByb3RhdGUoNDUpIiBmaWxsPSIjZmZmIj48L3JlY3Q+Cjwvc3ZnPg==");
}
.striped {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPgo8cGF0aCBkPSJNLTEsMSBsMiwtMgogICAgICAgICAgICAgICAgICBNMCw0IGw0LC00CiAgICAgICAgICAgICAgICAgIE0zLDUgbDIsLTIiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIxIiB0cmFuc2Zvcm09InNjYWxlKDIgMikiPjwvcGF0aD4KCjwvc3ZnPg==");
}
.dotted {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiI+CiAgPGNpcmNsZSByPSIyIiBjeD0iMCIgY3k9IjAiIGZpbGw9IiNmZmYiPjwvY2lyY2xlPgogIDxjaXJjbGUgcj0iMiIgY3g9IjAiIGN5PSIxMiIgZmlsbD0iI2ZmZiI+PC9jaXJjbGU+CiAgPGNpcmNsZSByPSIyIiBjeD0iMTIiIGN5PSIwIiBmaWxsPSIjZmZmIj48L2NpcmNsZT4KICA8Y2lyY2xlIHI9IjIiIGN4PSIxMiIgY3k9IjEyIiBmaWxsPSIjZmZmIj48L2NpcmNsZT4KICA8Y2lyY2xlIHI9IjIiIGN4PSI2IiBjeT0iNiIgZmlsbD0iI2ZmZiI+PC9jaXJjbGU+Cjwvc3ZnPg==");
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment