/* global d3, data, responsivefy */

// D3 convention: define margin as an object called margin with these props:
let margin = {
  top: 10,
  right: 20,
  bottom: 60,
  left: 30
};
let width = 400 - margin.left - margin.right;
let height = 600 - margin.top - margin.bottom;

let 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})`);

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

let yAxis = d3.axisLeft(yScale);
svg.call(yAxis);

// Bar charts NEED a band scale, nothing else (?)
let xScale = d3.scaleBand()
  .padding(0.2) // 0..1, default 0
  // Inned padding is the one between values.
  //.paddingInner(0.2)
  // Outer padding is the one on the sides of the graph.
  // .paddingOuter(0.5)
  // How to distribute the set of items along the axis.
  .align(0.5) // 0 full left, to 1 full right.
  .domain(data.map(d => d.subject))
  .range([0, width]);

let xAxis = d3.axisBottom(xScale)
  .ticks(5)
  .tickSize(10)
  .tickPadding(5);

svg.append("g")
  .attr("transform", `translate(0, ${height})`)
  .call(xAxis)
  .selectAll("text")
  .style("text-anchor", "end") // start, middle, end
  .attr("transform", "rotate(-45)");

svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("x", d => xScale(d.subject))
  .attr("y", d => yScale(d.score))
  // Automatically calculated value, unique to band scales.
  .attr("width", xScale.bandwidth())
  .attr("height", d => height - yScale(d.score));