D3JsV3.5 – Single horizontal Stacked Bar Chart with Percentage

My goal is to create a horizontal stacked bar chart (1 bar) out of my data. The data looks like:

data = [{"Progress":20, "Value": 3}, {"Progress":80, "Value": 5}]

Where the X-Axis would be the Progress (its in %) from 0 to 100 in 10% steps. In the bar itself I would like then to give out the Value.

This is my Code where im stuck at. I have big problems to stack my Data the way I need it. Any help is welcome.

function drawChartStackedBar(data){
  console.log(data);
  var margin = {
      top: 30,
      right: 20,
      bottom: 70,
      left: 50
    },
    width = 600 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;
  // Adds the svg canvas
  var svg = d3.select("#barChartHistogramm")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform",
      "translate(" + margin.left + "," + margin.top + ")");

  // Create x and y scale.
  var xScale = d3.scale.linear().range([0, width]);
  var yScale = d3.scale.ordinal().range([0, height]);

  // Create domains.
  xScale.domain([0, 100]);

  var xAxis = d3.svg.axis().scale(xScale)
    .orient("bottom").ticks(6);

    svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);
  // Create axes.
  var x_axis = svg.append('g')
    .attr('class', 'axis')
    .attr('padding', 1)
    .attr('transform', 'translate(' + 0 + ',' + height + ')')
    .call(d3.svg.axis(xScale)
      .ticks(1, 's'));

  // Choose which columns to have as keys with slice method.
  var keys = data.map(function(d) {
    return d.Progress;
  });


  var newData = [{}];
  data.forEach(function(d) {
    newData[0][d.Progress] = d.Value
  });

  var stack = d3.layout.stack();

  Create series of the data.
  var series = stack(newData);


  //Create color scale with colorbrewer or pass in array of colors.
  var colorScale = d3.scale.ordinal()
    .domain([0, 12])
    .range(d3.schemeCategory10);

  //Append rectangles.
  var bars = svg.selectAll(null)
    .data(data)
    .enter()
    .append('g')
    .attr('fill', function(d) {
      return colorScale(d.key);
    })
    .selectAll('rect')
    .data(function(d) {
      return d;
    })
    .enter()
    .append('rect')
    .attr('x', function(d, i) {
      return xScale(d[0]);
    })
    .attr('width', function(d, i) {
      return xScale(d[1]) - xScale(d[0]);
    })
    .attr("height", yScale.bandwidth());


    console.log('function ended');
}

Im using D3Js v3.5