D3 Examples - Bullet Charts with d3.chart

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: auto;
  padding-top: 40px;
  position: relative;
  width: 960px;
}
​
button {
  position: absolute;
  right: 10px;
  top: 10px;
}
​
.bullet { font: 10px sans-serif; }
.bullet .marker { stroke: #000; stroke-width: 2px; }
.bullet .tick line { stroke: #666; stroke-width: .5px; }
.bullet .range.s0 { fill: #eee; }
.bullet .range.s1 { fill: #ddd; }
.bullet .range.s2 { fill: #ccc; }
.bullet .measure.s0 { fill: lightsteelblue; }
.bullet .measure.s1 { fill: steelblue; }
.bullet .title { font-size: 14px; font-weight: bold; }
.bullet .subtitle { fill: #999; }
    </style>
    <script src="https://d3js.org/d3.v3.js"></script>
    <script src="https://misoproject.com/js/d3.chart.js"></script>
</head>
<body>
    <button>Update</button>
​
    <script src="bullet-chart.js"></script>
    <script src="bullets-chart.js"></script>
    <script src="bullet-app.js"></script>
</body>
</html>
​
    