d3 Legend Circles

Rectangles work in legend. Why not circles?

by k_sav

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.8.0/d3.min.js"></script>
<div id="chart-area">
  <svg></svg>
</div>

CSS

#chart-area svg {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

#logo {
  height: 50px;
}

.navbar-brand {
  height: 60px;
  padding: 5px 0px;
}

JavaScript

var margin = { left: 80, right: 20, top: 50, bottom: 100 };
var height = 200 - margin.top - margin.bottom,
  width = 300 - margin.left - margin.right;

var g = d3
  .select('#chart-area')
  .append('svg')
  .attr('width', width + margin.left + margin.right)
  .attr('height', height + margin.top + margin.bottom)
  .append('g')
  .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');

var continents = ['europe', 'asia'];
var time = 0;

const DATA = [
  {
    countries: [
      {
        continent: 'europe',
        country: 'Yugoslavia',
        income: 100,
        life_exp: 50,
        population: 4687422
      },
      {
        continent: 'asia',
        country: 'United Korea (former)',
        income: 200,
        life_exp: 60,
        population: 13740000
      }
    ],
    year: '1800'
  },
  {
    countries: [
      {
        continent: 'europe',
        country: 'Yugoslavia',
        income: 199,
        life_exp: 51,
        population: 5687422
      },
      {
        continent: 'asia',
        country: 'United Korea (former)',
        income: 299,
        life_exp: 61,
        population: 23740000
      }
    ],
    year: '1801'
  }
];

// Scales
var x = d3
  .scaleLog()
  .base(10)
  .range([0, width])
  .domain([100, 300]);
var y = d3
  .scaleLinear()
  .range([height, 0])
  .domain([0, 90]);
var area = d3
  .scaleLinear()
  .range([25 * Math.PI, 1500 * Math.PI])
  .domain([2000, 1400000000]);
var continentColor = d3.scaleOrdinal(d3.schemeDark2);

// Clean data
const formattedData = DATA.map(function(year) {
  return year['countries']
    .filter(function(country) {
      var dataExists = country.income && country.life_exp;
      return dataExists;
    })
    .map(function(country) {
      country.income = +country.income;
      country.life_exp = +country.life_exp;
      return country;
    });
});

// Add legend group
var legend = g
  .append('g')
  .attr('transform', 'translate(' + (width - 10) + ',' + (height - 10) + ')');

//...