Tiger 04 (random corners)

D3.js Tiger 04 (random corners)

The data point flies in from a random corner.

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;
    }

let sequence = tiger
    sequence = shuffle(sequence)
    const delay = 8

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

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 bottomAxis = d3.axisBottom().scale(xLinearScale);

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

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

let positions = [ 
                      {
                        "x": xLinearScale(d3.max(sequence, d => +d.x)),
                        "y": yLinearScale(d3.min(sequence, d => +d.y))
                      },
                      {
                        "x": xLinearScale(d3.max(sequence, d => +d.x)),
                        "y": yLinearScale(d3.max(sequence, d => +d.y))
                      },
                      {
                        "x": xLinearScale(0),
                        "y": yLinearScale(d3.max(sequence, d => +d.y))
                      },
                      {
                        "x": xLinearScale(0),
                        "y": yLinearScale(d3.min(sequence, d => +d.y))
                      }
                    ]
    
    console.log('positions', positions)
    
    nodeEnter = chart
      .selectAll("rect")
      .data(sequence)
      .enter()

nodeEnter
      .append('rect')
      .attr("width", 10)
      .attr("height", 10)
      .attr("x", (d, i) => positions[getRandIntBetween1And(4)-1].x)
      .attr("y", (d, i) => positions[getRandIntBetween1And(4)-1].y)
      .style("opacity", 0)

d3.selectAll('rect')
      .each(function (d, i) {
        d3.select(this)
          .style('fill', d.c)
        //.attr("r", getRandIntBetween1And(8))
        //.style("opacity", getRandIntBetween1And(20) / 100)
      })
      .transition()
      .delay((d, i) => { return i * delay })
      .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