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

forked from apratt2003's block: Periodic Table Scatter Plot

<!DOCTYPE html>
<html>
  
  <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>

https://d3js.org/d3.v4.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js