D3 Scatterplot - Loading

by Serhii Matrunchyk

HTML

<div id="scatter-load"></div>

CSS

body {
    font-family:"Helvetica Neue";
    color: #686765;
}
.name {
    float:right;
    color:#27aae1;
}
.axis {
    fill: none;
    stroke: #AAA;
    stroke-width: 1px;
}
text {
    stroke: none;
    fill: #666666;
    font-size: .6em;
    font-family:"Helvetica Neue"
}
.label {
    fill: #414241;
}
.node {
    cursor:pointer;
}
.dot {
    opacity: .7;
    cursor: pointer;
}

JavaScript

const chocolates = [
  {
    'name': 'Dairy Milk',
    'manufacturer': 'cadbury',
    'price': 45,
    'rating': 20,
  }, {
    'name': 'Galaxy',
    'manufacturer': 'Nestle',
    'price': 50,
    'rating': 30,
  }, {
    'name': 'Lindt',
    'manufacturer': 'Lindt',
    'price': 80,
    'rating': 40,
  }, {
    'name': 'Hershey',
    'manufacturer': 'Hershey',
    'price': 40,
    'rating': -10,
  }, {
    'name': 'Dolfin',
    'manufacturer': 'Lindt',
    'price': 100,
    'rating': 50,
  }, {
    'name': 'Bournville',
    'manufacturer': 'cadbury',
    'price': 70,
    'rating': 100,
  }, {
    'name': 'Something',
    'manufacturer': 'cadbury1',
    'price': -10,
    'rating': -10,
  }];

const clusters = [
  {
    cx: 45,
    cy: 25,
    rx: 10,
    ry: 10,
  }];

// call the method below
showScatterPlot(chocolates);

function showScatterPlot(data) {
  // just to have some space around items.
  const margins = {
    left: 40,
    right: 30,
    top: 30,
    bottom: 30,
  };

  const width = 534;
  const height = 500;

  const colors = d3.scaleOrdinal(d3.schemeCategory10);

  // we add the SVG component to the scatter-load div
  const svg = d3.select('#scatter-load')
  .append('svg')
  .attr('width', width)
  .attr('height', height)
  .append('g')
  .attr('transform', `translate(${margins.left}, ${margins.top})`);

  const x = d3.scaleLinear()
  .domain([0, 110])
  .range([0, width - margins.left - margins.right]);

  const y = d3.scaleLinear()
  .domain([-20, 110])
  .range([height - margins.top - margins.bottom, 0]);

  svg.append('g').attr('class', 'x axis').attr('transform', 'translate(0,' + y.range()[0] + ')');
  svg.append('g').attr('class', 'y axis');

  svg.append('text')
  .attr('fill', '#414241')
  .attr('text-anchor', 'end')
  .attr('x', width / 2)
  .attr('y', height - 35)
  .text('Price in pence (£)');

  const xAxis = d3.axisBottom(x).tickPadding(2);
  const yAxis = d3.axisLeft(y).tickPadding(2);

  const yAxisGroup =...