I'm trying to make a different chart. I'm not succeeding.
See also this histogram of a log-normal distribution of time durations.
-
-
Save pfaffman/5988097 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| font: 10px sans-serif; | |
| } | |
| .bar rect { | |
| fill: steelblue; | |
| shape-rendering: crispEdges; | |
| } | |
| .bar text { | |
| fill: #fff; | |
| } | |
| .axis path, .axis line { | |
| fill: none; | |
| stroke: #000; | |
| shape-rendering: crispEdges; | |
| } | |
| </style> | |
| <body> | |
| <script src="http://d3js.org/d3.v2.min.js?2.10.0"></script> | |
| <script> | |
| var values = [82, 83, 84, 86, 87, 88, 88, 88, 89, 89, 89, 89, 89, 90, 90, 90, 90, 91, 91, 92, 95, 95, 97, 101, 106, 108, 108, 109, 109, 109, 110, 110, 110, 110, 111, 111, 111, 112, 113, 115] | |
| var values = [85, 93, 96, 97, 97, 98, 98, 99, 99, 99, 99, 100, 100, 100, 100, 100, 100, 101, 101, 101, 101, 101, 102, 102, 102, 102, 102, 102, 103, 103, 103, 103, 104, 104, 104, 105, 106, 106, 107, 111] | |
| // A formatter for counts. | |
| var formatCount = d3.format(",.0f"); | |
| var margin = {top: 10, right: 30, bottom: 30, left: 30}, | |
| width = 400 - margin.left - margin.right, | |
| height = 400 - margin.top - margin.bottom; | |
| var x0 = Math.max(-d3.min(values), d3.max(values)); | |
| var x = d3.scale.linear() | |
| .domain([d3.min(values), d3.max(values)]) | |
| .range([0, width]) | |
| .nice(); | |
| // Generate a histogram using twenty uniformly-spaced bins. | |
| var data = d3.layout.histogram() | |
| .bins(x.ticks(d3.max(values) - d3.min(values) + 1)) | |
| (values); | |
| var y = d3.scale.linear() | |
| .domain([0, d3.max(data, function(d) { return d.y; })]) | |
| .range([height, 0]); | |
| var xAxis = d3.svg.axis() | |
| .scale(x) | |
| .orient("bottom"); | |
| 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 + ")"); | |
| var bar = svg.selectAll(".bar") | |
| .data(data) | |
| .enter().append("g") | |
| .attr("class", "bar") | |
| .attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; }); | |
| bar.append("rect") | |
| .attr("x", 1) | |
| .attr("width", x(data[0].x + data[0].dx) - 1) | |
| .attr("height", function(d) { return height - y(d.y); }); | |
| bar.append("text") | |
| .attr("dy", ".75em") | |
| .attr("y", 6) | |
| .attr("x", x(data[0].dx) / 2) | |
| .attr("text-anchor", "middle") | |
| .text(function(d) { return formatCount(d.y); }); | |
| svg.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(xAxis); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment