var data = [
  { name: "Alice", score: 37 },
  { name: "Billy", score: 69 },
  { name: "Confy", score: 86 },
  { name: "David", score: 44 },
  { name: "Emily", score: 59 }
];

var margin = { top: 10, right: 10, bottom: 30, left: 30 };
var width = 400 - margin.left - margin.right;
var height = 565 - margin.top - margin.bottom;

var svg = d3.select(".chart")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .call(responsivefy)
  .append("g")
    .attr("transform", `translate(${margin.left},${margin.top})`);

var xScale = d3.scaleBand()
  .domain(data.map(d => d.name))
  .range([0, width])
  .padding(0.2);

svg
  .append("g")
    .attr("transform", `translate(0, ${height})`)
  .call(d3.axisBottom(xScale));

var yScale = d3.scaleLinear()
  .domain([0, 100])
  .range([height, 0]);

svg
  .append("g")
    .call(d3.axisLeft(yScale));

svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("x", d => xScale(d.name))
  .attr("y", d => yScale(d.score))
  .attr("width", d => xScale.bandwidth())
  .attr("height", d => height - yScale(d.score));