demo file from Matt Ericson's talk

teuben · Jul 20, 2016 · 8a52509 · 8a52509
1 parent 365ef38
commit 8a52509
Show file tree

Hide file tree

Showing 8 changed files with 316 additions and 0 deletions.
diff --git a/d3-hello-chart/00-chart.html b/d3-hello-chart/00-chart.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<style>
+
+.chart div {
+  font: 10px sans-serif;
+  background-color: steelblue;
+  text-align: right;
+  padding: 3px;
+  margin: 1px;
+  color: white;
+}
+
+</style>
+<div class="chart">
+  <div style="width: 40px;">4</div>
+  <div style="width: 80px;">8</div>
+  <div style="width: 150px;">15</div>
+  <div style="width: 160px;">16</div>
+  <div style="width: 230px;">23</div>
+  <div style="width: 420px;">42</div>
+</div>
diff --git a/d3-hello-chart/01-chart.html b/d3-hello-chart/01-chart.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+
+.chart div {
+  font: 10px sans-serif;
+  background-color: steelblue;
+  text-align: right;
+  padding: 3px;
+  margin: 1px;
+  color: white;
+}
+
+</style>
+<div class="chart"></div>
+<script src="//d3js.org/d3.v3.min.js"></script>
+<script>
+
+var data = [4, 8, 15, 16, 23, 42];
+
+var x = d3.scale.linear()
+    .domain([0, d3.max(data)])
+    .range([0, 420]);
+
+d3.select(".chart")
+  .selectAll("div")
+    .data(data)
+  .enter().append("div")
+    .style("width", function(d) { return x(d) + "px"; })
+    .text(function(d) { return d; });
+
+</script>
diff --git a/d3-hello-chart/02-chart.html b/d3-hello-chart/02-chart.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+
+.chart rect {
+  fill: steelblue;
+}
+
+.chart text {
+  fill: white;
+  font: 10px sans-serif;
+  text-anchor: end;
+}
+
+</style>
+<svg class="chart"></svg>
+<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
+<script>
+
+var data = [4, 8, 15, 16, 23, 42];
+
+var width = 420,
+    barHeight = 20;
+
+var x = d3.scale.linear()
+    .domain([0, d3.max(data)])
+    .range([0, width]);
+
+var chart = d3.select(".chart")
+    .attr("width", width)
+    .attr("height", barHeight * data.length);
+
+var bar = chart.selectAll("g")
+    .data(data)
+  .enter().append("g")
+    .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });
+
+bar.append("rect")
+    .attr("width", x)
+    .attr("height", barHeight - 1);
+
+bar.append("text")
+    .attr("x", function(d) { return x(d) - 3; })
+    .attr("y", barHeight / 2)
+    .attr("dy", ".35em")
+    .text(function(d) { return d; });
+
+</script>
diff --git a/d3-hello-chart/03-chart.html b/d3-hello-chart/03-chart.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+
+.chart rect {
+  fill: steelblue;
+}
+
+.chart text {
+  font: 10px sans-serif;
+  text-anchor: end;
+}
+
+</style>
+<svg class="chart"></svg>
+<script src="//d3js.org/d3.v3.min.js"></script>
+<script>
+
+var width = 420,
+    barHeight = 20;
+
+var x = d3.scale.linear()
+    .range([0, width]);
+
+var chart = d3.select(".chart")
+    .attr("width", width);
+
+d3.csv("data.csv", type, function(error, data) {
+  x.domain([0, d3.max(data, function(d) { return d.value; })]);
+
+  chart.attr("height", barHeight * data.length);
+
+  var bar = chart.selectAll("g")
+      .data(data)
+    .enter().append("g")
+      .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });
+
+  bar.append("rect")
+      .attr("width", function(d) { return x(d.value); })
+      .attr("height", barHeight - 1);
+
+  bar.append("text")
+      .attr("x", function(d) { return x(d.value) - 3; })
+      .attr("y", barHeight / 2)
+      .attr("dy", ".35em")
+      .attr("fill", "yellow")
+
+      .text(function(d) { return d.value; });
+});
+
+function type(d) {
+  d.value = +d.value; // coerce to number
+  return d;
+}
+
+</script>
diff --git a/d3-hello-chart/04-chart.html b/d3-hello-chart/04-chart.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+
+.chart rect {
+  fill: steelblue;
+}
+
+.chart text {
+  font: 10px sans-serif;
+  text-anchor: end;
+}
+
+.summary {
+   margin-bottom: 15px;
+}
+
+</style>
+
+<h1>This is a Bar Chart</h1>
+<div class="summary">It shows numbers that go from 4 to 42</div>
+
+<svg class="chart"></svg>
+<script src="//d3js.org/d3.v3.min.js"></script>
+<script>
+
+var width = 420,
+    barHeight = 20;
+
+var x = d3.scale.linear()
+    .range([0, width]);
+
+var chart = d3.select(".chart")
+    .attr("width", width);
+
+d3.csv("data.csv", type, function(error, data) {
+  x.domain([0, d3.max(data, function(d) { return d.value; })]);
+
+  chart.attr("height", barHeight * data.length);
+
+  var bar = chart.selectAll("g")
+      .data(data)
+    .enter().append("g")
+      .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });
+
+  bar.append("rect")
+      .attr("width", function(d) { return x(d.value); })
+      .attr("height", barHeight - 1);
+
+  bar.append("text")
+      .attr("x", function(d) { return x(d.value) - 3; })
+      .attr("y", barHeight / 2)
+      .attr("dy", ".35em")
+      .attr("fill", "yellow")
+
+      .text(function(d) { return d.value; });
+});
+
+function type(d) {
+  d.value = +d.value; // coerce to number
+  return d;
+}
+
+</script>
diff --git a/d3-hello-chart/05-chart.html b/d3-hello-chart/05-chart.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+
+.chart rect {
+  fill: steelblue;
+}
+
+.chart text.name {
+  font: 10px sans-serif;
+  text-anchor: start;
+}
+
+.chart text {
+  font: 10px sans-serif;
+  text-anchor: end;
+}
+
+.summary {
+   margin-bottom: 15px;
+}
+
+</style>
+
+<h1>Hello, Chart!</h1>
+<div class="summary">It shows numbers that go from 4 to 42</div>
+
+<svg class="chart"></svg>
+<script src="//d3js.org/d3.v3.min.js"></script>
+<script>
+
+var width = 420,
+    barHeight = 20;
+
+var x = d3.scale.linear()
+    .range([0, width]);
+
+var chart = d3.select(".chart")
+    .attr("width", width);
+
+d3.csv("data.csv", type, function(error, data) {
+  x.domain([0, d3.max(data, function(d) { return d.value; })]);
+
+  chart.attr("height", barHeight * data.length);
+
+  var bar = chart.selectAll("g")
+      .data(data)
+    .enter().append("g")
+      .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });
+
+  bar.append("rect")
+      .attr("width", function(d) { return x(d.value); })
+      .attr("height", barHeight - 1);
+
+  bar.append("text")
+      .attr("x", function(d) { return x(d.value) - 3; })
+      .attr("y", barHeight / 2)
+      .attr("dy", ".35em")
+      .attr("fill", "white")
+      .text(function(d) { return d.value; });
+
+  bar.append("text")
+      .attr("class", "name")
+
+      .attr("x", function(d) { return 5; })
+      .attr("y", barHeight / 2)
+      .attr("dy", ".35em")
+      .attr("fill", "white")
+      .text(function(d) { return d.name; });
+
+});
+
+function type(d) {
+  d.value = +d.value; // coerce to number
+  return d;
+}
+
+</script>
diff --git a/d3-hello-chart/README.md b/d3-hello-chart/README.md
@@ -0,0 +1,10 @@
+Sample files from: 
+  https://bost.ocks.org/mike/bar/
+
+Other D3 resources:
+
+* Let’s Make a Map:  https://bost.ocks.org/mike/map/
+* Scott Murray Tutorials:  http://alignedleft.com/tutorials/d3
+* Tons of Examples of Different Forms:  http://bl.ocks.org/mbostock
+
+
diff --git a/d3-hello-chart/data.csv b/d3-hello-chart/data.csv
@@ -0,0 +1,7 @@
+name,value
+Locke,4
+Reyes,8
+Ford,15
+Jarrah,16
+Shephard,23
+Kwon,42