Canvas Bar Chart

A variant of the simple bar chart using d3-scale and d3-xhr to render to Canvas. Note that this doesn’t use D3’s selections or axes, so this code is somewhat more intricate.

forked from mbostock's block: Canvas Bar Chart

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<canvas width="960" height="500"></canvas>
<script>

/* https://github.com/d3/d3-scale Copyright 2015 Mike Bostock */
"undefined"==typeof Map?(Map=function(){this.clear()},Map.prototype={set:function(t,n){return this._[t]=n,this},get:function(t){return this._[t]},has:function(t){return t in this._},"delete":function(t){return t in this._&&delete this._[t]},clear:function(){this._=Object.create(null)},get size(){var t=0;for(var n in this._)++t;return t},forEach:function(t){for(var n in this._)t(this._[n],n,this)}}):function(){var t=new Map;t.set(0,0)!==t&&(t=t.set,Map.prototype.set=function(){return t.apply(this,arguments),this})}(),function(t,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n(t.scale={})}(this,function(t){"use strict";function n(t,n){return n>t?-1:t>n?1:t>=n?0:0/0}function e(t){return function(e,r){return n(t(e),r)}}function r(t){return 1===t.length&&(t=e(t)),{left:function(n,e,r,i){for(arguments.length<3&&(r=0),arguments.length<4&&(i=n.length);i>r;){var a=r+i>>>1;t(n[a],e)<0?r=a+1:i=a}return r},right:function(n,e,r,i){for(arguments.length<3&&(r=0),arguments.length<4&&(i=n.length);i>r;){var a=r+i>>>1;t(n[a],e)>0?i=a:r=a+1}return r}}}function i(t,n,e){function r(r){return r>=r?n[bt(t,r,0,e)]:void 0}return r.domain=function(i){return arguments.length?(t=i.slice(),e=Math.min(t.length,n.length-1),r):t.slice()},r.range=function(i){return arguments.length?(n=i.slice(),e=Math.min(t.length,n.length-1),r):n.slice()},r.invertExtent=function(e){return e=n.indexOf(e),[t[e-1],t[e]]},r.copy=function(){return i(t,n)},r}function a(){return i([.5],[0,1],1)}function u(t,n){return t=+t,n-=t,function(e){return t+n*e}}function o(t,n){var e,r={},i={};for(e in t)e in n?r[e]=x(t[e],n[e]):i[e]=t[e];for(e in n)e in t||(i[e]=n[e]);return function(t){for(e in r)i[e]=r[e](t);return i}}function s(t,n){var e,r=[],i=[],a=t.length,u=n.length,o=Math.min(t.length,n.length);for(e=0;o>e;++e)r.push(x(t[e],n[e]));for(;a>e;++e)i[e]=t[e];for(;u>e;++e)i[e]=n[e];return function(t){for(e=0;o>e;++e)i[e]=r[e](t);return i}}function c(t,n,e){return isNaN(t)&&(t=0),isNaN(n)&&(n=0),isNaN(e)&&(e=0),"#"+(16>t?"0"+t.toString(16):t.toString(16))+(16>n?"0"+n.toString(16):n.toString(16))+(16>e?"0"+e.toString(16):e.toString(16))}function l(t,n,e){this.r=Math.max(0,Math.min(255,Math.round(t))),this.g=Math.max(0,Math.min(255,Math.round(n))),this.b=Math.max(0,Math.min(255,Math.round(e)))}function h(){}function f(t){return b(t>>16&255,t>>8&255,255&t)}function g(t,n,e){this.h=+t,this.s=Math.max(0,Math.min(1,+n)),this.l=Math.max(0,Math.min(1,+e))}function d(t,n,e){return 255*(60>t?n+(e-n)*t/60:180>t?e:240>t?n+(e-n)*(240-t)/60:n)}function m(t,n,e){if(1===arguments.length)if(t instanceof g)e=t.l,n=t.s,t=t.h;else if(t instanceof h||(t=p(t)),t){if(t instanceof g)return t;t=t.rgb();var r=t.r/255,i=t.g/255,a=t.b/255,u=Math.min(r,i,a),o=Math.max(r,i,a),s=o-u;e=(o+u)/2,s?(n=.5>e?s/(o+u):s/(2-o-u),t=r===o?(i-a)/s+6*(a>i):i===o?(a-r)/s+2:(r-i)/s+4,t*=60):(t=0/0,n=e>0&&1>e?0:t)}else t=n=e=0/0;return new g(t,n,e)}function p(t){var n;return t=(t+"").trim().toLowerCase(),(n=At.exec(t))?(n=parseInt(n[1],16),b(n>>8&15|n>>4&240,n>>4&15|240&n,(15&n)<<4|15&n)):(n=jt.exec(t))?f(parseInt(n[1],16)):(n=St.exec(t))?b(n[1],n[2],n[3]):(n=qt.exec(t))?b(2.55*n[1],2.55*n[2],2.55*n[3]):(n=Nt.exec(t))?m(n[1],.01*n[2],.01*n[3]):wt.has(t)?f(wt.get(t)):null}function b(t,n,e){return 1===arguments.length&&(t instanceof h||(t=p(t)),t?(t=t.rgb(),e=t.b,n=t.g,t=t.r):t=n=e=0/0),new l(t,n,e)}function M(t,n){t=b(t),n=b(n);var e=t.r,r=t.g,i=t.b,a=n.r-e,u=n.g-r,o=n.b-i;return function(t){return c(Math.round(e+a*t),Math.round(r+u*t),Math.round(i+o*t))}}function v(t){return function(){return t}}function y(t){return function(n){return t(n)+""}}function w(t,n){var e,r,i,a=Et.lastIndex=$t.lastIndex=0,o=-1,s=[],c=[];for(t+="",n+="";(e=Et.exec(t))&&(r=$t.exec(n));)(i=r.index)>a&&(i=n.slice(a,i),s[o]?s[o]+=i:s[++o]=i),(e=e[0])===(r=r[0])?s[o]?s[o]+=r:s[++o]=r:(s[++o]=null,c.push({i:o,x:u(e,r)})),a=$t.lastIndex;return a<n.length&&(i=n.slice(a),s[o]?s[o]+=i:s[++o]=i),s.length<2?c[0]?y(c[0].x):v(n):(n=c.length,function(t){for(var e,r=0;n>r;++r)s[(e=c[r]).i]=e.x(t);return s.join("")})}function x(t,n){for(var e,r=Pt.length;--r>=0&&!(e=Pt[r](t,n)););return e}function k(t,n){null==n&&(n=10);var e=t[0],r=t[t.length-1];e>r&&(u=r,r=e,e=u);var i=r-e,a=Math.pow(10,Math.floor(Math.log(i/n)/Math.LN10)),u=i/n/a;return u>=zt?a*=10:u>=Rt?a*=5:u>=_t&&(a*=2),[Math.ceil(e/a)*a,Math.floor(r/a)*a+a/2,a]}function N(t,n){if(t=t.slice(),!n)return t;var e,r=0,i=t.length-1,a=t[r],u=t[i];return a>u&&(e=r,r=i,i=e,e=a,a=u,u=e),t[r]=Math.floor(a/n)*n,t[i]=Math.ceil(u/n)*n,t}function q(t,n){if((e=(t=n?t.toExponential(n-1):t.toExponential()).indexOf("e"))<0)return null;var e,r=t.slice(0,e);return[r.length>1?r[0]+r.slice(2):r,+t.slice(e+1)]}function S(t){return t=q(Math.abs(t)),t?t[1]:0/0}function j(t,n){var e=q(t,n);if(!e)return t+"";var r=e[0],i=e[1],a=i-(kt=3*Math.max(-8,Math.min(8,Math.floor(i/3))))+1,u=r.length;return a===u?r:a>u?r+new Array(a-u+1).join("0"):a>0?r.slice(0,a)+"."+r.slice(a):"0."+new Array(1-a).join("0")+q(t,n+a-1)[0]}function A(t,n){var e=q(t,n);if(!e)return t+"";var r=e[0],i=e[1];return 0>i?"0."+new Array(-i).join("0")+r:r.length>i+1?r.slice(0,i+1)+"."+r.slice(i+1):r+new Array(i-r.length+2).join("0")}function E(t,n){t=t.toPrecision(n);t:for(var e,r=t.length,i=1,a=-1;r>i;++i)switch(t[i]){case".":a=e=i;break;case"0":0===a&&(a=i),e=i;break;case"e":break t;default:a>0&&(a=0)}return a>0?t.slice(0,a)+t.slice(e+1):t}function $(t){if(!(n=Bt.exec(t)))throw new Error("invalid format: "+t);var n,e=n[1]||" ",r=n[2]||">",i=n[3]||"-",a=n[4]||"",u=!!n[5],o=n[6]&&+n[6],s=!!n[7],c=n[8]&&+n[8].slice(1),l=n[9]||"";"n"===l?(s=!0,l="g"):Ot[l]||(l=""),(u||"0"===e&&"="===r)&&(u=!0,e="0",r="="),this.fill=e,this.align=r,this.sign=i,this.symbol=a,this.zero=u,this.width=o,this.comma=s,this.precision=c,this.type=l}function P(t){return new $(t)}function _(t){return t}function R(t,n){return function(e,r){for(var i=e.length,a=[],u=0,o=t[0],s=0;i>0&&o>0&&(s+o+1>r&&(o=Math.max(1,r-s)),a.push(e.substring(i-=o,i+o)),!((s+=o+1)>r));)o=t[u=(u+1)%t.length];return a.reverse().join(n)}}function z(t){function n(t){t=P(t);var n=t.fill,e=t.align,u=t.sign,o=t.symbol,s=t.zero,c=t.width,l=t.comma,h=t.precision,f=t.type,g="$"===o?i[0]:"#"===o&&/[boxX]/.test(f)?"0"+f.toLowerCase():"",d="$"===o?i[1]:/[%p]/.test(f)?"%":"",m=Ot[f],p=!f||/[defgprs%]/.test(f);return h=null==h?f?6:12:/[gprs]/.test(f)?Math.max(1,Math.min(21,h)):Math.max(0,Math.min(20,h)),function(t){var i=g,o=d;if("c"===f)o=m(t)+o,t="";else{t=+t;var b=(0>t||0>1/t)&&(t*=-1,!0);if(t=m(t,h),i=(b?"("===u?u:"-":"-"===u||"("===u?"":u)+i,o=o+("s"===f?Ft[8+kt/3]:"")+(b&&"("===u?")":""),p)for(var M,v=-1,y=t.length;++v<y;)if(M=t.charCodeAt(v),48>M||M>57){o=(46===M?a+t.slice(v+1):t.slice(v))+o,t=t.slice(0,v);break}}l&&!s&&(t=r(t,1/0));var w=i.length+t.length+o.length,x=c>w?new Array(c-w+1).join(n):"";switch(l&&s&&(t=r(x+t,x.length?c-o.length:1/0),x=""),e){case"<":return i+t+o+x;case"=":return i+x+t+o;case"^":return x.slice(0,w=x.length>>1)+i+t+o+x.slice(w)}return x+i+t+o}}function e(t,e){var r=n((t=P(t),t.type="f",t)),i=3*Math.max(-8,Math.min(8,Math.floor(S(e)/3))),a=Math.pow(10,-i),u=Ft[8+i/3];return function(t){return r(a*t)+u}}var r=t.grouping&&t.thousands?R(t.grouping,t.thousands):_,i=t.currency,a=t.decimal;return{format:n,formatPrefix:e}}function F(t){return Math.max(0,-S(Math.abs(t)))}function O(t,n){return Math.max(0,S(Math.abs(n))-S(Math.abs(t)))+1}function B(t,n){return Math.max(0,3*Math.max(-8,Math.min(8,Math.floor(S(n)/3)))-S(Math.abs(t)))}function I(t,n,e){var r=k(t,n);if(null==e)e=",."+F(r[2])+"f";else switch(e=P(e),e.type){case"s":var i=Math.max(Math.abs(r[0]),Math.abs(r[1]));return null==e.precision&&(e.precision=B(r[2],i)),Lt(e,i);case"":case"e":case"g":case"p":case"r":null==e.precision&&(e.precision=O(r[2],Math.max(Math.abs(r[0]),Math.abs(r[1])))-("e"===e.type));break;case"f":case"%":null==e.precision&&(e.precision=F(r[2])-2*("%"===e.type))}return Ct(e)}function C(t){for(var n=1;t*n%1;)n*=10;return n}function L(t,n,e){(i=arguments.length)<3&&(e=1,2>i&&(n=t,t=0));var r=-1,i=0|Math.max(0,Math.ceil((n-t)/e)),a=C(Math.abs(e)),u=new Array(i);for(t*=a,e*=a;++r<i;)u[r]=(t+r*e)/a;return u}function X(t,n){return L.apply(null,k(t,n))}function G(t,n){return t=+t,n-=t,function(e){return Math.round(t+n*e)}}function T(t,n){return n=(n-=t=+t)||1/n,function(e){return(e-t)/n}}function U(t,n){return n=(n-=t=+t)||1/n,function(e){return Math.max(0,Math.min(1,(e-t)/n))}}function Y(t,n,e,r){var i=e(t[0],t[1]),a=r(n[0],n[1]);return function(t){return a(i(t))}}function Z(t,n,e,r){var i=Math.min(t.length,n.length)-1,a=new Array(i),u=new Array(i),o=-1;for(t[i]<t[0]&&(t=t.slice().reverse(),n=n.slice().reverse());++o<i;)a[o]=e(t[o],t[o+1]),u[o]=r(n[o],n[o+1]);return function(n){var e=bt(t,n,1,i)-1;return u[e](a[e](n))}}function D(t,n,e,r){function i(){var i=Math.min(t.length,n.length)>2?Z:Y,c=r?U:T;return o=i(t,n,c,e),s=i(n,t,c,u),a}function a(t){return o(t)}var o,s;return a.invert=function(t){return s(t)},a.domain=function(n){return arguments.length?(t=n.map(Number),i()):t.slice()},a.range=function(t){return arguments.length?(n=t.slice(),i()):n.slice()},a.rangeRound=function(t){return a.range(t).interpolate(G)},a.clamp=function(t){return arguments.length?(r=!!t,i()):r},a.interpolate=function(t){return arguments.length?(e=t,i()):e},a.ticks=function(n){return X(t,n)},a.tickFormat=function(n,e){return I(t,n,e)},a.nice=function(n){return t=N(t,k(t,n)[2]),i()},a.copy=function(){return D(t,n,e,r)},i()}function H(){return D([0,1],[0,1],x,!1)}function J(t,n){return t.range=function(){var e=n.range.apply(n,arguments);return e===n?t:e},t.rangeRound=function(){var e=n.rangeRound.apply(n,arguments);return e===n?t:e},t.clamp=function(){var e=n.clamp.apply(n,arguments);return e===n?t:e},t.interpolate=function(){var e=n.interpolate.apply(n,arguments);return e===n?t:e},t}function K(t,n,e){function r(t){return 0>t?-Math.pow(-t,n):Math.pow(t,n)}function i(t){return 0>t?-Math.pow(-t,1/n):Math.pow(t,1/n)}function a(n){return t(r(n))}return a.invert=function(n){return i(t.invert(n))},a.exponent=function(t){return arguments.length?(n=+t,a.domain(e)):n},a.domain=function(n){return arguments.length?(e=n.map(Number),t.domain(e.map(r)),a):e.slice()},a.ticks=function(t){return X(e,t)},a.tickFormat=function(t,n){return I(e,t,n)},a.nice=function(t){return a.domain(N(e,k(e,t)[2]))},a.copy=function(){return K(t.copy(),n,e)},J(a,t)}function Q(){return K(H(),.5,[0,1])}function V(t,n,e){function r(n){return e[Math.max(0,Math.min(u,Math.floor(a*(n-t))))]}function i(){return a=e.length/(n-t),u=e.length-1,r}var a,u;return r.domain=function(e){return arguments.length?(t=+e[0],n=+e[e.length-1],i()):[t,n]},r.range=function(t){return arguments.length?(e=t.slice(),i()):e.slice()},r.invertExtent=function(n){return n=e.indexOf(n),n=0>n?0/0:n/a+t,[n,n+1/a]},r.copy=function(){return V(t,n,e)},i()}function W(){return V(0,1,[0,1])}function tt(t,n){var e=(t.length-1)*n+1,r=Math.floor(e),i=+t[r-1],a=e-r;return a?i+a*(t[r]-i):i}function nt(t,e){function r(){var n=0,r=e.length;for(a=[];++n<r;)a[n-1]=tt(t,n/r);return i}function i(t){return isNaN(t=+t)?void 0:e[bt(a,t)]}var a;return i.domain=function(e){if(!arguments.length)return t;t=[];for(var i,a=0,u=e.length;u>a;++a)i=e[a],null==i||isNaN(i=+i)||t.push(i);return t.sort(n),r()},i.range=function(t){return arguments.length?(e=t.slice(),r()):e.slice()},i.quantiles=function(){return a},i.invertExtent=function(n){return n=e.indexOf(n),0>n?[0/0,0/0]:[n>0?a[n-1]:t[0],n<a.length?a[n]:t[t.length-1]]},i.copy=function(){return nt(t,e)},r()}function et(){return nt([],[])}function rt(){return K(H(),1,[0,1])}function it(t,n,e){for(var r=new Array(t),i=-1;++i<t;)r[i]=n+e*i;return r}function at(t,n){function e(e){var a=e+"",u=r.get(a);if(!u){if("range"!==n.t)return;r.set(a,u=t.push(e))}return i[(u-1)%i.length]}var r,i,a;return e.domain=function(i){if(!arguments.length)return t.slice();t=[],r=new Map;for(var a,u,o=-1,s=i.length;++o<s;)r.has(u=(a=i[o])+"")||r.set(u,t.push(a));return e[n.t].apply(e,n.a)},e.range=function(t){return arguments.length?(i=t.slice(),a=0,n={t:"range",a:arguments},e):i.slice()},e.rangePoints=function(r,u){u=arguments.length<2?0:+u;var o=+r[0],s=+r[1],c=t.length<2?(o=(o+s)/2,0):(s-o)/(t.length-1+u);return i=it(t.length,o+c*u/2,c),a=0,n={t:"rangePoints",a:arguments},e},e.rangeRoundPoints=function(r,u){u=arguments.length<2?0:+u;var o=+r[0],s=+r[1],c=t.length<2?(o=s=Math.round((o+s)/2),0):(s-o)/(t.length-1+u)|0;return i=it(t.length,o+Math.round(c*u/2+(s-o-(t.length-1+u)*c)/2),c),a=0,n={t:"rangeRoundPoints",a:arguments},e},e.rangeBands=function(r,u,o){u=arguments.length<2?0:+u,o=arguments.length<3?u:+o;var s=+r[1]<+r[0],c=+r[s-0],l=+r[1-s],h=(l-c)/(t.length-u+2*o);return i=it(t.length,c+h*o,h),s&&i.reverse(),a=h*(1-u),n={t:"rangeBands",a:arguments},e},e.rangeRoundBands=function(r,u,o){u=arguments.length<2?0:+u,o=arguments.length<3?u:+o;var s=+r[1]<+r[0],c=+r[s-0],l=+r[1-s],h=Math.floor((l-c)/(t.length-u+2*o));return i=it(t.length,c+Math.round((l-c-(t.length-u)*h)/2),h),s&&i.reverse(),a=Math.round(h*(1-u)),n={t:"rangeRoundBands",a:arguments},e},e.rangeBand=function(){return a},e.rangeExtent=function(){var t=n.a[0],e=t[0],r=t[t.length-1];return e>r&&(t=r,r=e,e=t),[e,r]},e.copy=function(){return at(t,n)},e.domain(t)}function ut(){return at([],{t:"range",a:[[]]})}function ot(t,n,e){function r(t){return(e[0]<0?-Math.log(t>0?0:-t):Math.log(0>t?0:t))/Math.log(n)}function i(t){return e[0]<0?-Math.pow(n,-t):Math.pow(n,t)}function a(n){return t(r(n))}return a.invert=function(n){return i(t.invert(n))},a.base=function(t){return arguments.length?(n=+t,a.domain(e)):n},a.domain=function(n){return arguments.length?(e=n.map(Number),t.domain(e.map(r)),a):e.slice()},a.nice=function(){var n=N(t.domain(),1);return t.domain(n),e=n.map(i),a},a.ticks=function(){var t=e[0],a=e[e.length-1];t>a&&(s=t,t=a,a=s);var u,o,s=Math.floor(r(t)),c=Math.ceil(r(a)),l=n%1?2:n,h=[];if(isFinite(c-s))if(t>0){for(--c,u=1;l>u;++u){if((o=i(s)*u)<t)continue;h.push(o)}for(;++s<c;)for(u=1;l>u;++u)h.push(i(s)*u);for(u=1;l>u&&!((o=i(s)*u)>a);++u)h.push(o)}else{for(++s,u=l-1;u>=1;--u){if((o=i(s)*u)<t)continue;h.push(o)}for(;++s<c;)for(u=l-1;u>=1;--u)h.push(i(s)*u);for(u=l-1;u>=1&&!((o=i(s)*u)>a);--u)h.push(o)}return h},a.tickFormat=function(t,u){if(null==u?u=10===n?Gt:Xt:"function"!=typeof u&&(u=Ct(u)),null==t)return u;var o,s=Math.min(n,a.ticks().length/t),c=e[0]>0?(o=1e-12,Math.ceil):(o=-1e-12,Math.floor);return function(t){return i(c(r(t)+o))/t>=s?u(t):""}},a.copy=function(){return ot(t.copy(),n,e)},J(a,t)}function st(){return ot(H(),10,[1,10])}function ct(t){function n(t){return+t}return n.invert=n,n.domain=n.range=function(e){return arguments.length?(t=e.map(Number),n):t.slice()},n.ticks=function(n){return X(t,n)},n.tickFormat=function(n,e){return I(t,n,e)},n.copy=function(){return ct(t)},n}function lt(){return ct([0,1])}function ht(){return ut().range(["#3182bd","#6baed6","#9ecae1","#c6dbef","#e6550d","#fd8d3c","#fdae6b","#fdd0a2","#31a354","#74c476","#a1d99b","#c7e9c0","#756bb1","#9e9ac8","#bcbddc","#dadaeb","#636363","#969696","#bdbdbd","#d9d9d9"])}function ft(){return ut().range(["#393b79","#5254a3","#6b6ecf","#9c9ede","#637939","#8ca252","#b5cf6b","#cedb9c","#8c6d31","#bd9e39","#e7ba52","#e7cb94","#843c39","#ad494a","#d6616b","#e7969c","#7b4173","#a55194","#ce6dbd","#de9ed6"])}function gt(){return ut().range(["#1f77b4","#aec7e8","#ff7f0e","#ffbb78","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5","#8c564b","#c49c94","#e377c2","#f7b6d2","#7f7f7f","#c7c7c7","#bcbd22","#dbdb8d","#17becf","#9edae5"])}function dt(){return ut().range(["#1f77b4","#ff7f0e","#2ca02c","#d62728","#9467bd","#8c564b","#e377c2","#7f7f7f","#bcbd22","#17becf"])}var mt=r(n),pt=mt.right,bt=pt;h.prototype={toString:function(){return this.rgb()+""}};var Mt=l.prototype=new h,vt=.7;Mt.darker=function(t){return t=null==t?vt:Math.pow(vt,t),new l(this.r*t,this.g*t,this.b*t)};var yt=1/vt;Mt.brighter=function(t){return t=null==t?yt:Math.pow(yt,t),new l(this.r*t,this.g*t,this.b*t)},Mt.rgb=function(){return this},Mt.toString=function(){return c(this.r,this.g,this.b)};var wt=(new Map).set("aliceblue",15792383).set("antiquewhite",16444375).set("aqua",65535).set("aquamarine",8388564).set("azure",15794175).set("beige",16119260).set("bisque",16770244).set("black",0).set("blanchedalmond",16772045).set("blue",255).set("blueviolet",9055202).set("brown",10824234).set("burlywood",14596231).set("cadetblue",6266528).set("chartreuse",8388352).set("chocolate",13789470).set("coral",16744272).set("cornflowerblue",6591981).set("cornsilk",16775388).set("crimson",14423100).set("cyan",65535).set("darkblue",139).set("darkcyan",35723).set("darkgoldenrod",12092939).set("darkgray",11119017).set("darkgreen",25600).set("darkgrey",11119017).set("darkkhaki",12433259).set("darkmagenta",9109643).set("darkolivegreen",5597999).set("darkorange",16747520).set("darkorchid",10040012).set("darkred",9109504).set("darksalmon",15308410).set("darkseagreen",9419919).set("darkslateblue",4734347).set("darkslategray",3100495).set("darkslategrey",3100495).set("darkturquoise",52945).set("darkviolet",9699539).set("deeppink",16716947).set("deepskyblue",49151).set("dimgray",6908265).set("dimgrey",6908265).set("dodgerblue",2003199).set("firebrick",11674146).set("floralwhite",16775920).set("forestgreen",2263842).set("fuchsia",16711935).set("gainsboro",14474460).set("ghostwhite",16316671).set("gold",16766720).set("goldenrod",14329120).set("gray",8421504).set("green",32768).set("greenyellow",11403055).set("grey",8421504).set("honeydew",15794160).set("hotpink",16738740).set("indianred",13458524).set("indigo",4915330).set("ivory",16777200).set("khaki",15787660).set("lavender",15132410).set("lavenderblush",16773365).set("lawngreen",8190976).set("lemonchiffon",16775885).set("lightblue",11393254).set("lightcoral",15761536).set("lightcyan",14745599).set("lightgoldenrodyellow",16448210).set("lightgray",13882323).set("lightgreen",9498256).set("lightgrey",13882323).set("lightpink",16758465).set("lightsalmon",16752762).set("lightseagreen",2142890).set("lightskyblue",8900346).set("lightslategray",7833753).set("lightslategrey",7833753).set("lightsteelblue",11584734).set("lightyellow",16777184).set("lime",65280).set("limegreen",3329330).set("linen",16445670).set("magenta",16711935).set("maroon",8388608).set("mediumaquamarine",6737322).set("mediumblue",205).set("mediumorchid",12211667).set("mediumpurple",9662683).set("mediumseagreen",3978097).set("mediumslateblue",8087790).set("mediumspringgreen",64154).set("mediumturquoise",4772300).set("mediumvioletred",13047173).set("midnightblue",1644912).set("mintcream",16121850).set("mistyrose",16770273).set("moccasin",16770229).set("navajowhite",16768685).set("navy",128).set("oldlace",16643558).set("olive",8421376).set("olivedrab",7048739).set("orange",16753920).set("orangered",16729344).set("orchid",14315734).set("palegoldenrod",15657130).set("palegreen",10025880).set("paleturquoise",11529966).set("palevioletred",14381203).set("papayawhip",16773077).set("peachpuff",16767673).set("peru",13468991).set("pink",16761035).set("plum",14524637).set("powderblue",11591910).set("purple",8388736).set("rebeccapurple",6697881).set("red",16711680).set("rosybrown",12357519).set("royalblue",4286945).set("saddlebrown",9127187).set("salmon",16416882).set("sandybrown",16032864).set("seagreen",3050327).set("seashell",16774638).set("sienna",10506797).set("silver",12632256).set("skyblue",8900331).set("slateblue",6970061).set("slategray",7372944).set("slategrey",7372944).set("snow",16775930).set("springgreen",65407).set("steelblue",4620980).set("tan",13808780).set("teal",32896).set("thistle",14204888).set("tomato",16737095).set("turquoise",4251856).set("violet",15631086).set("wheat",16113331).set("white",16777215).set("whitesmoke",16119285).set("yellow",16776960).set("yellowgreen",10145074),xt=g.prototype=new h;xt.brighter=function(t){return t=null==t?yt:Math.pow(yt,t),new g(this.h,this.s,this.l*t)},xt.darker=function(t){return t=null==t?vt:Math.pow(vt,t),new g(this.h,this.s,this.l*t)},xt.rgb=function(){var t=this.h%360+360*(this.h<0),n=isNaN(t)||isNaN(this.s)?0:this.s,e=this.l,r=.5>=e?e*(1+n):e+n-e*n,i=2*e-r;return new l(d(t>=240?t-240:t+120,i,r),d(t,i,r),d(120>t?t+240:t-120,i,r))};var kt,Nt=/^hsl$\s*([-+]?\d+(?:\.\d+)?)\s*,\s*([-+]?\d+(?:\.\d+)?)%\s*,\s*([-+]?\d+(?:\.\d+)?)%\s*$$/,qt=/^rgb$\s*([-+]?\d+(?:\.\d+)?)%\s*,\s*([-+]?\d+(?:\.\d+)?)%\s*,\s*([-+]?\d+(?:\.\d+)?)%\s*$$/,St=/^rgb$\s*([-+]?\d+)\s*,\s*([-+]?\d+)\s*,\s*([-+]?\d+)\s*$$/,jt=/^#([0-9a-f]{6})$/,At=/^#([0-9a-f]{3})$/,Et=/[-+]?(?:\d+\.?\d*|\.?\d+)(?:[eE][-+]?\d+)?/g,$t=new RegExp(Et.source,"g"),Pt=[function(t,n){var e,r=typeof n;return("string"===r?(e=p(n))?(n=e,M):w:n instanceof p?M:Array.isArray(n)?s:"object"===r&&isNaN(n)?o:u)(t,n)}],_t=Math.sqrt(2),Rt=Math.sqrt(10),zt=Math.sqrt(50),Ft=["y","z","a","f","p","n","µ","m","","k","M","G","T","P","E","Z","Y"],Ot={"":E,"%":function(t,n){return(100*t).toFixed(n)},b:function(t){return Math.round(t).toString(2)},c:function(t){return t+""},d:function(t){return Math.round(t).toString(10)},e:function(t,n){return t.toExponential(n)},f:function(t,n){return t.toFixed(n)},g:function(t,n){return t.toPrecision(n)},o:function(t){return Math.round(t).toString(8)},p:function(t,n){return A(100*t,n)},r:A,s:j,X:function(t){return Math.round(t).toString(16).toUpperCase()},x:function(t){return Math.round(t).toString(16)}},Bt=/^(?:(.)?([<>=^]))?([+\-\( ])?([$#])?(0)?(\d+)?(,)?(\.\d+)?([a-z%])?$/i;$.prototype.toString=function(){return this.fill+this.align+this.sign+this.symbol+(this.zero?"0":"")+(null==this.width?"":Math.max(1,0|this.width))+(this.comma?",":"")+(null==this.precision?"":"."+Math.max(0,0|this.precision))+this.type};var It=z({decimal:".",thousands:",",grouping:[3],currency:["$",""]}),Ct=It.format,Lt=It.formatPrefix,Xt=Ct(","),Gt=Ct(".0e");t.category10=dt,t.category20=gt,t.category20b=ft,t.category20c=ht,t.identity=lt,t.linear=H,t.log=st,t.ordinal=ut,t.pow=rt,t.quantile=et,t.quantize=W,t.sqrt=Q,t.threshold=a});

/* https://github.com/d3/d3-xhr Copyright 2015 Mike Bostock */
"undefined"==typeof Map?(Map=function(){this.clear()},Map.prototype={set:function(e,n){return this._[e]=n,this},get:function(e){return this._[e]},has:function(e){return e in this._},"delete":function(e){return e in this._&&delete this._[e]},clear:function(){this._=Object.create(null)},get size(){var e=0;for(var n in this._)++e;return e},forEach:function(e){for(var n in this._)e(this._[n],n,this)}}):function(){var e=new Map;e.set(0,0)!==e&&(e=e.set,Map.prototype.set=function(){return e.apply(this,arguments),this})}(),function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n(e.xhr={})}(this,function(e){"use strict";function n(e){function n(e,n){var r;return t(e,function(e,t){if(r)return r(e,t-1);var o=new Function("d","return {"+e.map(function(e,n){return JSON.stringify(e)+": d["+n+"]"}).join(",")+"}");r=n?function(e,t){return n(o(e),t)}:o})}function t(e,n){function t(){if(f>=c)return i;if(o)return o=!1,u;var n=f;if(34===e.charCodeAt(n)){for(var t=n;t++<c;)if(34===e.charCodeAt(t)){if(34!==e.charCodeAt(t+1))break;++t}f=t+2;var r=e.charCodeAt(t+1);return 13===r?(o=!0,10===e.charCodeAt(t+2)&&++f):10===r&&(o=!0),e.slice(n+1,t).replace(/""/g,'"')}for(;c>f;){var r=e.charCodeAt(f++),a=1;if(10===r)o=!0;else if(13===r)o=!0,10===e.charCodeAt(f)&&(++f,++a);else if(r!==s)continue;return e.slice(n,f-a)}return e.slice(n)}for(var r,o,u={},i={},a=[],c=e.length,f=0,l=0;(r=t())!==i;){for(var p=[];r!==u&&r!==i;)p.push(r),r=t();n&&null==(p=n(p,l++))||a.push(p)}return a}function r(n){if(Array.isArray(n[0]))return o(n);var t=Object.create(null),r=[];return n.forEach(function(e){for(var n in e)(n+="")in t||r.push(t[n]=n)}),[r.map(i).join(e)].concat(n.map(function(n){return r.map(function(e){return i(n[e])}).join(e)})).join("\n")}function o(e){return e.map(u).join("\n")}function u(n){return n.map(i).join(e)}function i(e){return a.test(e)?'"'+e.replace(/\"/g,'""')+'"':e}var a=new RegExp('["'+e+"\n]"),s=e.charCodeAt(0);return{parse:n,parseRows:t,format:r,formatRows:o}}function t(e,n){return function(t){return e.parse(t.responseText,n)}}function r(e){return function(n,t){e(null==n?t:null)}}function o(e){var n=e.responseType;return n&&"text"!==n?e.response:e.responseText}function u(e){function n(e){var n=(e+="").indexOf("."),t=e;if(n>=0?e=e.slice(0,n):t+=".",e&&!i.hasOwnProperty(e))throw new Error("unknown type: "+e);return{type:e,name:t}}function t(e){return function(){for(var n,t,r=i[e],o=-1,u=r.length;++o<u;)(t=(n=r[o]).value)&&t.apply(this,arguments);return s}}var r,o=-1,u=e.length,i={},a={},s=this;for(s.on=function(e,t){if(e=n(e),arguments.length<2)return(t=a[e.name])&&t.value;if(e.type){var r,o=i[e.type],u=a[e.name];u&&(u.value=null,r=o.indexOf(u),i[e.type]=o=o.slice(0,r).concat(o.slice(r+1)),delete a[e.name]),t&&(t={value:t},a[e.name]=t,o.push(t))}else if(null==t)for(var c in i)if(t=a[c+e.name]){t.value=null;var o=i[c],r=o.indexOf(t);i[c]=o.slice(0,r).concat(o.slice(r+1)),delete a[t.name]}return s};++o<u;){if(r=e[o]+"",!r||r in s)throw new Error("illegal or duplicate type: "+r);i[r]=[],s[r]=t(r)}}function i(){return new u(arguments)}function a(e,n){function t(){var e,n=p.status;if(!n&&o(p)||n>=200&&300>n||304===n){if(s)try{e=s.call(u,p)}catch(t){return void f.error.call(u,t)}else e=p;f.load.call(u,e)}else f.error.call(u,p)}var u,a,s,c,f=i("beforesend","progress","load","error"),l=new Map,p=new XMLHttpRequest;return"undefined"==typeof XDomainRequest||"withCredentials"in p||!/^(http(s)?:)?\/\//.test(e)||(p=new XDomainRequest),"onload"in p?p.onload=p.onerror=t:p.onreadystatechange=function(){p.readyState>3&&t()},p.onprogress=function(e){f.progress.call(u,e)},u={header:function(e,n){return e=(e+"").toLowerCase(),arguments.length<2?l.get(e):(null==n?l["delete"](e):l.set(e,n+""),u)},mimeType:function(e){return arguments.length?(a=null==e?null:e+"",u):a},responseType:function(e){return arguments.length?(c=e,u):c},response:function(e){return s=e,u},get:function(e,n){return u.send("GET",e,n)},post:function(e,n){return u.send("POST",e,n)},send:function(n,t,o){return o||"function"!=typeof t||(o=t,t=null),o&&1===o.length&&(o=r(o)),p.open(n,e,!0),null==a||l.has("accept")||l.set("accept",a+",*/*"),p.setRequestHeader&&l.forEach(function(e,n){p.setRequestHeader(n,e)}),null!=a&&p.overrideMimeType&&p.overrideMimeType(a),null!=c&&(p.responseType=c),o&&u.on("error",o).on("load",function(e){o(null,e)}),f.beforesend.call(u,p),p.send(null==t?null:t),u},abort:function(){return p.abort(),u},on:function(){var e=f.on.apply(f,arguments);return e===f?u:e}},n?u.get(n):u}function s(e,n){return function(r,o,u){arguments.length<3&&(u=o,o=null);var i=a(r).mimeType(e);return i.row=function(e){return arguments.length?i.response(t(n,o=e)):o},i.row(o),u?i.get(u):i}}function c(e,n){return function(t,r){var o=a(t).mimeType(e).response(n);return r?o.get(r):o}}var f=n("\t");i.prototype=u.prototype;var l=s("text/tab-separated-values",f),p=n(","),h=s("text/csv",p),d=c("application/xml",function(e){return e.responseXML}),m=c("text/plain",function(e){return e.responseText}),v=c("application/json",function(e){return JSON.parse(e.responseText)}),g=c("text/html",function(e){return document.createRange().createContextualFragment(e.responseText)});e.xhr=a,e.html=g,e.json=v,e.text=m,e.xml=d,e.csv=h,e.tsv=l});

var canvas = document.querySelector("canvas"),
    context = canvas.getContext("2d");

var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = canvas.width - margin.left - margin.right,
    height = canvas.height - margin.top - margin.bottom;

var x = scale.ordinal().rangeRoundBands([0, width], .1),
    y = scale.linear().rangeRound([height, 0]);

xhr.tsv("data.tsv", function(d) {
  d.frequency = +d.frequency;
  return d;
}, function(error, data) {
  if (error) throw error;

x.domain(data.map(function(d) { return d.letter; }));
  y.domain([0, data.reduce(function(p, d) { return Math.max(p, d.frequency); }, 0)]);

/* margins */
  context.translate(margin.left, margin.top);

/* x-ticks */
  context.beginPath();
  x.domain().forEach(function(d) {
    context.moveTo(x(d) + x.rangeBand() / 2, height);
    context.lineTo(x(d) + x.rangeBand() / 2, height + 6);
  });
  context.strokeStyle = "black";
  context.stroke();

/* x-tick labels */
  context.textAlign = "center";
  context.textBaseline = "top";
  x.domain().forEach(function(d) {
    context.fillText(d, x(d) + x.rangeBand() / 2, height + 6);
  });

/* y-ticks */
  context.beginPath();
  y.ticks(10).forEach(function(d) {
    context.moveTo(0, y(d) + 0.5);
    context.lineTo(-6, y(d) + 0.5);
  });
  context.strokeStyle = "black";
  context.stroke();

/* y-tick labels */
  var format = y.tickFormat(10, "%");
  context.textAlign = "right";
  context.textBaseline = "middle";
  y.ticks(10).forEach(function(d) {
    context.fillText(format(d), -9, y(d));
  });

/* y-axis */
  context.beginPath();
  context.moveTo(-6.5, 0 + 0.5);
  context.lineTo(0.5, 0 + 0.5);
  context.lineTo(0.5, height + 0.5);
  context.lineTo(-6.5, height + 0.5);
  context.strokeStyle = "black";
  context.stroke();

/* y-axis title */
  context.save();
  context.rotate(-Math.PI / 2);
  context.textAlign = "right";
  context.textBaseline = "top";
  context.fillText("Frequency", 0, 3);
  context.restore();

/* bars */
  context.fillStyle = "steelblue";
  data.forEach(function(d) {
    context.fillRect(x(d.letter), y(d.frequency), x.rangeBand(), height - y(d.frequency));
  });
});

</script>