Scatterplot of Iris data : d3 v4

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Scatterplot d3v4</title>
	<style type="text/css">
		body{
			margin: 0;
			font-family: arial, sans;
		}

.label{
			font-size: 15px;
		}

.legend text,
		.axis text {
			font-size: 13px;
			fill: #333;
		}

.axis path,
		.axis line{
			fill: none;
			stroke-width: 1px;
			stroke: #777;
		}

.circle{
			fill-opacity: 0.65;
		}

.bubble{
			opacity: 1;
			transition: opacity 0.3s;
		}

.bubble:hover text{
			opacity: 1;
		}

.bubble:hover circle{
			fill-opacity: 1;
		}

.legend rect{
			fill-opacity: 0.75;
		}

.legeng:hover rect{
			fill-opacity:1;
		}
	</style>
	<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<script type="text/javascript">
	var margin = {top: 30, right: 50, bottom: 40, left:40};
	var width = 960 - margin.left - margin.right;
	var height = 500 - margin.top - margin.bottom;

var svg = d3.select('body')
		.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 + ')');

// The API for scales have changed in v4. There is a separate module d3-scale which can be used instead. The main change here is instead of d3.scale.linear, we have d3.scaleLinear.
	var xScale = d3.scaleLinear()
		.range([0, width]);

var yScale = d3.scaleLinear()
		.range([height, 0]);

// square root scale.
	var radius = d3.scaleSqrt()
		.range([2,5]);

// the axes are much cleaner and easier now. No need to rotate and orient the axis, just call axisBottom, axisLeft etc.
	var xAxis = d3.axisBottom()
		.scale(xScale);

var yAxis = d3.axisLeft()
		.scale(yScale);

// again scaleOrdinal
	var color = d3.scaleOrdinal(d3.schemeCategory20);

d3.csv('iris.csv', function(error, data){
		data.forEach(function(d){
			 d.SepalLength = +d.SepalLength;
			 d.SepalWidth = +d.SepalWidth;
			 d.PetalLength = +d.PetalLength;
			 d.Species = d.Name;
		});

xScale.domain(d3.extent(data, function(d){
			return d.SepalLength;
		})).nice();

yScale.domain(d3.extent(data, function(d){
			return d.SepalWidth;
		})).nice();

radius.domain(d3.extent(data, function(d){
			return d.PetalLength;
		})).nice();

// adding axes is also simpler now, just translate x-axis to (0,height) and it's alread defined to be a bottom axis. 
		svg.append('g')
			.attr('transform', 'translate(0,' + height + ')')
			.attr('class', 'x axis')
			.call(xAxis);

// y-axis is translated to (0,0)
		svg.append('g')
			.attr('transform', 'translate(0,0)')
			.attr('class', 'y axis')
			.call(yAxis);

bubble.append('title')
			.attr('x', function(d){ return radius(d.PetalLength); })
			.text(function(d){
				return d.Species;
			});

// adding label. For x-axis, it's at (10, 10), and for y-axis at (width, height-10).
		svg.append('text')
			.attr('x', 10)
			.attr('y', 10)
			.attr('class', 'label')
			.text('Sepal Width');

svg.append('text')
			.attr('x', width)
			.attr('y', height - 10)
			.attr('text-anchor', 'end')
			.attr('class', 'label')
			.text('Sepal Length');

// I feel I understand legends much better now.
		// define a group element for each color i, and translate it to (0, i * 20). 
		var legend = svg.selectAll('legend')
			.data(color.domain())
			.enter().append('g')
			.attr('class', 'legend')
			.attr('transform', function(d,i){ return 'translate(0,' + i * 20 + ')'; });

// give x value equal to the legend elements. 
		// no need to define a function for fill, this is automatically fill by color.
		legend.append('rect')
			.attr('x', width)
			.attr('width', 18)
			.attr('height', 18)
			.style('fill', color);

// add text to the legend elements.
		// rects are defined at x value equal to width, we define text at width - 6, this will print name of the legends before the rects.
		legend.append('text')
			.attr('x', width - 6)
			.attr('y', 9)
			.attr('dy', '.35em')
			.style('text-anchor', 'end')
			.text(function(d){ return d; });

// d3 has a filter fnction similar to filter function in JS. Here it is used to filter d3 components.
		legend.on('click', function(type){
			d3.selectAll('.bubble')
				.style('opacity', 0.15)
				.filter(function(d){
					return d.Species == type;
				})
				.style('opacity', 1);
		})

})

</script>
	
</body>
</html>

https://d3js.org/d3.v4.min.js