D3 Examples - Tiger 03 (inverted)

xxxxxxxxxx
 
<!DOCTYPE html>
​
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="tiger.js"></script>
</head>
​
<body>
  <div style="width:960px;">
    <div class="chart"></div>
  </div>
  <script>
​
    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://blockbuilder.org/FergusDevelopmentLLC/f40c5c426fbdaf20900b555088543310 -->
    