D3: Scatterplot

forked from anonymous's block: D3: Scatterplot

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>D3: Scatterplot</title>
		<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
		<style type="text/css">
			
			.axis path,
			.axis line {
				fill: none;
				stroke: black;
				shape-rendering: crispEdges;
			}
			
			.axis text {
				font-family: sans-serif;
				font-size: 11px;
			}

</style>
	</head>
	<body>
		
		<script type="text/javascript">

var dataset;

d3.csv("iris.csv", function(data) {
				dataset = data;
				showData();
			});
			
			function showData() {
								
				var w = window.innerWidth - window.innerWidth/20;
				var h = window.innerHeight - window.innerWidth/20;
				var padding = 40;
					
				var xScale = d3.scaleLinear()
					.domain([d3.min(dataset, function(d) { return d.sepal_length; }), d3.max(dataset, function(d) { return d.sepal_length; })])
					.range([padding, w - padding]);
					
				var yScale = d3.scaleLinear()
                    .domain([d3.min(dataset, function(d) { return d.sepal_width; }), d3.max(dataset, function(d) { return d.sepal_width; })])
                    .range([h - padding, padding]);
					
				var xAxis = d3.axisBottom(xScale);
				var yAxis = d3.axisLeft(yScale);
				
				var svg = d3.select("body")
					.append("svg")
					.attr("width", w)
					.attr("height", h);
					
				var path = svg.selectAll("path")
					.data(dataset)
					.enter()
					.append("path")

path.attr("transform", function(d) {
					return "translate(" + xScale(d.sepal_length) + ", " + yScale(d.sepal_width) + ")";
					})
					.attr("d", d3.symbol().type(function(d){
						if (d.species == 'setosa'){
							return d3.symbolCross;
						}
						else if (d.species == 'versicolor') {
							return d3.symbolDiamond;
						}
						else {
							return d3.symbolSquare;
						}
					}))
					.style("fill", function(d){
						if (d.species == 'setosa'){
							return "blue"
						}
						else if (d.species == 'versicolor') {
							return "orange"
						}
						else {
							return "red"
						}
					})
					.on("mouseover", function(d) {
						d3.select(this).style("stroke", "black");
						d3.select(this).style("stroke-width", 2);
					})
					.on("mouseout", function(d) {
						d3.select(this).transition().duration(500).style("stroke-width", 0);
					});
					
				svg.append("line")
					.style("stroke", "blue")
					.attr("x1", xScale(4.3))
					.attr("y1", yScale(2.85))
					.attr("x2", xScale(6.24))
					.attr("y2", yScale(4.4));

svg.append("line")
					.style("stroke", "orange")
					.attr("x1", xScale(4.3))
					.attr("y1", yScale(2.24))
					.attr("x2", xScale(7.9))
					.attr("y2", yScale(3.39));

svg.append("line")
					.style("stroke", "red")
					.attr("x1", xScale(4.3))
					.attr("y1", yScale(2.45))
					.attr("x2", xScale(7.9))
					.attr("y2", yScale(3.26));
				
				svg.append("g")
					.attr("class", "axis")
					.attr("transform", "translate(0," + (h - padding) + ")")
					.call(xAxis);
				
				svg.append("g")
					.attr("class", "axis")
					.attr("transform", "translate(" + padding + ",0)")
					.call(yAxis);
			}
			
		</script>
	</body>
</html>

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