const MARGINS = { left: 20, right: 20, top: 20, bottom: 20 };
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 400;
const MAX_NUMBER = 1000;
const ITEMS_NUMBER = 95;

// Generate an array of random values
let list = Array.from(Array(ITEMS_NUMBER), (item, index) =>
  Math.floor(Math.random() * MAX_NUMBER)
);

// Sort an array for algorithm
list.sort((a, b) => a - b);

const graphWidth = VIEW_WIDTH - MARGINS.left - MARGINS.right;
const graphHeight = VIEW_HEIGHT - MARGINS.top - MARGINS.bottom;
const gap = 0;
const barWidth = (graphWidth - gap * (list.length - 1)) / list.length;

const linearScale = d3
  .scaleLinear()
  .domain([0, MAX_NUMBER])
  .range([0, graphHeight]);

const opacityScale = d3
  .scaleLinear()
  .domain([0, MAX_NUMBER])
  .range([0.3, 1]);

const svg = d3
  .select(".viz")
  .append("svg")
  .attr("width", VIEW_WIDTH)
  .attr("height", VIEW_HEIGHT);

svg
  .selectAll("rect")
  .data(list)
  .enter()
  .append("rect")
  .attr("width", function(d, i) {
    return barWidth;
  })
  .attr("height", function(d, i) {
    return linearScale(d);
  })
  .attr("x", function(d, i) {
    return i * barWidth + i * gap + MARGINS.left;
  })
  .attr("y", function(d, i) {
    return graphHeight - linearScale(d);
  })
  .attr("fill", function(d, i) {
    return `rgba(64, 84, 178, ${opacityScale(d)})`;
  })
  .classed("bar", true);