Tiger 01

D3.js Tiger 01 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)

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 yLinearScale = d3.scaleLinear()
            .range([chartHeight, 0])
            .domain([0, d3.max(sequence, d => +d.y)])

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

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

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

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

nodeEnter
            .append("circle")
            .attr("r", 5)
            .attr("cy", (d, i) => yLinearScale(d3.max(sequence, d => +d.x)))
            .attr("cx", (d, i) => xLinearScale(d3.max(sequence, d => +d.y)))
            .style("opacity", 0)

d3.selectAll('circle')
            .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 * 2 })
            .attr("cy", (d, i) => yLinearScale(d.y))
            .attr("cx", (d, i) => xLinearScale(d.x))
            .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