D3 Examples - Tiger 04 (random corners)

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