D3 Examples - d3-voronoi-scatterplot chart component

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>Scatterplot with Voronoi</title>
​
    <!-- D3.js -->  
  <script src="//d3js.org/d3.v4.js"></script>
​
    <!-- bootstrap-native -->
    <!-- use custom build to handle tooltip removal cleanly -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/micahstubbs/bootstrap.native/improve-popover-remove/dist/bootstrap-native.js"></script>
    
    <!-- lodash -->
    <script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.js'></script>
​
    <!-- babel standalone -->
    <script src='https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.10.3/babel.min.js'></script>
    
    <!-- d3-voronoi-scatterplot chart component -->
    <script src='d3-voronoi-scatterplot.js'></script>
    <script src='worldbank.js'></script>
​
    <!-- Open Sans & CSS -->
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <link href='//fonts.googleapis.com/css?family=Open+Sans:700,400,300' rel='stylesheet' type='text/css'>
    <link rel="icon" href="data:;base64,iVBORw0KGgo=">
      <style>
        body {
          font-family: 'Open Sans', sans-serif;
          font-size: 12px;
          font-weight: 400;
          color: #525252;
          text-align: center;
        }
​
        html, body { 
            width:auto; 
            height:auto; 
        }
        
        .axis path,
        .axis line {
            fill: none;
            stroke: #B3B3B3;
            shape-rendering: crispEdges;
        }
        .axis text {
            font-size: 10px;
            fill: #6B6B6B;
        }
​
        .countries {
            pointer-events: none;
        }
​
        .guide {
            pointer-events: none;
            font-size: 14px;
            font-weight: 600;
        }
        
        .popover {
            pointer-events: none;
        }
        
        .legendCircle {
            stroke-width:1;
            stroke:#999;
            stroke-dasharray:2 2;
            fill:none;
        }
​
        .legendLine {
            stroke-width: 1;
            stroke: #D1D1D1;
            shape-rendering: crispEdges;
        }
​
        .legendTitle {
            fill: #1A1A1A;
            color: #1A1A1A;
            text-anchor: middle;
            font-size: 10px;
        }
​
        .legendText {
            fill: #949494;
            text-anchor: start;
            font-size: 9px;
        }
        
        @media (min-width: 500px) {
          .col-sm-3, .col-sm-9 {
            float: left;
          }
          .col-sm-9 {
            width: 75%;
          }
          .col-sm-3 {
            width: 25%;
          }
        }
      </style>
  </head>
  <body>
    <div id="cont" class="container-fluid text-center">
        <div class="row scatter">
            <h5 style="color: #3B3B3B;">Life expectancy versus GDP per Capita</h5>
            <h6 style="color: #A6A6A6;">drawn with the d3-voronoi-scatterplot component</h6>
            <div class="col-sm-9">
                <div id="chart"></div>
            </div>
            <div id = "legend" class="col-sm-3" style="padding-right: 0px; padding-left: 0px;">
                <div class="legendTitle" style="font-size: 12px;">REGION</div>
                <div id="legend"></div>
            </div>
        </div>
    </div>
<script lang='babel' type='text/babel'>
const xVariable = 'GDP_perCapita';
const yVariable = 'lifeExpectancy';
const rVariable = 'GDP';
​
const tooltipColumns = [
  {
    name: 'Country',
    valueOnly: true
  }/*,
  {
    name: 'GDP',
    type: 'numeric',
    format: ',.0f'
  },
  {
    name: 'lifeExpectancy',
    type: 'numeric',
    format: ',.0f'
  },
  {
    name: 'GDP_perCapita',
    type: 'numeric',
    format: ',.0f'
  } */
];
​
const numericColumns = [
    'GDP',
    'GDP_perCapita',
    'lifeExpectancy'
];
​
const marks = {
    r: 2,
    fillOpacity: 0.3,
    colors: [
      '#1f78b4',
      '#ff7f00',
      '#33a02c',
      '#e31a1c',
      '#6a3d9a',
      '#b15928',
      '#a6cee3',
      '#fdbf6f',
      '#b2df8a',
      '#fb9a99',
      '#cab2d6',
      '#ffff99'
    ]
};
​
const categoricalColumns = [
    'Country',
    'CountryCode',
    'Region',
    'Continent'
];
​
const options = {
  xVariable,
  yVariable,
  rVariable,
  marks,
  tooltipColumns,
  numericColumns,
    categoricalColumns,
    width: 960,
  yScaleType: 'power',
  yScaleExponent: 3,
  idVariable: 'CountryCode',
  groupByVariable: 'Continent',
  xLabelDetail: 'Country',
  wrapperId: 'GDP_perCapitaVslifeExpectancy',
  wrapperLabel: 'example 02',
  xDroplineTextFormat: ',.0f',
  yDroplineTextFormat: '.0f'
}
​
console.log('d3VoronoiScatterplot', d3VoronoiScatterplot);
const update = d3VoronoiScatterplot.drawVoronoiScatterplot('#chart', data, options);
// console.log('update', update);
// console.log('d3VoronoiScatterplot', d3VoronoiScatterplot);
</script>
  </body>
</html>
    