Skip to content

Instantly share code, notes, and snippets.

@lmullen

lmullen/index.html

Last active August 29, 2015 14:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save lmullen/add345462d3ae2135c32 to your computer and use it in GitHub Desktop.
Save lmullen/add345462d3ae2135c32 to your computer and use it in GitHub Desktop.
Download ZIP
D3 interactivity demo
Raw
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" name="button" value = "Interact!">
</div>
<script src="interactive.js"></script>
</body>
</html>
Raw
interactive.js
function ready() {
d3.select("#left").text("New Left");
d3.select("#right").text("New Right");
}
var dropdown = d3.select("#dropdown")
.on("change", dropdownSelected)
function dropdownSelected() {
val = dropdown.node().value;
console.log(val);
}
var textfield = d3.select("#textfield")
.on("change", textfieldUpdated);
function textfieldUpdated() {
val = textfield.node().value;
console.log(val);
}
Raw
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment