score:1

Accepted answer

Updated per request:

var data = [{
    Issue: "Other",
    Number: 808,
    Stage: "A"
  },
  {
    Issue: "Other1",
    Number: 80,
    Stage: "A"
  },
  {
    Issue: "Other2",
    Number: 8,
    Stage: "A"
  },
  {
    Issue: "Other3",
    Number: 67,
    Stage: "A"
  },
  {
    Issue: "Other4",
    Number: 45,
    Stage: "A"
  },
  {
    Issue: "Other5",
    Number: 9,
    Stage: "A"
  },
  {
    Issue: "Other6",
    Number: 60,
    Stage: "A"
  },
  {
    Issue: "Other7",
    Number: 8,
    Stage: "A"
  }
];


var margin = {
    top: 15,
    right: 30,
    bottom: 40,
    left: 400
  },
  width = 1200 - margin.left - margin.right,
  height = 300 - margin.top - margin.bottom;

var y = d3.scaleBand()
  .range([height, 0])
  .padding(0.1);

var x = d3.scaleLinear()
  .range([0, width]);

var svg = d3.select("#barchart").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform",
    "translate(" + margin.left + "," + margin.top + ")");

data.forEach(function(d) {
  d.Number = +d.Number;
});

x.domain([0, d3.max(data, function(d) {
  return d.Number;
})])
y.domain(data.map(function(d) {
  return d.Issue;
}));

svg.selectAll(".bar")
  .data(data)
  .enter()
  .append('g')
  .attr('class', 'group')
  .append("rect")
  .attr("width", function(d) {
    return x(d.Number);
  })
  .attr("y", function(d) {
    return y(d.Issue);
  })
  .style("fill", function(d) {
    if (d.Stage == 'I')
      return '#3dc778'
    if (d.Stage == 'B')
      return '#e52929'
    if (d.Stage == 'U')
      return '#3021fd'
    if (d.Stage == 'A')
      return '#eefd21'
  })
  .on("mouseover", d => mouseover(d))
  .on("mousemove", mousemove)
  .on("mouseout", mouseout)
  .attr("height", y.bandwidth());

svg.selectAll(".group")
  .append('text')
  .attr('class', 'count')
  .text(d => d.Number)
  .attr("x", function(d) {
    return x(d.Number) + 5;
  })
  .attr("y", function(d) {
    return y(d.Issue) + y.bandwidth() / 2 + 5;
  })

// add the x Axis
svg.append("g")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x));

// add the y Axis
svg.append("g")
  .call(d3.axisLeft(y));

var div = d3.select("body").append("div")
  .attr("class", "tooltip")
  .style("display", "none");

function mouseover(d) {
  div.style("display", "inline");
  div.text(d.Stage)
}

function mousemove() {
  div
    .style("left", (d3.event.pageX - 34) + "px")
    .style("top", (d3.event.pageY - 12) + "px");
}

function mouseout() {
  div.style("display", "none");
}
.tooltip {
  position: absolute;
  text-align: center;
  width: 60px;
  height: 12px;
  padding: 8px;
  margin-top: -20px;
  font: 10px sans-serif;
  background: #ddd;
  pointer-events: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.8.0/d3.js"></script>

<body>
  <div id='barchart'></div>
</body>

The tooltip was shamelessly stolen from here: https://bl.ocks.org/mbostock/1087001


Related Query

More Query from same tag