veltman/index.html

## index.html
<!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>

## style.css
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==");
}
	<!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==");
	}