d3 | famous rock landmarks

School homework for Krishan, my 7 year old, looking at famous rock landmarks. We surfed the net and stored some examples in a Google Sheet and exported the data into JSON to display with some filters.

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>rocks | krishans homework</title>

body {
		  position: relative;
		  color: #130C0E;
		  background-color: #eee;
		  padding: 40px;
		}

button {
		  background: #7AC143;
		  border: none;
		  padding: 5px 10px;
		  font-size: 18px;
		}
		button#blue {
		  background: #00B0DD;
		}

div.h-bar {
		  background: #00B0DD;
		  margin-bottom: 5px;
		  padding: 10px;
		  padding-left: 300px;
		  position: relative;
		  min-height: 180px;
		  margin-right: 20px;
		}

div.h-bar.selected {
		  background: #7AC143;
		}

section {
		  padding-top: 20px;
		}

.imageWrap img {
			width: 250px;
			height: 180px;
			position: absolute;
			left: 10px;
			top: 10px;
		}
</style>

</head>

<body>

<h2>Types of rock: </h2>
  <button onclick="select('sandstone')">Sandstone</button>
  <button onclick="select('granite')">Granite</button>
  <button onclick="select('chalk')">Chalk</button>
  <button id='blue' onclick='select()'>Clear</button>
</div>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js