Tiger 03 (inverted)

D3.js Tiger 03 (inverted) Image processing (get color of each pixel in bitmap source image): https://pillow.readthedocs.io/en/stable/#

<!DOCTYPE html>

const getRandIntBetween1And = (max) => {
      return (Math.floor(Math.random() * max) + 1)
    }

const shuffle = (array) => {
      var currentIndex = array.length, temporaryValue, randomIndex;
      while (0 !== currentIndex) {
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex -= 1;
        temporaryValue = array[currentIndex];
        array[currentIndex] = array[randomIndex];
        array[randomIndex] = temporaryValue;
      }
      return array;
    }

//https://stackoverflow.com/questions/35969656/how-can-i-generate-the-opposite-color-according-to-current-color
    function invertColor(hex, bw) {
      if (hex.indexOf('#') === 0) {
        hex = hex.slice(1);
      }
      // convert 3-digit hex to 6-digits.
      if (hex.length === 3) {
        hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
      }
      if (hex.length !== 6) {
        throw new Error('Invalid HEX color.');
      }
      var r = parseInt(hex.slice(0, 2), 16),
        g = parseInt(hex.slice(2, 4), 16),
        b = parseInt(hex.slice(4, 6), 16);
      if (bw) {
        // https://stackoverflow.com/a/3943023/112731
        return (r * 0.299 + g * 0.587 + b * 0.114) > 186
          ? '#000000'
          : '#FFFFFF';
      }
      // invert color components
      r = (255 - r).toString(16);
      g = (255 - g).toString(16);
      b = (255 - b).toString(16);
      // pad each with zeros and return
      return "#" + padZero(r) + padZero(g) + padZero(b);
    }

function padZero(str, len) {
      len = len || 2;
      var zeros = new Array(len).join('0');
      return (zeros + str).slice(-len);
    }

let sequence = tiger
    sequence = shuffle(sequence)

let svgWidth = 500;
    let svgHeight = 500;
    const margin = { top: 50, right: 50, bottom: 50, left: 50 };

let chartWidth = svgWidth - margin.right - margin.left;
    let chartHeight = svgHeight - margin.top - margin.bottom;

let svg = d3.select(".chart")
      .append("svg")
      .attr("width", svgWidth)
      .attr("height", svgHeight)
      .append("g")
      .attr("transform", `translate(${margin.left},${margin.top})`)

let chart = svg.append("g");

let xLinearScale = d3.scaleLinear()
      .range([0, chartWidth])
      .domain([0, d3.max(sequence, d => +d.x)]);

let yLinearScale = d3.scaleLinear()
      .range([chartHeight, 0])
      .domain([0, d3.max(sequence, d => +d.y)])

let bottomAxis = d3.axisBottom()
      .scale(xLinearScale);

let leftAxis = d3.axisLeft()
      .scale(yLinearScale);

nodeEnter = chart
      .selectAll("rect")
      .data(sequence)
      .enter()

nodeEnter
      .append('rect')
      .attr("width", 10)
      .attr("height", 10)
      .attr("x", (d, i) => xLinearScale(d3.max(sequence, d => +d.x)))
      .attr("y", (d, i) => yLinearScale(d3.max(sequence, d => +d.y)))
      .style("opacity", 0)

d3.selectAll('rect')
      .each(function (d, i) {
        d3.select(this)
          .style('fill', invertColor(d.c, false) )
        //.attr("r", getRandIntBetween1And(8))
        //.style("opacity", getRandIntBetween1And(20) / 100)
      })
      .transition()
      .delay((d, i) => { return i * .75 })
      .attr("x", (d, i) => xLinearScale(d.x))
      .attr("y", (d, i) => yLinearScale(d.y))
      .style("opacity", 1)

// chart.append("g")
        //     .attr('transform', `translate(0,${chartHeight})`)
        //     .call(bottomAxis)

// chart.append("g")
        //     .call(leftAxis)

</script>
</body>

https://d3js.org/d3.v4.min.js