lmullen/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="http://d3js.org/topojson.v1.min.js"></script>
  <link rel="stylesheet" type="text/css" href="styles.css">
  <title>D3 tutorial</title>
</head>
<body>
  <h1 id="title">Interactive D3.js for Awesome Historians</h1>
  <div id="left">Left</div>
  <div id="right">Right</div>
  <div id="controls">
  <select id="dropdown">
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <input type="text" id="textfield">
  <input type="submit" id="button" value = "Interact!">
</div>
  <script src="interactive.js"></script>
</body>
</html>

## interactive.js
var state = {"left": "Left", "right": "Right"};

function ready() {
  update(state)
}

ready();

function update() {
  d3.select("#left").text(state.left);
  d3.select("#right").text(state.right);
}

var button = d3.select("#button")
  .on("click", buttonClicked);

function buttonClicked() {
  state.left = "Everything is ...";
  state.right = "AWESOME!";
  update(state);
}

var dropdown = d3.select("#dropdown")
  .on("change", dropdownSelected)

function dropdownSelected() {
  state.left = dropdown.node().value;
  update(state);
}

var textfield = d3.select("#textfield")
  .on("change", textfieldUpdated);

function textfieldUpdated() {
  state.right = textfield.node().value;
  update(state);
}

## styles.css
#left {
  float:left;
  width: 40%;
  height: 300px;
  border: 1px solid gray;
  margin:50px;
  padding:10px;
  font-size: 32px;
}


#right {
  float:right;
  width: 40%;
  height: 300px;
  border: 1px solid gray;
  margin:50px;
  padding:10px;
  font-size: 32px;
}

#controls {
  margin:100px;
  clear:left;
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/topojson.v1.min.js"></script>
	<link rel="stylesheet" type="text/css" href="styles.css">
	<title>D3 tutorial</title>
	</head>
	<body>
	<h1 id="title">Interactive D3.js for Awesome Historians</h1>
	<div id="left">Left</div>
	<div id="right">Right</div>
	<div id="controls">
	<select id="dropdown">
	<option>A</option>
	<option>B</option>
	<option>C</option>
	</select>
	<input type="text" id="textfield">
	<input type="submit" id="button" value = "Interact!">
	</div>
	<script src="interactive.js"></script>
	</body>
	</html>
	var state = {"left": "Left", "right": "Right"};

	function ready() {
	update(state)
	}

	ready();

	function update() {
	d3.select("#left").text(state.left);
	d3.select("#right").text(state.right);
	}

	var button = d3.select("#button")
	.on("click", buttonClicked);

	function buttonClicked() {
	state.left = "Everything is ...";
	state.right = "AWESOME!";
	update(state);
	}

	var dropdown = d3.select("#dropdown")
	.on("change", dropdownSelected)

	function dropdownSelected() {
	state.left = dropdown.node().value;
	update(state);
	}

	var textfield = d3.select("#textfield")
	.on("change", textfieldUpdated);

	function textfieldUpdated() {
	state.right = textfield.node().value;
	update(state);
	}
	#left {
	float:left;
	width: 40%;
	height: 300px;
	border: 1px solid gray;
	margin:50px;
	padding:10px;
	font-size: 32px;
	}


	#right {
	float:right;
	width: 40%;
	height: 300px;
	border: 1px solid gray;
	margin:50px;
	padding:10px;
	font-size: 32px;
	}

	#controls {
	margin:100px;
	clear:left;
	}