| <!--Example from http://bl.ocks.org/officeofjane/7315455--> | |
| <!DOCTYPE html> | |
| <html> | |
| <meta charset="utf-8"> | |
| <head> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.min.js"></script> | |
| <style type="text/css"> | |
| body { | |
| font: 11px sans-serif; | |
| margin: 10px; | |
| } | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: #000; | |
| shape-rendering: crispEdges; | |
| } | |
| .bar:hover { | |
| fill: #bcbcbc ; | |
| } | |
| .x.axis path { | |
| display: none; | |
| } | |
| .d3-tip { | |
| line-height: 1; | |
| font-weight: bold; | |
| padding: 12px; | |
| background: rgba(0, 0, 0, 0.8); | |
| color: #efefef; | |
| border-radius: 2px; | |
| } | |
| /* Creates a small triangle extender for the tooltip */ | |
| .d3-tip:after { | |
| box-sizing: border-box; | |
| display: inline; | |
| font-size: 10px; | |
| width: 100%; | |
| line-height: 1; | |
| color: rgba(0, 0, 0, 0.8); | |
| content: "\25BC"; | |
| position: absolute; | |
| text-align: center; | |
| } | |
| /* Style northward tooltips differently */ | |
| .d3-tip.n:after { | |
| margin: -1px 0 0 0; | |
| top: 100%; | |
| left: 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="vis"></div> | |
| <script type="text/javascript"> | |
| var margin = {top: 45, right: 100, bottom: 20, left: 50}, | |
| width = 450 - margin.left - margin.right, | |
| height = 90 - margin.top - margin.bottom; | |
| //var formatPercent = d3.format(".2f"); | |
| var formatFixedPercent = d3.format(".1%"), | |
| formatPercent = function(x) { return formatFixedPercent(x).replace(/\.0+%$/, "%"); }; | |
| var color = d3.scale.linear() | |
| .range(["#ccccff","#b2b2ff","#7f7fff","#4c4cff","#1919ff"]) | |
| .domain([0,0.2,0.4,0.6,0.8]); | |
| var x = d3.scale.ordinal() | |
| .rangeRoundBands([0, width], .1); | |
| // Scales. Note the inverted domain fo y-scale: bigger is up! | |
| var y = d3.scale.linear() | |
| .range([height, 0]); | |
| var xAxis = d3.svg.axis() | |
| .scale(x) | |
| .orient("bottom"); | |
| var yAxis = d3.svg.axis() | |
| .scale(y) | |
| .orient("left") | |
| .tickFormat(formatPercent); | |
| var tip = d3.tip() | |
| .attr('class', 'd3-tip') | |
| .offset([-10, 0]) | |
| .html(function(d) { | |
| return "<strong>"+ d.afsc+ "</br>" + d.count + "\t </strong>(<span style='color:#fff'>" + formatPercent(d.percent) + ")</span>"; | |
| }) | |
| // tsv loaded asynchronously | |
| d3.tsv("multibarchart_data.tsv", type, function(data) { | |
| // Data is nested by afsc | |
| var countries = d3.nest() | |
| .key(function(d) { return d.afsc; }) | |
| .entries(data); | |
| // Parse dates and numbers. We assume values are sorted by date. | |
| // Also compute the maximum price per symbol, needed for the y-domain. | |
| // symbols.forEach(function(s) { | |
| // s.values.forEach(function(d) { d.date = parse(d.date); d.price = +d.price; }); | |
| // s.maxPrice = d3.max(s.values, function(d) { return d.price; }); | |
| // }); | |
| // Compute the minimum and maximum utility and percent across symbols. | |
| x.domain(data.map(function(d) { return d.utility; })); | |
| y.domain([0, d3.max(countries, function(s) { return s.values[0].percent; })]); | |
| // Add an SVG element for each afsc, with the desired dimensions and margin. | |
| var svg = d3.select("#vis").selectAll("svg") | |
| .data(countries) | |
| .enter() | |
| .append("svg:svg") | |
| .attr("width", width + margin.left + margin.right) | |
| .attr("height", height + margin.top + margin.bottom) | |
| .append("g") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| svg.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(xAxis); | |
| svg.append("g") | |
| // Hide y axis | |
| // .attr("class", "y axis") | |
| // .call(yAxis) | |
| .append("text") | |
| .attr("x", width + 10) | |
| .attr("y", height/3) | |
| .attr("dy", ".71em") | |
| .attr("text-anchor", "start") | |
| .attr("font-size", "1.1em") | |
| .text(function(d) { return d.key}); | |
| // Accessing nested data: https://groups.google.com/forum/#!topic/d3-js/kummm9mS4EA | |
| // data(function(d) {return d.values;}) | |
| // this will dereference the values for nested data for each group | |
| svg.selectAll(".bar") | |
| .data(function(d) {return d.values;}) | |
| .enter() | |
| .append("rect") | |
| .attr("class", "bar") | |
| .attr("x", function(d) { return x(d.utility); }) | |
| .attr("width", x.rangeBand()) | |
| .attr("y", function(d) { return y(d.percent); }) | |
| .attr("height", function(d) { return height - y(d.percent); }) | |
| .attr("fill", function(d) {return color(d.percent)}) | |
| .on('mouseover', tip.show) | |
| .on('mouseout', tip.hide) | |
| svg.call(tip); | |
| }); | |
| function type(d) { | |
| d.percent = +d.percent; | |
| return d; | |
| } | |
| </script> | |
| </body> | |
| </html> |
We can make this file beautiful and searchable if this error is corrected: It looks like row 177 should actually have 5 columns, instead of 4.
| afsc utility percent count | |
| 13M 0 0.07 1 | |
| 13M 10 0 0 | |
| 13M 20 0 0 | |
| 13M 30 0.27 4 | |
| 13M 40 0 0 | |
| 13M 50 0.13 2 | |
| 13M 60 0 0 | |
| 13M 70 0 0 | |
| 13M 80 0.07 1 | |
| 13M 90 0.07 1 | |
| 13M 100 0.4 6 | |
| 13N 0 0.26 38 | |
| 13N 10 0 0 | |
| 13N 20 0.12 18 | |
| 13N 30 0.09 13 | |
| 13N 40 0.06 9 | |
| 13N 50 0.08 11 | |
| 13N 60 0.02 3 | |
| 13N 70 0.03 5 | |
| 13N 80 0.03 5 | |
| 13N 90 0.06 8 | |
| 13N 100 0.24 35 | |
| 13S 0 0.1 9 | |
| 13S 10 0 0 | |
| 13S 20 0 0 | |
| 13S 30 0.01 1 | |
| 13S 40 0.01 1 | |
| 13S 50 0.01 1 | |
| 13S 60 0.02 2 | |
| 13S 70 0.06 5 | |
| 13S 80 0.09 8 | |
| 13S 90 0.09 8 | |
| 13S 100 0.6 53 | |
| 14N 0 0.01 2 | |
| 14N 10 0 0 | |
| 14N 20 0 0 | |
| 14N 30 0 0 | |
| 14N 40 0 0 | |
| 14N 50 0 0 | |
| 14N 60 0.01 1 | |
| 14N 70 0.01 1 | |
| 14N 80 0.03 5 | |
| 14N 90 0.03 5 | |
| 14N 100 0.9 130 | |
| 15W 0 0.08 2 | |
| 15W 10 0 0 | |
| 15W 20 0 0 | |
| 15W 30 0 0 | |
| 15W 40 0.04 1 | |
| 15W 50 0 0 | |
| 15W 60 0.04 1 | |
| 15W 70 0 0 | |
| 15W 80 0.04 1 | |
| 15W 90 0 0 | |
| 15W 100 0.8 20 | |
| 17D 0 0.35 70 | |
| 17D 10 0 0 | |
| 17D 20 0.02 5 | |
| 17D 30 0.01 2 | |
| 17D 40 0.01 3 | |
| 17D 50 0.04 9 | |
| 17D 60 0.02 4 | |
| 17D 70 0.02 5 | |
| 17D 80 0.06 13 | |
| 17D 90 0 1 | |
| 17D 100 0.45 90 | |
| 21X 0 0.08 6 | |
| 21X 10 0 0 | |
| 21X 20 0.01 1 | |
| 21X 30 0.03 2 | |
| 21X 40 0.03 2 | |
| 21X 50 0.01 1 | |
| 21X 60 0.03 2 | |
| 21X 70 0.08 6 | |
| 21X 80 0.13 9 | |
| 21X 90 0.06 4 | |
| 21X 100 0.54 39 | |
| 31P 0 0 0 | |
| 31P 10 0 0 | |
| 31P 20 0 0 | |
| 31P 30 0 0 | |
| 31P 40 0 0 | |
| 31P 50 0 0 | |
| 31P 60 0 0 | |
| 31P 70 0 0 | |
| 31P 80 0.21 3 | |
| 31P 90 0.07 1 | |
| 31P 100 0.71 10 | |
| 32E 0 0.05 3 | |
| 32E 10 0 0 | |
| 32E 20 0 0 | |
| 32E 30 0 0 | |
| 32E 40 0 0 | |
| 32E 50 0.03 2 | |
| 32E 60 0 0 | |
| 32E 70 0.03 2 | |
| 32E 80 0.07 4 | |
| 32E 90 0.1 6 | |
| 32E 100 0.71 41 | |
| 35P 0 0 0 | |
| 35P 10 0 0 | |
| 35P 20 0 0 | |
| 35P 30 0 0 | |
| 35P 40 0 0 | |
| 35P 50 0 0 | |
| 35P 60 0 0 | |
| 35P 70 0 0 | |
| 35P 80 0.08 1 | |
| 35P 90 0.08 1 | |
| 35P 100 0.83 10 | |
| 38P 0 0.15 4 | |
| 38P 10 0 0 | |
| 38P 20 0 0 | |
| 38P 30 0 0 | |
| 38P 40 0 0 | |
| 38P 50 0.04 1 | |
| 38P 60 0.04 1 | |
| 38P 70 0.07 2 | |
| 38P 80 0.11 3 | |
| 38P 90 0.04 1 | |
| 38P 100 0.56 15 | |
| 61X 0 0.07 3 | |
| 61X 10 0 0 | |
| 61X 20 0 0 | |
| 61X 30 0.02 1 | |
| 61X 40 0 0 | |
| 61X 50 0.02 1 | |
| 61X 60 0 0 | |
| 61X 70 0 0 | |
| 61X 80 0.04 2 | |
| 61X 90 0.02 1 | |
| 61X 100 0.83 38 | |
| 62E 0 0.06 8 | |
| 62E 10 0 0 | |
| 62E 20 0 0 | |
| 62E 30 0 0 | |
| 62E 40 0.01 1 | |
| 62E 50 0.02 3 | |
| 62E 60 0 0 | |
| 62E 70 0.01 2 | |
| 62E 80 0.04 5 | |
| 62E 90 0.08 11 | |
| 62E 100 0.78 107 | |
| 63A 0 0.26 24 | |
| 63A 10 0 0 | |
| 63A 20 0.01 1 | |
| 63A 30 0 0 | |
| 63A 40 0 0 | |
| 63A 50 0.06 6 | |
| 63A 60 0.01 1 | |
| 63A 70 0.02 2 | |
| 63A 80 0.09 8 | |
| 63A 90 0.04 4 | |
| 63A 100 0.51 47 | |
| 64P 0 0 0 | |
| 64P 10 0 0 | |
| 64P 20 0 0 | |
| 64P 30 0 0 | |
| 64P 40 0.04 1 | |
| 64P 50 0.04 1 | |
| 64P 60 0.11 3 | |
| 64P 70 0.07 2 | |
| 64P 80 0.07 2 | |
| 64P 90 0.15 4 | |
| 64P 100 0.52 14 | |
| 65F 0 0.29 7 | |
| 65F 10 0 0 | |
| 65F 20 0 0 | |
| 65F 30 0.04 1 | |
| 65F 40 0 0 | |
| 65F 50 0 0 | |
| 65F 60 0 0 | |
| 65F 70 0.08 2 | |
| 65F 80 0.08 2 | |
| 65F 90 0.17 4 | |
| 65F 100 0.33 8 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment