D3 Examples - scatter plot

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .chart {
      background-color: #f6fafc;
      border: 1px solid #333;
    }
    text {
      font-size: 8px;
      font-family: Arial;
    }
  </style>
</head>
<body>
  <div class="chart"></div>
​
  <script>
    const margin = { top: 25, right: 35, bottom: 100, left: 35 };
    const width = 550 - margin.left - margin.right;
    const height = 325 - margin.top - margin.bottom;
    
    const fullWidth = width + margin.left + margin.right;
    const fullHeight = height + margin.top + margin.bottom;
​
    const svg = d3.select('.chart')
      .append('svg')
        .attr('width', width + margin.left + margin.right)
        .attr('height', height + margin.top + margin.bottom)
                .call(responsivefy)
      .append('g')
        .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');
​
    d3.json('data.json', (err, data) => {
      
      const xScale = d3.scaleLinear()
          .domain(d3.extent(data, d => d.cost))
        .range([0, width])
        .nice();
​
      const yScale = d3.scaleLinear()
        .domain(d3.extent(data, d => d.expectancy))
        .range([height, 0])
        .nice();
​
      const rScale = d3.scaleSqrt()
        .domain([0, d3.max(data, d => d.population)])
        .range([0, 40]);
​
      const yAxis = d3.axisLeft(yScale)
        .ticks(10);
​
      const bubbles = svg.selectAll('.bubble')
        .data(data)
        .enter()
        .append('g')
        .attr('class', 'bubble')
        .attr('transform', d =>
            `translate(${xScale(d.cost)}, ${yScale(d.expectancy)})`
        );
​
      bubbles.append('circle')
        .attr('cx', 0)
        .attr('cy', 0)
        .attr('r', d => rScale(d.population))
        .attr('fill', 'steelblue')
        .attr('stroke', '#003366')
        .attr('stroke-width', 1)
        .style('opacity', 0.5);
​
      bubbles.append('text')
        .style('text-anchor', 'middle')
        .style('fill', '#111')
        .style('font-size', 6)
        .attr('y', 3)
        .text(d => d.code);
​
      // add the axis by passing it into d3.call (and wrap it in a <g>)
      svg.append('g')
        .call(yAxis);
​
      const xAxis = d3.axisBottom(xScale);
​
      svg.append('g')
        .attr('transform', `translate(0, ${height})`)
        .call(xAxis);
    });
​
​
/////
​
    function responsivefy(svg) {
      // get container + svg aspect ratio
      var container = d3.select(svg.node().parentNode),
          width = parseInt(svg.style("width")),
          height = parseInt(svg.style("height")),
          aspect = width / height;
​
      // add viewBox and preserveAspectRatio properties,
      // and call resize so that svg resizes on inital page load
      svg.attr("viewBox", "0 0 " + width + " " + height)
          .attr("preserveAspectRatio", "xMinYMid")
          .call(resize);
​
      // to register multiple listeners for same event type,
      // you need to add namespace, i.e., 'click.foo'
      // necessary if you call invoke this function for multiple svgs
      // api docs: https://github.com/mbostock/d3/wiki/Selections#on
      d3.select(window).on("resize." + container.attr("id"), resize);
​
      // get width of container and resize svg to fit it
      function resize() {
          var targetWidth = parseInt(container.style("width"));
          svg.attr("width", targetWidth);
          svg.attr("height", Math.round(targetWidth / aspect));
      }
    }
  </script>
</body>
​
    