D3 Examples - Resizing example

Resizing example
Make the visualization into a function that can be resposive to a web page.
This data is from GitHub - andrejewski, periodic-table/data.csv. This dataset is a list of elements in the periodic table and their characteristics.
The color scheme uses the CPK Coloring for atoms and the circle size is relative to the atom size.
forked from curran's block: Stylized Scatter Plot with Color Legend
xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <!--<body style="background-color:#111111">-->
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js"></script>
    <title>Resizing Scatter Plot</title>
    <style>
      body {
        margin: 0px;
      }
      .domain {
        display: none;
      }
      .tick line {
        stroke: #C0C0BB;
      }
      .tick text, .legendCells text {
        fill: #8E8883;
        font-size: 10pt;
        font-family: sans-serif;
      }
      .axis-label, .legend-label {
        fill: #635F5D;
        font-size: 20pt;
        font-family: sans-serif;
      }
      .atom:hover {
        opacity: 1;
      }
      #chart {
        position: fixed;
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 0px;
      }
                
    </style>
  </head>
  <body>
    
    <div id="chart"></div>
   
    <script>
      
      var chartDiv = document.getElementById("chart");
        var svg = d3.select(chartDiv).append("svg");
      const g = svg.append('g');
      const xScale = d3.scaleLinear();
      const yScale = d3.scaleLinear();
      const colorScale = d3.scaleOrdinal()
        .range(d3.schemeCategory10);
      const rScale = d3.scaleLinear();
      
      yScale
          .range([innerHeight, 0])
          .nice();
      
      xScale
          .range([0, innerWidth])
          .nice();
      
    function redraw(){
      
      var width = +chartDiv.clientWidth;
        var height = +chartDiv.clientHeight;
      
      // General Update Pattern
      svg
            .attr("width", width)
            .attr("height", height)
            
        
      const xValue = d => d.atomicNumber,
                xLabel = 'Atomic Number',
                yValue = d => d.atomicMass,
                yLabel = 'Atomic Mass',
                colorValue = d => d.cpkHexColor,
                colorLabel = 'CPK Coloring',
                rValue = d => d.atomicRadius,
                symbol = d => d.symbol,
                name = d => d.name,
                margin = { left: 120, right: 300, top: 20, bottom: 120 };
​
      const innerWidth = width - margin.left - margin.right;
      const innerHeight = height - margin.top - margin.bottom;
​
      g.attr('transform', `translate(${margin.left},${margin.top})`);
      
      const xAxisG = g.selectAll("#x-axis-g").data([null]);
      const yAxisG = g.selectAll("#y-axis-g").data([null]);
      const colorLegendG = g.selectAll("#legend").data([null]);
          
​
      xAxisG.enter().append("text").data([null])
            .attr('id', 'x-axis-g')
            .attr('class', 'axis-label')
            .text(xLabel)
            .style('text-anchor', 'middle')
      .merge(xAxisG)
          .attr('x', innerWidth / 2)
            .attr('y', 100)
            .attr('transform', 'translate(0,' + innerHeight + ')');
         
      yAxisG.enter().append("text").data([null])
          .attr('id', 'y-axis-g')
            .attr('class', 'axis-label')
          .attr('y', -60)
          .attr('transform', `rotate(-90)`)
          .style('text-anchor', 'middle')
          .text(yLabel)
      .merge(yAxisG)
            .attr('x', -innerHeight /2);
      
      
      colorLegendG.enter().append('text').data([null])
        .attr('id', 'legend')
        .attr('class', 'legend-label')
        .text(colorLabel)
       .merge(colorLegendG)
         .attr('x', -30)
         .attr('y', -40)
                .attr('transform', `translate(${innerWidth + 60}, 150)`);
      
      const xAxis = d3.axisBottom()
        .scale(xScale)
        .ticks(5)
        .tickPadding(15)
        .tickSize(-innerHeight);
           
      const yAxis = d3.axisLeft()
        .scale(yScale)
        .ticks(5)
        .tickPadding(15)
        .tickSize(-innerWidth);
​
      g.call(yAxis);
      //g.call(xAxis);
      
      const colorLegend = d3.legendColor()
        .scale(colorScale)
        .shape('circle');
​
      const row = d => {
        d.atomicNumber = +d.atomicNumber;
        d.atomicMass = +d.atomicMass;
        return d;
      
      //xAxisG.call(xAxis);
      //yAxisG.call(yAxis);
            
      };
      
      d3.csv('data.csv', row, data => {
        xScale
          .domain(d3.extent(data, xValue))
          .range([0, innerWidth])
          
        yScale
          .domain(d3.extent(data, yValue))
          .range([innerHeight, 0])
                  
        rScale
            .domain(d3.extent(data, rValue))
            .range([2   , 5]);
                
        var circles = g.selectAll('circle').data(data);
        circles.exit()
            .remove();
        circles.enter().append('circle')
            .attr('class', 'atom')
            .attr('cx', d => xScale(xValue(d)))
            .attr('cy', d => yScale(yValue(d)))
            .attr('fill', d => colorScale(colorValue(d)))
            .attr('fill-opacity', 0.6)
            .attr('r', d => rScale(rValue(d)))
                //.text(name)
            .merge(circles)
                .attr('cx', d => xScale(xValue(d)))
            .attr('cy', d => yScale(yValue(d)));
        
 
      });
      }
      redraw();
      window.addEventListener("resize", redraw);
    </script>
  </body>
</html>
    