Accepted answer

There are a few issues, namely, you don't define width or y for your rectangles. Also, the rectangle height should be equal to y(value) rather than height-y(value) (this is the top of the rectangle, and therefore the rectangle's y property, as svg coordinates start from the top at y=0). Your rectangle attributes should probably look more like:

    .style('fill', 'orange')
    .attr('x', (d)=>{
      return x(
    .attr('height', (d)=>{
      return y(d.rank)
    .attr("y",(d)=>height - y(d.rank))

Second, you have inconsistent quotations in your transforms (svg and x axis appends respectively below):

   .attr('transform', 'translate(" + margin.left + "." + + ")');

   .attr('tranform', 'translate(0 " + height + ")')

Which is why these aren't being appended right, also you need commas between the two values.

Updated pen.

Related Query

More Query from same tag