D3 Examples - Periodic Table Scatter Plot

Periodic Table Scatter Plot
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>Periodic Table Scatter Plot</title>
    <style>
      body {
        margin: 0px;
      }
      .domain {
        display: none;
      }
      .tick line {
        stroke: #C0C0BB;
      }
      .tick text, .legendCells text {
        fill: #8E8883;
        font-size: 15pt;
        font-family: sans-serif;
      }
      .axis-label, .legend-label {
        fill: #635F5D;
        font-size: 30pt;
        font-family: sans-serif;
      }
      .atom:hover {
        opacity: 1;
      }
    </style>
  </head>
  <body>
    <svg width="960" height="500"></svg>
    <script>
      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 svg = d3.select('svg');
      const width = svg.attr('width');
      const height = svg.attr('height');
      const innerWidth = width - margin.left - margin.right;
      const innerHeight = height - margin.top - margin.bottom;
​
      const g = svg.append('g')
          .attr('transform', `translate(${margin.left},${margin.top})`);
      const xAxisG = g.append('g')
          .attr('transform', `translate(0, ${innerHeight})`);
      const yAxisG = g.append('g');
      const colorLegendG = g.append('g')
          .attr('transform', `translate(${innerWidth + 60}, 150)`);
​
      xAxisG.append('text')
          .attr('class', 'axis-label')
          .attr('x', innerWidth / 2)
          .attr('y', 100)
          .text(xLabel);
​
      yAxisG.append('text')
          .attr('class', 'axis-label')
          .attr('x', -innerHeight / 2)
          .attr('y', -60)
          .attr('transform', `rotate(-90)`)
          .style('text-anchor', 'middle')
          .text(yLabel);
​
      colorLegendG.append('text')
          .attr('class', 'legend-label')
          .attr('x', -30)
          .attr('y', -40)
          .text(colorLabel);
​
      const xScale = d3.scaleLinear();
      const yScale = d3.scaleLinear();
      const colorScale = d3.scaleOrdinal()
        .range(d3.schemeCategory10);
      const rScale = d3.scaleLinear();
​
      const xAxis = d3.axisBottom()
        .scale(xScale)
        .tickPadding(15)
        .tickSize(-innerHeight);
​
      const yAxis = d3.axisLeft()
        .scale(yScale)
        .ticks(5)
        .tickPadding(15)
        .tickSize(-innerWidth);
​
      const colorLegend = d3.legendColor()
        .scale(colorScale)
        .shape('circle');
​
      const row = d => {
        d.atomicNumber = +d.atomicNumber;
        d.atomicMass = +d.atomicMass;
        return d;
      };
​
      d3.csv('data.csv', row, data => {
        xScale
          .domain(d3.extent(data, xValue))
          .range([0, innerWidth])
          .nice();
​
        yScale
          .domain(d3.extent(data, yValue))
          .range([innerHeight, 0])
          .nice();
        
        rScale
            .domain(d3.extent(data, rValue))
            .range([2   , 5]);
                
        g.selectAll('circle').data(data)
          .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);
        
​
        xAxisG.call(xAxis);
        yAxisG.call(yAxis);
        //colorLegendG.call(colorLegend)
         // .selectAll('.cell text')
         //   .attr('dy', '0.1em');
      });
      
    </script>
  </body>
</html>
    