jnv/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <title>D3.js Tutorial • Bar Chart</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style>
    body
    { color: #222;
      background: #f8f8f8;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      margin: auto; padding: 2em; }

    header { color: #999; margin: 0 0 2em 0; }
    header, header * { font-weight: 300; }
    header h1, header p { margin: 0 0 0.25em 0; }
    header a { color: #999; }
    #chart { background: #fafafa; border: 2px solid #fff; padding: 0.5em; margin: 0.5em 0; min-height: 80px; min-width: 400px; position: relative; }
    #chart div { color: white; background: black; font: 10px sans-serif; padding: 3px; margin: 1px; }
    pre.steps { color: #c1c1c1; font-size: 12px; font-family: Menlo, monospace; white-space: pre-wrap; margin: 2em 0 0 -1em; }
    pre.steps:hover { color: #222; }
    button.run { opacity: 0.2; }
    button.run:hover { opacity: 0.9; }
  </style>
  <script src="https://cdn.jsdelivr.net/d3js/3.5.6/d3.min.js"></script>
</head>
<body>
  <header>
    <h1>D3.js tutorial • Bar Chart</h1>
    <p>Based on the <a href="http://mbostock.github.com/d3/tutorial/bar-1.html">http://mbostock.github.com/d3/tutorial/bar-1.html</a></p>
  </header>

  <div id="chart"></div>

  <pre class="steps">
  // 1. Data
  var data = [4, 8, 16, 18]
  </pre>

  <pre class="steps">
  // 2. Setup
  var chart = d3.select("#chart")
  </pre>

  <pre class="steps">
  // 3. Bars
  var bar = chart.selectAll("div").data(data)
  bar.enter().append("div").style("width", function(d,i) { return d * 10 + 'px' }).text(function(d) {return d})
  </pre>

  <button onclick="eval( d3.selectAll('pre.steps')[0].map( function(o) { return o.textContent } ).slice(0, -2).join(';') )" class="run">Run</button>

  <pre class="steps">
  // 4. Scale
  chart.selectAll("div").remove()
  var bar = chart.selectAll("div").data(data)
  var x = d3.scale.linear().domain([0, d3.max(data)]).range(["0px", "500px"])
  bar.enter().append("div").style("width", function(d,i) { return x(d) }).text(function(d) {return d })
  </pre>

  <button onclick="eval( d3.selectAll('pre.steps')[0].map( function(o) { return o.textContent } ).slice(0, 4).join(';') )" class="run">Run</button>

  <pre class="steps">
  // 4. Scatterplot
  d3.select("#chart").remove()
  var chart = d3.select("header").append("svg").attr("id", "chart").style("height", 80)
  var circle = chart.selectAll("circle").data(data)
  circle.enter().append("circle").attr("r", "5px").attr("cy", 40).attr("cx", function(d) { return d * 5 })
  </pre>

  <button onclick="eval( d3.selectAll('pre.steps')[0].map( function(o) { return o.textContent } ).slice(0, 5).join(';') )" class="run">Run</button>

  <script src="d3.js"></script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>D3.js Tutorial • Bar Chart</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style>
	body
	{ color: #222;
	background: #f8f8f8;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin: auto; padding: 2em; }

	header { color: #999; margin: 0 0 2em 0; }
	header, header * { font-weight: 300; }
	header h1, header p { margin: 0 0 0.25em 0; }
	header a { color: #999; }
	#chart { background: #fafafa; border: 2px solid #fff; padding: 0.5em; margin: 0.5em 0; min-height: 80px; min-width: 400px; position: relative; }
	#chart div { color: white; background: black; font: 10px sans-serif; padding: 3px; margin: 1px; }
	pre.steps { color: #c1c1c1; font-size: 12px; font-family: Menlo, monospace; white-space: pre-wrap; margin: 2em 0 0 -1em; }
	pre.steps:hover { color: #222; }
	button.run { opacity: 0.2; }
	button.run:hover { opacity: 0.9; }
	</style>
	<script src="https://cdn.jsdelivr.net/d3js/3.5.6/d3.min.js"></script>
	</head>
	<body>
	<header>
	<h1>D3.js tutorial • Bar Chart</h1>
	<p>Based on the <a href="http://mbostock.github.com/d3/tutorial/bar-1.html">http://mbostock.github.com/d3/tutorial/bar-1.html</a></p>
	</header>

	<div id="chart"></div>

	<pre class="steps">
	// 1. Data
	var data = [4, 8, 16, 18]
	</pre>

	<pre class="steps">
	// 2. Setup
	var chart = d3.select("#chart")
	</pre>

	<pre class="steps">
	// 3. Bars
	var bar = chart.selectAll("div").data(data)
	bar.enter().append("div").style("width", function(d,i) { return d * 10 + 'px' }).text(function(d) {return d})
	</pre>

	<button onclick="eval( d3.selectAll('pre.steps')[0].map( function(o) { return o.textContent } ).slice(0, -2).join(';') )" class="run">Run</button>

	<pre class="steps">
	// 4. Scale
	chart.selectAll("div").remove()
	var bar = chart.selectAll("div").data(data)
	var x = d3.scale.linear().domain([0, d3.max(data)]).range(["0px", "500px"])
	bar.enter().append("div").style("width", function(d,i) { return x(d) }).text(function(d) {return d })
	</pre>

	<button onclick="eval( d3.selectAll('pre.steps')[0].map( function(o) { return o.textContent } ).slice(0, 4).join(';') )" class="run">Run</button>

	<pre class="steps">
	// 4. Scatterplot
	d3.select("#chart").remove()
	var chart = d3.select("header").append("svg").attr("id", "chart").style("height", 80)
	var circle = chart.selectAll("circle").data(data)
	circle.enter().append("circle").attr("r", "5px").attr("cy", 40).attr("cx", function(d) { return d * 5 })
	</pre>

	<button onclick="eval( d3.selectAll('pre.steps')[0].map( function(o) { return o.textContent } ).slice(0, 5).join(';') )" class="run">Run</button>

	<script src="d3.js"></script>
	</body>
	</html>