| license: csl |
This simple bar chart is constructed from a TSV file storing the frequency of letters in the English language. The chart employs conventional margins and a number of D3 features:
| 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 <trevor@texasexpat.net> (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" | |
| } | |
| } |
