D3 Examples - simple bar

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
​
  <style>
    g.tick text { visibility: hidden }
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
​
<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500)
​
    var cumeScale = d3.scaleLinear().domain([0,1]).range([0,900]);
    var axisBottom = d3.axisBottom(cumeScale).tickValues([0,1]).tickFormat(d3.format(",.0f"));
 
    var value = 0.22494134761685
    svg.append("g")
    .attr("transform", "translate(30, 250)")
    .call(axisBottom)
    svg.append("rect")
    .attr("height", 90)
    .attr("width", cumeScale(value))
    .attr("x", 30)
    .attr("y", 160)
    .attr("fill", d3.interpolateGreens(value))
  </script>
</body>
​
    