D3 Examples - Scatter Plot - Respond to Resize

Scatter Plot - Respond to Resize

An example of responding to resize scatter plot.

When the window resizes, the size of the scatter plot changes as well as the size of the individual data points.

This shows Wisconsin breast cancer dataset. Originally published at UCI Machine Learning Repository: Breast Cancer Wisconsin (Diagnostic) Data Set, this dataset was also published on Kaggle This data set contains information about benign or malignant and ten features computed for each cell nucleus, such as radius, texture, and perimeter.

The data visualization shows these two different clusters(B and M).

xxxxxxxxxx
 
<!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>Basic Scatter Plot</title>
    <style>
      #view {
        position: fixed;
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 0px;
      }
      body {
        margin: 0px;
      }
      .domain {
        display: none;
      }
      .tick line {
        stroke: #C0C0BB;
      }
      .tick text, .legendCells text {
        fill: #8E8883;
        font-size: 18pt;
        font-family: sans-serif;
      }
      .axis-label, .legend-label {
        fill: #635F5D;
        font-size: 22pt;
        font-family: sans-serif;
      }
    </style>
  </head>
  <body>
    <div id = "view"></div>
    <script>
      
      const viewDiv = document.getElementById("view");
      const svg = d3.select(viewDiv).append("svg");
      
      // constants
      const xValue = d => d.radius_mean;
      const xLabel = 'Radius Mean';
      const yValue = d => d.texture_mean;
      const yLabel = 'Texture Mean';
      const diaName = { "M": "Malignant", "B": "Benign"}
      const colorValue = d => diaName[d.diagnosis];
      const colorLabel = 'Diagnosis';
      const margin = { left: 120, right: 300, top: 20, bottom: 120 };
      
      const row = d => {
        d.radius_mean = +d.radius_mean;
        d.texture_mean = +d.texture_mean;
        return d;
      };
      
      const g = svg.append('g');
      const dataG = g.append('g');
      
      // resizeable
      
      const xAxisG = g.append('g');
      const xText = xAxisG.append('text')
            .attr('class', 'axis-label');
      
      const yAxisG = g.append('g');
      const yText = yAxisG.append('text')
                .attr('class', 'axis-label');
      
      const colorLegendG = g.append('g');
      
      colorLegendG.append('text')
            .attr('class', 'legend-label')
            .attr('x', -30)
            .attr('y', -40)
            .text(colorLabel);
     
      const colorScale = d3.scaleOrdinal()
            .range(d3.schemeCategory10);
      const colorLegend = d3.legendColor()
            .scale(colorScale)
            .shape('circle');
      
      function redraw() {
        const width = viewDiv.clientWidth;
        const height = viewDiv.clientHeight;
        
        const innerWidth = width - margin.left - margin.right;
        const innerHeight = height - margin.top - margin.bottom;
        
        svg.attr("width", width)
           .attr("height", height);
        
        g.attr('transform', `translate(${margin.left},${margin.top})`);
        
        xAxisG.attr('transform', `translate(0, ${innerHeight})`);
​
        xText.attr('x', innerWidth / 2)
            .attr('y', 100)
            .text(xLabel);
​
        yText.attr('x', -innerHeight / 2)
                .attr('y', -60)
                .attr('transform', `rotate(-90)`)
            .style('text-anchor', 'middle')
            .text(yLabel);
        
        colorLegendG.attr('transform', `translate(${innerWidth + 60}, 100)`);
​
        const xScale = d3.scaleLinear();
        const yScale = d3.scaleLinear();
​
        const xAxis = d3.axisBottom()
          .scale(xScale)
          .tickPadding(15)
          .tickSize(-innerHeight);
                
        const yAxis = d3.axisLeft()
            .scale(yScale)
            .ticks(5)
            .tickPadding(15)
            .tickSize(-innerWidth);
​
      
        d3.csv('breast_cancer.csv', row, data => {
          xScale
            .domain(d3.extent(data, xValue))
            .range([0, innerWidth])
            .nice(); // neat function name!
​
          yScale
            .domain(d3.extent(data, yValue))
            .range([innerHeight, 0])
            .nice();
​
          const circles = dataG.selectAll('circle').data(data);
    
          circles.exit().remove();
          
          circles
            .enter().append('circle')
            .attr('fill-opacity', 0.6)  
          .merge(circles)
                .attr('cx', d => xScale(xValue(d)))
            .attr('cy', d => yScale(yValue(d)))
            .attr('fill', d => colorScale(colorValue(d)))
            .attr('r', (innerHeight + innerWidth)/210); // scale the radius of the data points
          
​
          xAxisG.call(xAxis);
          yAxisG.call(yAxis);
          colorLegendG.call(colorLegend)
            .selectAll('.cell text')
            .attr('dy', '0.1em'); 
        });
        
      }
      
      // Draw for the first time to initialize.
      redraw();
​
      // Redraw based on the new size whenever the browser window is resized.
      window.addEventListener("resize", redraw);
​
    
    </script>
  </body>
</html>
​
    