D3 Bar Chart, bars not showing, axis on top - d3.js

Question

I have a codepen here - https://codepen.io/ttmtsimon/pen/EbPgrw
I am trying to create a simple bar chart in D3.
The axis are showing but the x axis is on the top and it should be on the bottom and the bars are not showing at all.
I know this is a bad question but I can't see where the code is wrong, any help would be appreciated.
let margin = {top: 20, right: 20, bottom:100, left:60}
let width = 800 - margin.left - margin.right
let height = 500 - margin.top - margin.bottom
let x = d3.scaleBand()
.rangeRound([0, width])
.padding(0.5);
let y = d3.scaleLinear().range([height, 0])
let xAxis = d3.axisBottom(x)
.tickFormat((d) => {
return d.x;
});
let yAxis = d3.axisLeft(y)
let svg = d3.select('.barGraph')
.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 + ")');
d3.json('https://api.myjson.com/bins/vkbjf', (data)=>{
x.domain(data.map((d)=>{
return d.name
}))
y.domain([0, d3.max(data, (d)=>{
return d.rank
})]);
svg.append('g')
.attr('class', 'x axis')
.attr('tranform', 'translate(0 " + height + ")')
.call(xAxis)
.selectAll('text')
.style('text-anchor', 'end')
.attr('dx', '-0.5em')
.attr('dy', '-55em')
.attr('y', 30)
.attr('transform', 'rotate(-45)');
svg.append('g')
.attr('class', 'y axis')
.call(yAxis)
.append('text')
.attr('transform', 'rotate(-90)')
.attr('y', 5)
.attr('dy', '0.8em')
.attr('text-anchor', 'end')
.text('Member Rank')
svg.selectAll('bar')
.data(data)
.enter()
.append('rect')
.style('fill', 'orange')
.attr('x', (d)=>{
return y(d.rank)
})
.attr('height', (d)=>{
return height - y(d.rank)
})
})

Answer 1

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:
svg.selectAll('bar')
.data(data)
.enter()
.append('rect')
.style('fill', 'orange')
.attr('x', (d)=>{
return x(d.name)
})
.attr('height', (d)=>{
return y(d.rank)
})
.attr("width",x.bandwidth())
.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 + "." + margin.top + ")');
.attr('tranform', 'translate(0 " + height + ")')
Which is why these aren't being appended right, also you need commas between the two values.
Updated pen.