bellentuck/.block

## .block
copyright: mit

## index.css
.chart div {
  font: 10px sans-serif;
  background-color: steelblue;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: white;
}

## index.html
<!DOCTYPE html>
<html>
 <head>
   <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
   <title>Simple Bar Chart</title>
   <script type="text/javascript" src="http://d3js.org/d3.v2.min.js"></script>
   <link rel="stylesheet" type="text/css" href="index.css">
 </head>
 <body>

   <h2>
     Literal Books I'm Reading
   </h2>
     <p><i>Advanced Programming in the UNIX Environment</i>, W. Richard Stevens.
       If not of all things, mother of most.</p>
     <p><i>Applied Cryptography</i>, Bruce Sheiner. A lively romp. If you dig
       epistemology you'll dig this.</p>
     <p><i>The Housekeeper and the Professor</i>, Yoko Ogawa. Birthday gift. My
       kind of beach read.</p>
     <p><i>Introduction to Analysis</i>, Maxwell Rosenlicht. How I wish math were
       taught.</p>
     <p><i>The Seven Good Years</i>, Etgar Keret. A good friend has been
       recommending Keret for years. So when I saw this last month at a local
       free library...</p>

   <h2>
     Random Chart
   </h2>
     <div class="chart">
     </div>

   <h2>
     It's Election Day
   </h2>
   <ul>
     <li>Who are your local represéntatives?</li>
     <li>Who will win?</li>
   </ul>

   <script type="text/javascript" src="index.js"></script>
 </body>
</html>

## index.js
/* ----------------The Background----------------- */
// Via https://d3js.org/#introduction
// Should be in something like a "styles.js" file

d3.selectAll("h2").style("color", "#887BB9");
d3.select("body").style("background-color", "#D7DAE5");

// Check it--function as a value:
d3.selectAll("li").style("color", function() {
  return "hsl(" + Math.random() * 360 + ",100%,50%)";
});

// Default Value-&-Key params: d & i
// 1)
// Ok: so: "selectAll(DATA)" takes up instances of DATA together as an array.
// (Like you would expect from in-browser.)
// 2)
// So, "d3.selectAll" returns basically a generator for the array, capable of
// yielding instances of DATA as "d" and corresponding indices as "i".
// 3)
// A function within the "selectAll" closure can use the generator.
// Or is it that "selectAll" includes a way to run itself "for each" instance?
d3.selectAll("p").style("color", function(d, i) {
  return i % 2 ? "#fff" : "#eee";
});

// ".data" method: add data prior to style.
d3.selectAll("p")
  .data([9, 10, 12, 11, 10])
    .style("font-size", function(d) { return d + "px"; });

/* --------------------The Chart-------------------- */
// Via https://scrimba.com/casts/cast-1953
var data = [58, 76, 108, 201, 278, 305];

d3.select(".chart") // Create visualization inside This chart
  .selectAll("div") // Selects all divs confined w/in chart class:
                    // will return empty selection if no divs inside `chart`.

  .data(data) // Pass in array of data.
              // This method will be executed 6 times,
              // because there are 6 items in the `data` array.

    .enter()  // In order to create new data-bound elements,
              // have to invoke `enter()`.
              // Creates placeholder elements for data items.

    .append("div") // Insert a div into the placeholder element.

    // The following is where the dynamic stuff comes in;
    // static style attributes can just be set in the stylesheet.

    .style("width", function(d) { return d + "px"; })
                  // This function is called on each item in data.
                  // The item is passed into the function as the argument "d".

                  // The function returns a style attribute "declaratively";
                  // i.e., in the form of a directive: the width, in this case,
                  // *is to* assume the numerical value of the item passed in.

                  // Thus what is really returned is a string capable of sitting
                  // in as a style attribute.

    .text(function(d) { return d + '?'; });
                  // Add text inside the div for each item.
	.chart div {
	font: 10px sans-serif;
	background-color: steelblue;
	text-align: right;
	padding: 3px;
	margin: 1px;
	color: white;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<title>Simple Bar Chart</title>
	<script type="text/javascript" src="http://d3js.org/d3.v2.min.js"></script>
	<link rel="stylesheet" type="text/css" href="index.css">
	</head>
	<body>

	<h2>
	Literal Books I'm Reading
	</h2>
	<p><i>Advanced Programming in the UNIX Environment</i>, W. Richard Stevens.
	If not of all things, mother of most.</p>
	<p><i>Applied Cryptography</i>, Bruce Sheiner. A lively romp. If you dig
	epistemology you'll dig this.</p>
	<p><i>The Housekeeper and the Professor</i>, Yoko Ogawa. Birthday gift. My
	kind of beach read.</p>
	<p><i>Introduction to Analysis</i>, Maxwell Rosenlicht. How I wish math were
	taught.</p>
	<p><i>The Seven Good Years</i>, Etgar Keret. A good friend has been
	recommending Keret for years. So when I saw this last month at a local
	free library...</p>

	<h2>
	Random Chart
	</h2>
	<div class="chart">
	</div>

	<h2>
	It's Election Day
	</h2>
	<ul>
	<li>Who are your local represéntatives?</li>
	<li>Who will win?</li>
	</ul>

	<script type="text/javascript" src="index.js"></script>
	</body>
	</html>
	/* ----------------The Background----------------- */
	// Via https://d3js.org/#introduction
	// Should be in something like a "styles.js" file

	d3.selectAll("h2").style("color", "#887BB9");
	d3.select("body").style("background-color", "#D7DAE5");

	// Check it--function as a value:
	d3.selectAll("li").style("color", function() {
	return "hsl(" + Math.random() * 360 + ",100%,50%)";
	});

	// Default Value-&-Key params: d & i
	// 1)
	// Ok: so: "selectAll(DATA)" takes up instances of DATA together as an array.
	// (Like you would expect from in-browser.)
	// 2)
	// So, "d3.selectAll" returns basically a generator for the array, capable of
	// yielding instances of DATA as "d" and corresponding indices as "i".
	// 3)
	// A function within the "selectAll" closure can use the generator.
	// Or is it that "selectAll" includes a way to run itself "for each" instance?
	d3.selectAll("p").style("color", function(d, i) {
	return i % 2 ? "#fff" : "#eee";
	});

	// ".data" method: add data prior to style.
	d3.selectAll("p")
	.data([9, 10, 12, 11, 10])
	.style("font-size", function(d) { return d + "px"; });

	/* --------------------The Chart-------------------- */
	// Via https://scrimba.com/casts/cast-1953
	var data = [58, 76, 108, 201, 278, 305];

	d3.select(".chart") // Create visualization inside This chart
	.selectAll("div") // Selects all divs confined w/in chart class:
	// will return empty selection if no divs inside `chart`.

	.data(data) // Pass in array of data.
	// This method will be executed 6 times,
	// because there are 6 items in the `data` array.

	.enter() // In order to create new data-bound elements,
	// have to invoke `enter()`.
	// Creates placeholder elements for data items.

	.append("div") // Insert a div into the placeholder element.

	// The following is where the dynamic stuff comes in;
	// static style attributes can just be set in the stylesheet.

	.style("width", function(d) { return d + "px"; })
	// This function is called on each item in data.
	// The item is passed into the function as the argument "d".

	// The function returns a style attribute "declaratively";
	// i.e., in the form of a directive: the width, in this case,
	// is to assume the numerical value of the item passed in.

	// Thus what is really returned is a string capable of sitting
	// in as a style attribute.

	.text(function(d) { return d + '?'; });
	// Add text inside the div for each item.