d3-voronoi-scatterplot chart component by micahstubbs

a work-in-progress example created with the nascent d3-voronoi-scatterplot chart component

re-usable stuff is hard 😅

—— 8X ——–

this but ES2015

—— 8X ——–

love that bootstrap popover tooltip but regret that jQuery depedency? this is the iteration for you.

enter bootstrap-native, a Vanilla JavaScript replacement for bootstrap

this example uses a fork of bootstrap native with improved error handling

removeTooltip.js and showTooltip.js code ported back to ES5 with https://babeljs.io/repl/

a fork of @micahstubbs‘s block Voronoi Scatterplot with diagram.find()

—— 8X ——–

this example uses the diagram.find() convention introduced in d3 version 4.3.0

a fork of Philippe Rivière‘s block Nadieh Bremer’s Scatterplot with Voronoi - ported to d3.v4, and no SVG overlay

—— 8X ——–

This is a D3.v4 port by Philippe Rivière of Nadieh Bremer‘s block: Step 6 - Final - Voronoi (Distance Limited Tooltip) Scatterplot.

In addition, we use d3.voronoi.find(x,y,radius) to locate the point, instead of relying on a SVG overlay of clipped circles.

This gives:

1) lazy computation of the Voronoi 2) other objects are allowed capture the mouse before svg.

—— 8X ——–

Nadieh:

This scatterplot is part of the extension of my blog on Using a D3 Voronoi grid to improve a chart’s interactive experience. After writing that blog Franck Lebeau came with another version which uses large circles to define the tooltip region. I thought this was a great idea! But I made this variation on his code, because I felt that the extra code used in this example (versus the previous version 4) is more in line with the rest of the code.

The tooltip now reacts when you hover over an invisible large circular region around each circle.

You can find all of the steps here

forked from Fil‘s block: Step 6 - d3.v4 [UNLISTED]

index.html

<!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.rawgit.com/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>