/d3basics.html
forked from ashleybot/d3basics1.js
Created Sep 18, 2012
D3.js Basic Vertical Bar Chart
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="http://d3js.org/d3.v2.min.js"></script> | |
| </head> | |
| <body> | |
| <div role="main"> | |
| <div class="charts"></div> | |
| <script language="JavaScript"> | |
| var data = [8, 12, 15, 30, 43]; | |
| var w = 20, h = 50; | |
| var chart = d3.select(".charts").append("svg") | |
| .attr("class", "chart") | |
| .attr("width", w * data.length) | |
| .attr("height", h); | |
| var x = d3.scale.linear() | |
| .domain([0, 1]) | |
| .range([0, w]); | |
| var y = d3.scale.linear() | |
| .domain([0, 50]) | |
| .rangeRound([0, h]); //rangeRound is used for antialiasing | |
| // x and y are the lower-left position of the bar | |
| // width is the width of the bar | |
| // height is the height of the bar | |
| // for crisp edges use -.5 (antialiasing) | |
| chart.selectAll("rect") | |
| .data(data) | |
| .enter().append("rect") | |
| .attr("x", function(d, i) { return x(i) - .5; }) | |
| .attr("y", function(d) { return h - y(d) - .5; }) | |
| .attr("width", w) | |
| .attr("height", function(d) { return y(d); } ); | |
| // horizontal line for the x-axis | |
| chart.append("line") | |
| .attr("x1", 0) | |
| .attr("x2", w * data.length) | |
| .attr("y1", h - .5) | |
| .attr("y2", h - .5) | |
| .style("stroke", "#000"); | |
| </script> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment