| license: gpl-3.0 |
A variation of the example bar chart using a slightly more D.R.Y. style. The visual encoding is represented by two functions and their composition:
Inspired by Andrew Winterman’s post, Tooling for the Lazy Programmer: DRYing up D3.
| letter | frequency | |
|---|---|---|
| A | .08167 | |
| B | .01492 | |
| C | .02780 | |
| D | .04253 | |
| E | .12702 | |
| F | .02288 | |
| G | .02022 | |
| H | .06094 | |
| I | .06973 | |
| J | .00153 | |
| K | .00747 | |
| L | .04025 | |
| M | .02517 | |
| N | .06749 | |
| O | .07507 | |
| P | .01929 | |
| Q | .00098 | |
| R | .05987 | |
| S | .06333 | |
| T | .09056 | |
| U | .02758 | |
| V | .01037 | |
| W | .02465 | |
| X | .00150 | |
| Y | .01971 | |
| Z | .00074 |
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| font: 10px sans-serif; | |
| } | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: #000; | |
| shape-rendering: crispEdges; | |
| } | |
| .bar { | |
| fill: steelblue; | |
| } | |
| .x.axis path { | |
| display: none; | |
| } | |
| </style> | |
| <body> | |
| <script src="//d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var margin = {top: 20, right: 20, bottom: 30, left: 40}, | |
| width = 960 - margin.left - margin.right, | |
| height = 500 - margin.top - margin.bottom; | |
| var formatPercent = d3.format(".0%"); | |
| var xValue = function(d) { return d.letter; }, // data -> value | |
| xScale = d3.scale.ordinal().rangeRoundBands([0, width], .1), // value -> display | |
| xMap = function(d) { return xScale(xValue(d)); }, // data -> display | |
| xAxis = d3.svg.axis().scale(xScale).orient("bottom"); | |
| var yValue = function(d) { return d.frequency; }, // data -> value | |
| yScale = d3.scale.linear().range([height, 0]), // value -> display | |
| yMap = function(d) { return yScale(yValue(d)); }, // data -> display | |
| yAxis = d3.svg.axis().scale(yScale).orient("left").tickFormat(formatPercent); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width + margin.left + margin.right) | |
| .attr("height", height + margin.top + margin.bottom) | |
| .append("g") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| d3.tsv("data.tsv", type, function(error, data) { | |
| xScale.domain(data.map(xValue)); | |
| yScale.domain([0, d3.max(data, yValue)]); | |
| svg.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(xAxis); | |
| svg.append("g") | |
| .attr("class", "y axis") | |
| .call(yAxis) | |
| .append("text") | |
| .attr("transform", "rotate(-90)") | |
| .attr("y", 6) | |
| .attr("dy", ".71em") | |
| .style("text-anchor", "end") | |
| .text("Frequency"); | |
| svg.selectAll(".bar") | |
| .data(data) | |
| .enter().append("rect") | |
| .attr("class", "bar") | |
| .attr("x", xMap) | |
| .attr("width", xScale.rangeBand) | |
| .attr("y", yMap) | |
| .attr("height", function(d) { return height - yMap(d); }); | |
| }); | |
| function type(d) { | |
| d.frequency = +d.frequency; | |
| return d; | |
| } | |
| </script> |
