doches · September 23, 2016 03:09
diff --git a/.block b/.block
 license: csl
diff --git a/README.md b/README.md
diff --git a/data.tsv b/data.tsv
diff --git a/gulpfile.js b/gulpfile.js
 var gulp        = require('gulp');
 var browserSync = require('browser-sync').create();

 gulp.task('html-watch', function (done) {
    browserSync.reload();
    done();
 })

 // watch html
 gulp.task('serve', function () {
    browserSync.init({
        server: {
            baseDir: "./"
        }
    });

    gulp.watch("*.html", ["html-watch"]);
 });
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <style>

 .bar {
  fill: steelblue;
 }

 .bar:hover {
  fill: brown;
 }

 .axis--x path {
  display: none;
 }

 </style>
 <svg width="960" height="500"></svg>
 <script src="https://d3js.org/d3.v4.min.js"></script>
 <script>

 var svg = d3.select("svg"),
    margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom;

 var x = d3.scaleLinear().rangeRound([0, width]),
    y = d3.scaleLinear().rangeRound([height, 0]);

 var g = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

 d3.tsv("data.tsv", function(d) {
  d.avg = +d.avg / 1000;
  d.users = +d.users;
  return d;
 }, function(error, data) {
  if (error) throw error;

  x.domain([0, d3.max(data, function(d) { return d.users; })]);
  y.domain([0, d3.max(data, function(d) { return d.avg; })]);

  g.append("g")
      .attr("class", "axis axis--x")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x).ticks(20));

  g.append("g")
      .attr("class", "axis axis--y")
      .call(d3.axisLeft(y).ticks(10, "f"))
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", "0.71em")
      .attr("text-anchor", "end")
      .text("avg");

  g.selectAll(".bar")
    .data(data)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return x(+d.users - 0.2); })
      .attr("y", function(d) { return y(+d.avg); })
      .attr("width", 20)
      .attr("height", function(d) { return height - y(+d.avg); });
 });

 </script>
diff --git a/package.json b/package.json
 {
  "name": "4d159a0183c69e5f1e6309cbb699a658",
  "version": "1.0.0",
  "description": "This simple bar chart is constructed from a TSV file storing the frequency of letters in the English language. The chart employs [conventional margins](http://bl.ocks.org/3019563) and a number of D3 features:",
  "main": "index.html",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://gist.github.com/4d159a0183c69e5f1e6309cbb699a658.git"
  },
  "author": "Trevor Fountain <[email protected]> (http://texasexpat.net)",
  "license": "ISC",
  "bugs": {
    "url": "https://gist.github.com/4d159a0183c69e5f1e6309cbb699a658"
  },
  "homepage": "https://gist.github.com/4d159a0183c69e5f1e6309cbb699a658",
  "devDependencies": {
    "browser-sync": "^2.16.0",
    "gulp": "^3.9.1"
  }
 }
diff --git a/thumbnail.png b/thumbnail.png
users	avg	max
1	5283	52835
2	61798.5	62917
5	81731.2	168059
10	90579.3	156262
20	114198.05	234316
	var gulp = require('gulp');
	var browserSync = require('browser-sync').create();

	gulp.task('html-watch', function (done) {
	browserSync.reload();
	done();
	})

	// watch html
	gulp.task('serve', function () {
	browserSync.init({
	server: {
	baseDir: "./"
	}
	});

	gulp.watch("*.html", ["html-watch"]);
	});
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	.bar {
	fill: steelblue;
	}

	.bar:hover {
	fill: brown;
	}

	.axis--x path {
	display: none;
	}

	</style>
	<svg width="960" height="500"></svg>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script>

	var svg = d3.select("svg"),
	margin = {top: 20, right: 20, bottom: 30, left: 40},
	width = +svg.attr("width") - margin.left - margin.right,
	height = +svg.attr("height") - margin.top - margin.bottom;

	var x = d3.scaleLinear().rangeRound([0, width]),
	y = d3.scaleLinear().rangeRound([height, 0]);

	var g = svg.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	d3.tsv("data.tsv", function(d) {
	d.avg = +d.avg / 1000;
	d.users = +d.users;
	return d;
	}, function(error, data) {
	if (error) throw error;

	x.domain([0, d3.max(data, function(d) { return d.users; })]);
	y.domain([0, d3.max(data, function(d) { return d.avg; })]);

	g.append("g")
	.attr("class", "axis axis--x")
	.attr("transform", "translate(0," + height + ")")
	.call(d3.axisBottom(x).ticks(20));

	g.append("g")
	.attr("class", "axis axis--y")
	.call(d3.axisLeft(y).ticks(10, "f"))
	.append("text")
	.attr("transform", "rotate(-90)")
	.attr("y", 6)
	.attr("dy", "0.71em")
	.attr("text-anchor", "end")
	.text("avg");

	g.selectAll(".bar")
	.data(data)
	.enter().append("rect")
	.attr("class", "bar")
	.attr("x", function(d) { return x(+d.users - 0.2); })
	.attr("y", function(d) { return y(+d.avg); })
	.attr("width", 20)
	.attr("height", function(d) { return height - y(+d.avg); });
	});

	</script>
	{
	"name": "4d159a0183c69e5f1e6309cbb699a658",
	"version": "1.0.0",
	"description": "This simple bar chart is constructed from a TSV file storing the frequency of letters in the English language. The chart employs [conventional margins](http://bl.ocks.org/3019563) and a number of D3 features:",
	"main": "index.html",
	"scripts": {
	"test": "echo \"Error: no test specified\" && exit 1"
	},
	"repository": {
	"type": "git",
	"url": "git+https://gist.github.com/4d159a0183c69e5f1e6309cbb699a658.git"
	},
	"author": "Trevor Fountain <[email protected]> (http://texasexpat.net)",
	"license": "ISC",
	"bugs": {
	"url": "https://gist.github.com/4d159a0183c69e5f1e6309cbb699a658"
	},
	"homepage": "https://gist.github.com/4d159a0183c69e5f1e6309cbb699a658",
	"devDependencies": {
	"browser-sync": "^2.16.0",
	"gulp": "^3.9.1"
	}
	}