D3 Bar Vis 2
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| .chart rect { | |
| fill: #dc0045; | |
| } | |
| .chart text { | |
| fill: white; | |
| font: 10px sans-serif; | |
| text-anchor: middle; | |
| } | |
| </style> | |
| <svg class="chart"></svg> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var width = 960, | |
| height = 500; | |
| //Helper Functions | |
| var y = d3.scale.linear() | |
| .range([height, 0]);//svg 0 is on top the screen | |
| //Viz | |
| var chart = d3.select(".chart") | |
| .attr("width", width) | |
| .attr("height", height); | |
| d3.tsv("data.tsv", type, function(error, data) { | |
| y.domain([0, d3.max(data, function(d) { return d.frequency; })]);//array of objects | |
| var barWidth = width / data.length; | |
| var bar = chart.selectAll("g")//group | |
| .data(data) | |
| .enter().append("g") | |
| .attr("transform", function(d, i) { return "translate(" + i * barWidth + ",0)"; });//svg property | |
| //https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform | |
| bar.append("rect") | |
| .attr("y", function(d) { return y(d.frequency); }) | |
| .attr("height", function(d) { return height - y(d.frequency); }) | |
| .attr("width", barWidth - 1); | |
| bar.append("text") | |
| .attr("x", barWidth / 2) | |
| .attr("y", function(d) { return y(d.frequency) + 3; })//so it is on top | |
| .attr("dy", ".75em")//TODO .em | |
| .text(function(d) { return d.frequency; }); | |
| }); | |
| function type(d) { | |
| d.frequency = +d.frequency;// coerce to number | |
| return d; | |
| } | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment