Cacher is the code snippet organizer for pro developers

.chart {
  padding-top: 25px;
}

.chart rect {
  fill: steelblue;
}

.chart rect:hover {
  fill: red;
}

.chart text {
  fill: white;
  font: 10px sans-serif;
  text-anchor: end;
}

var data = [{
  name: "Locke",
  value: 4
}, {
  name: "Reyes",
  value: 8
}, {
  name: "Ford",
  value: 15
}, {
  name: "Jarrah",
  value: 16
}, {
  name: "Shephard",
  value: 23
}, {
  name: "Kwon",
  value: 42
}];

var width = window.innerWidth - 15,
  barHeight = 20;

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

var chart = d3.select(".chart")
  .attr("width", width);


  x.domain([0, d3.max(data, function(d) {
    return d.value;
  })]);

  chart.attr("height", barHeight * data.length + 25);

  var bar = chart.selectAll("g")
    .data(data)
    .enter().append("g")
    .attr("transform", function(d, i) {
      return "translate(0," + i * barHeight + ")";
    });

  bar.append("rect")
    .attr("width", function(d) {
      return x(d.value);
    })
    .attr("height", barHeight - 1);

  bar.append("text")
    .attr("x", function(d) {
      return x(d.value) - 3;
    })
    .attr("y", barHeight / 2)
    .attr("dy", ".35em")
    .text(function(d) {
      return d.name;
    });

chart.append("line")
  .attr("x1", x(10))  //<<== change your code here
  .attr("y1", 0)
  .attr("x2", x(10))  //<<== and here
  .attr("y2", chart.attr('height'))
  .style("stroke-width", 2)
  .style("stroke", "red")
  .style("fill", "none");

chart.append("line")
  .attr("x1", x(25))  //<<== change your code here
  .attr("y1", 0)
  .attr("x2", x(25))  //<<== and here
  .attr("y2", chart.attr('height'))
  .style("stroke-width", 2)
  .style("stroke", "red")
  .style("fill", "none");

<svg class="chart"></svg>
<script src="http://d3js.org/d3.v3.min.js"></script>