Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <title>D3 Page Template</title>
- <script type="text/javascript" src="d3/d3.js"></script>
- <style type="text/css">
- </style>
- </head>
- <body>
- <script type="text/javascript">
- //Width and height
- var w = 500;
- var h = 100;
- var barPadding = 1;
- var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
- 11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
- //Create SVG element
- var svg = d3.select("body")
- .append("svg")
- .attr("width", w)
- .attr("height", h);
- svg.selectAll("rect")
- .data(dataset)
- .enter()
- .append("rect")
- .attr("x", function(d, i) {
- return i * (w / dataset.length);
- })
- .attr("y", function(d) {
- return h - (d * 4);
- })
- .attr("width", w / dataset.length - barPadding)
- .attr("height", function(d) {
- return d * 4;
- })
- .attr("fill", function(d) {
- return "rgb(0, 0, " + (d * 10) + ")";
- });
- svg.selectAll("text")
- .data(dataset)
- .enter()
- .append("text")
- .text(function(d) {
- return d;
- })
- .attr("x", function (d, i) {
- return i * (w / dataset.length) + 5;
- })
- .attr("y", function(d) {
- return h - (d * 4) + 15;
- })
- .attr({
- font-family: sans-serif,
- font-size: 11px,
- fill: white
- });
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement