Advertisement
bjpcjp

d3.js bullet chart

Feb 10th, 2024
121
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.08 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <meta charset="utf-8">
  3. <style>
  4. body {
  5. font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  6. margin: auto;
  7. padding-top: 40px;
  8. position: relative;
  9. width: 800px;
  10. }
  11. button {
  12. position: absolute;
  13. right: 40px;
  14. top: 10px;
  15. }
  16. .bullet { font: 10px sans-serif; }
  17. .bullet .marker { stroke: #000; stroke-width: 2px; }
  18. .bullet .tick line { stroke: #666; stroke-width: .5px; }
  19. .bullet .range.s0 { fill: #eee; }
  20. .bullet .range.s1 { fill: #ddd; }
  21. .bullet .range.s2 { fill: #ccc; }
  22. .bullet .measure.s0 { fill: steelblue; }
  23. .bullet .title { font-size: 14px; font-weight: bold; }
  24. .bullet .subtitle { fill: #999; }
  25. </style>
  26. <button>Update</button>
  27. <script type="text/javascript" src="d3/d3.v3.js"></script>
  28. <script src="js/bullet.js"></script>
  29. <script>
  30. var margin = {top: 5, right: 40, bottom: 20, left: 120},
  31. width = 800 - margin.left - margin.right,
  32. height = 50 - margin.top - margin.bottom;
  33. var chart = d3.bullet()
  34. .width(width)
  35. .height(height);
  36. d3.json("data/cpu1.json", function(error, data) {
  37. var svg = d3.select("body").selectAll("svg")
  38. .data(data)
  39. .enter().append("svg")
  40. .attr("class", "bullet")
  41. .attr("width", width + margin.left + margin.right)
  42. .attr("height", height + margin.top + margin.bottom)
  43. .append("g")
  44. .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
  45. .call(chart);
  46. var title = svg.append("g")
  47. .style("text-anchor", "end")
  48. .attr("transform", "translate(-6," + height / 2 + ")");
  49. title.append("text")
  50. .attr("class", "title")
  51. .text(function(d) { return d.title; });
  52. title.append("text")
  53. .attr("class", "subtitle")
  54. .attr("dy", "1em")
  55. .text(function(d) { return d.subtitle; });
  56. d3.selectAll("button").on("click", function() {
  57. svg.datum(randomize).call(chart.duration(1000));
  58. });
  59. });
  60. function randomize(d) {
  61. if (!d.randomizer) d.randomizer = randomizer(d);
  62. d.markers = d.markers.map(d.randomizer);
  63. d.measures = d.measures.map(d.randomizer);
  64. return d;
  65. }
  66. function randomizer(d) {
  67. var k = d3.max(d.ranges) * .2;
  68. return function(d) {
  69. return Math.max(0, d + k * (Math.random() - .5));
  70. };
  71. }
  72. </script>
  73. </body>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement