Advertisement
Guest User

Untitled

a guest
Apr 29th, 2017
78
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.67 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>D3 Page Template</title>
  6. <script type="text/javascript" src="d3/d3.js"></script>
  7. <style type="text/css">
  8.  
  9. </style>
  10. </head>
  11. <body>
  12. <script type="text/javascript">
  13.  
  14. //Width and height
  15. var w = 500;
  16. var h = 100;
  17. var barPadding = 1;
  18.  
  19. var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
  20. 11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
  21.  
  22. //Create SVG element
  23. var svg = d3.select("body")
  24. .append("svg")
  25. .attr("width", w)
  26. .attr("height", h);
  27.  
  28. svg.selectAll("rect")
  29. .data(dataset)
  30. .enter()
  31. .append("rect")
  32. .attr("x", function(d, i) {
  33. return i * (w / dataset.length);
  34. })
  35. .attr("y", function(d) {
  36. return h - (d * 4);
  37. })
  38.  
  39. .attr("width", w / dataset.length - barPadding)
  40. .attr("height", function(d) {
  41. return d * 4;
  42. })
  43. .attr("fill", function(d) {
  44. return "rgb(0, 0, " + (d * 10) + ")";
  45. });
  46.  
  47. svg.selectAll("text")
  48. .data(dataset)
  49. .enter()
  50. .append("text")
  51. .text(function(d) {
  52. return d;
  53. })
  54. .attr("x", function (d, i) {
  55. return i * (w / dataset.length) + 5;
  56. })
  57. .attr("y", function(d) {
  58. return h - (d * 4) + 15;
  59. })
  60. .attr({
  61. font-family: sans-serif,
  62. font-size: 11px,
  63. fill: white
  64. });
  65.  
  66.  
  67.  
  68.  
  69. </script>
  70. </body>
  71. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement