D3 Examples - Scattering

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; }
  </style>
</head>
​
<body>
  <script>
    // Data
    let plotData = [
      [23, 45], [100, 12], [90, 80], [200, 10], [4, 300]
    ],
        maxX = d3.max(plotData, d => d[0]);
        maxY = d3.max(plotData, d => d[1]);
    
    // Static graph attributes
    let padding = 40, 
        graphWidth = 960,
      graphHeight = 450,
      domainWidth = graphWidth - 2 * padding,
      domainHeight = graphHeight - 2 * padding;
        
    // SVG container render
    let graph = d3.select('body').append('svg')
        .attr('width', graphWidth)
        .attr('height', graphHeight)
        .append('g').attr('transform', `translate(${padding}, ${padding})`);
    
    // Scales
    let xScale = d3.scaleLinear()
        .domain([0, maxX + padding / 4])
        .range([0, domainWidth]);
    
    let yScale = d3.scaleLinear()
        .domain([0, maxY + padding / 2])
        .range([domainHeight, 0]);
    
    // X Axis
    graph.append('g')
      .attr('class','axis')
        .attr('transform', `translate(0, ${domainHeight})`)
        .call(d3.axisBottom(xScale));
    
    // Y Axis
    graph.append('g')
      .attr('class','axis')
        .call(d3.axisLeft(yScale));
    
    // Plots render
    let circles = graph.append('g').selectAll('circle').data(plotData);
    circles.enter().append('circle')
      .attr('cx', d => xScale(d[0]))
      .attr('cy', d => yScale(d[1]))
      .attr('r', 10)
      .style('fill', 'steelBlue');
  </script>
</body>
​
    