D3 Examples - hexagon achievements

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v5.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
​
<body>
  <script>
    const topMargin = 35,
    hexR = 40,
    nLevels = 2,  // map size  - draw 7 hexagon  
    planeColor = "white",  // sea blue #c7efff70    
    total = 1;   
    
    
    function getTerrain(label,color){
      return {
        label,
        color, 
      }
    }
    
    /*
      #ffbd00 - gold
      #0e1a36 - royal
      #008281 - teal
      #fafafa
      #c1c1c1 - line
      #f2f2f2;
      */
    
    
    const terrain = [getTerrain('teal','#008281'), getTerrain('gold','#ffbd00'), getTerrain('royal','#0e1a36'), getTerrain('teal','#008281'), getTerrain('teal','#008281'), getTerrain('gold','#ffbd00'), getTerrain('teal','#008281'), getTerrain('teal','#008281'), getTerrain('gold','#ffbd00'), 
getTerrain('teal','#008281'),
getTerrain('gold','#ffbd00'), getTerrain('royal','#0e1a36')];
    
    //const noteScale = d3.scaleOrdinal(d3.schemeCategory20c)
    //.domain(terrain)
    
    function getSelectedIntervals() {
        return {
            hor: 4,
            diag: 3
​
        }
    }
    
    var svg = d3.select("body").append("svg")
        .attr('id','svg')
      .attr("width", window.innerWidth)
      .attr("height", window.innerHeight)
​
    const world = svg.append('g')
                                    .attr('id', 'world');
    
     world.append('g')
                .attr('id','sea')
                .attr("width", window.innerWidth)
            .attr("height", window.innerHeight)
                .append('rect')
                .attr("width", window.innerWidth)
            .attr("height", window.innerHeight)
                .style('fill',planeColor)
      
      world.append('g')
        .append("text")
        .text("mine")
        .attr("y", 10)
        .attr("x", 10)
        .attr("font-size", 20)
        .attr("font-family", "monospace")
        
      
    function getPolygonPath(r, nSides, startAngle) {
        let d = ''
​
        d3.range(nSides).map(side => {
            const angle = startAngle + 2 * Math.PI * side / nSides
            return [r * Math.cos(angle), r * Math.sin(angle)]
        }).forEach(pt => {
            d += (d.length ? 'L' : 'M') + pt.join(',')
        })
​
        return d + 'Z'
    } 
    
    const transitionTime = 900,
        hexPath = getPolygonPath(hexR, 6, Math.PI / 2)
    
        function genHexList(r, centerXy, centralFreq, levels) {
        levels += (levels % 2) ? 0 : 1 // Round up to nearest odd number
​
        const {hor, diag} = getSelectedIntervals(),
            diagonalUp = diag,
            diagonalDown = hor - diag,
            leftFreq = total * getIntervalRatio(-hor * (levels - 1) / 2),
            leftXy = centerXy
​
        let noteCnt = {} // Keep track of which notes are added to assign a unique ID to each
​
        leftXy[0] -= (levels - 1) * r // Left side of the row
​
        // Central row
        let hexs = buildRow(r, leftXy, leftFreq, levels)
​
        d3.range(1, (levels - 1) / 2 + 1).forEach(i => {
            const offset = [i * r * 2 * Math.cos(Math.PI / 3), i * r * 2 * Math.sin(Math.PI / 3)]
​
            hexs.push(
                // Up-right
                ...buildRow(r, [leftXy[0] + offset[0], leftXy[1] - offset[1]], leftFreq * getIntervalRatio(i * diagonalUp), levels - i),
                // Down-right
                ...buildRow(r, [leftXy[0] + offset[0], leftXy[1] + offset[1]], leftFreq * getIntervalRatio(i * diagonalDown), levels - i)
            )
        })
​
        return hexs
​
        //
​
        function buildRow(r, xy, freq, levels) {
            const hexs = [],
                horizInterval = getIntervalRatio(hor)
​
            let carryX = xy[0],
                    carryFreq = freq
​
            while (levels) {
                const noteNum = 50; // 
​
                if (noteNum>=12 && noteNum <= 126) { 
                  
                    const index = Math.floor(Math.random() * 10);
                    //const terrain = terrain[index]; 
                                        const name = terrain[index].label
                    // Assign unique id (noteName + counter)
                    if (!noteCnt.hasOwnProperty(name)) noteCnt[name] = 0
                    noteCnt[name]++
                    const id = `${name}-${noteCnt[name]}`
​
                    hexs.push({
                        x: carryX,
                        y: xy[1],
                        freq: carryFreq,
                        name,
                        color: terrain[index].color,
                        id: id
                    })
                }
​
                carryX += r * 2
                carryFreq *= horizInterval
                levels--
            }
​
            return hexs
        }
​
        function getIntervalRatio(num) {
            // Equal temperament
            return Math.pow(2, num / 12)
        }
    }
    
    function drawMap(){
      let hexs = d3.select('#world')
        .selectAll('.hex')
        .data(genHexList(hexR, [window.innerWidth / 2, (window.innerHeight - topMargin) / 2], total, nLevels), d => d.id)
​
    // Old hexs
    hexs.exit().transition().duration(transitionTime)
        // Shrink and fade-out
        .attr('transform', d => `translate(${d.x},${d.y}) scale(0)`)
        .style('opacity', 0)
        .remove()
​
    // New hexs
    const newHexs = hexs.enter().append('g')
        .attr('class', 'hex')
        .attr('transform', d => `translate(${d.x},${d.y}) scale(0)`);
      
      newHexs
            .transition()
                .duration(5000)
                 .attr('transform', d => `translate(${d.x},${d.y}) scale(1,1)`);
​
    const getFill = d => {
      return d.color; 
    }
    
    newHexs.append('path')
        .attr('d', hexPath)
            .style('stroke-width', '4px')
            .style('stroke', getFill)
            .style('fill', "white")
​
    newHexs.append('text')
        .attr('text-anchor', 'middle')
        .attr('dy', '.35em')
        .text(d => d.name)
    
    console.log('drawn!')
​
    }
    
    drawMap()
​
  </script>
</body>
​
    