Thinking hard...

<!DOCTYPE html>
<html lang="en">
<html>
	<head>
		<meta charset="utf-8">
		<title>Something a bit more visually appealing</title>
		<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
		<style type="text/css">
			
			.outsiders {
				color: black;
				font: 24px Courier;
			}
			.collars{
				color: blue;
				font: 18px Times;
			}
			.rowers {
				color: black;
				font: 18px Times;
			}
			#text1.changeMain {
		      display: none;
		    }
		   #text2.changeMain {
		     display: none;
		    }
		    #text3.changeMain {
		      display: none;
		    }

#text_at_the_top {
    			color: green;
    			font: 36px Courier;
    		}
    		#intro {
    			color: black;
    			font: 18px Courier;
    		}

rect:hover {
				fill: orange;
			}
			
			#tooltip {
				position: absolute;
				width: 150px;
				height: auto;
				padding: 10px;
				background-color: white;
				-webkit-border-radius: 10px;
				-moz-border-radius: 10px;
				border-radius: 10px;
				-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
				-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
				box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
				pointer-events: none;
			}
			
			#tooltip.hidden {
				display: none;
			}
			
			#tooltip p {
				margin: 0;
				font-family: sans-serif;
				font-size: 16px;
				line-height: 20px;
			}
		</style>
	</head>
	<body>
		
		<div id="text_at_the_top">
   			<p>The frequency of digits in Josh's bank account</p>
 		</div>

<table id="table1">
			<tr id="row1">
				<div id="outside" class="outsiders">HELLO?</div>
				<td id="nav">
					<div id="intro" class="changeMain">
						
					</div>
  					<div id="chart" class="changeMain">
  						
  					</div>
  					<div id="link" class="changeMain">
  						
  					</div>
				</td> 
				<td id="main">
					<div id="tooltip" class="hidden">
						<p><span id="value"></span></p>
						<p><span id="frequency"></span></p>
					</div>
				</td>
			</tr>
		</table>

var xScale = d3.scale.ordinal()
							.domain(d3.range(dataset.length))
							.rangeRoundBands([0, w], 0.05);

var yScale = d3.scale.linear()
							.domain([0, d3.max(dataset)])
							.range([0, h]);

var nav = d3.select("#nav")
				.append("svg")           
				.attr("width", w/4)      
				.attr("height", h);
				
			var main = d3.select("#main") 
				.append("svg")           
				.attr("width", w)      
				.attr("height", h);

var color = 1;

d3.select("#intro").append("p").text("here I am");
			
			d3.select("#row1").append("div").attr("class", "outsiders")
			  .append("div").text("I am here?");

d3.select("#table1")
			  // .append("tr").attr("id", "row2").attr("class", "rowers")
			  // // .select("#row2")
			  // // .append("td").attr("id", "col2").attr("class", "collars")
			  .append("div").text("Wat duck wat?");

</script>
	</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js