Iris scatterplot

Iris scatterplot with hovering

by nancynancy

HTML

<pre id="data">
sepalLength,sepalWidth,petalLength,petalWidth,species
5.1,3.5,1.4,0.2,setosa
4.9,3,1.4,0.2,setosa
4.7,3.2,1.3,0.2,setosa
4.6,3.1,1.5,0.2,setosa
5,3.6,1.4,0.2,setosa
5.4,3.9,1.7,0.4,setosa
4.6,3.4,1.4,0.3,setosa
5,3.4,1.5,0.2,setosa
5.3,3.7,1.5,0.2,setosa
5,3.3,1.4,0.2,setosa
6.8,2.8,4.8,1.4,versicolor
6.7,3,5,1.7,versicolor
6,2.9,4.5,1.5,versicolor
5.7,2.6,3.5,1,versicolor
5.5,2.4,3.8,1.1,versicolor
5.5,2.4,3.7,1,versicolor
5.8,2.7,3.9,1.2,versicolor
6,2.7,5.1,1.6,versicolor
5.4,3,4.5,1.5,versicolor
6,3.4,4.5,1.6,versicolor
6.7,3.1,4.7,1.5,versicolor
6.3,2.3,4.4,1.3,versicolor
5.6,3,4.1,1.3,versicolor
5.5,2.5,4,1.3,versicolor
5.5,2.6,4.4,1.2,versicolor
6.1,3,4.6,1.4,versicolor
5.8,2.6,4,1.2,versicolor
5,2.3,3.3,1,versicolor
5.6,2.7,4.2,1.3,versicolor
5.7,3,4.2,1.2,versicolor
5.7,2.9,4.2,1.3,versicolor
6.2,2.9,4.3,1.3,versicolor
5.1,2.5,3,1.1,versicolor
5.7,2.8,4.1,1.3,versicolor
6.3,3.3,6,2.5,virginica
5.8,2.7,5.1,1.9,virginica
7.1,3,5.9,2.1,virginica
5.8,2.8,5.1,2.4,virginica
6.4,3.2,5.3,2.3,virginica
6.5,3,5.5,1.8,virginica
7.7,3.8,6.7,2.2,virginica
7.7,2.6,6.9,2.3,virginica
6,2.2,5,1.5,virginica
6.9,3.2,5.7,2.3,virginica
5.6,2.8,4.9,2,virginica
7.7,2.8,6.7,2,virginica
6.3,2.7,4.9,1.8,virginica
6.7,3.3,5.7,2.1,virginica
7.2,3.2,6,1.8,virginica
6.2,2.8,4.8,1.8,virginica
6.1,3,4.9,1.8,virginica
6.4,2.8,5.6,2.1,virginica
7.2,3,5.8,1.6,virginica
7.4,2.8,6.1,1.9,virginica
7.9,3.8,6.4,2,virginica
6.4,2.8,5.6,2.2,virginica
6.3,2.8,5.1,1.5,virginica
6.1,2.6,5.6,1.4,virginica
7.7,3,6.1,2.3,virginica
6.3,3.4,5.6,2.4,virginica
6.4,3.1,5.5,1.8,virginica
</pre>

CSS

body,html{
	margin: 0;
	padding: 0;
	font-family: "Arial", sans-serif;
	font-size: 0.95em;
	text-align: center;
	background-color:white;
}
#chart{
	background-color: #ffffff;
}

.axis path,
.axis line{
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
}
.gridline path,
.gridline line{
	fill: none;
	stroke: #ccc;
	shape-rendering: crispEdges;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.dot {
  opacity: 0.5;
}
pre {
  display:none;
  }

JavaScript

var width = 400;
var height = 250;
var margin = {top: 20, bottom: 20, left: 30, right: 20};
var mydata = d3.csvParse(d3.select("pre#data").text());
var x = d3.scaleLinear().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);
var responseScale = d3.scaleLinear().range([1,5]);
var color = ["purple", "pink", "blue"]
var xAxis = d3.axisBottom(x).ticks(5)
var yAxis = d3.axisLeft(y).ticks(5);

var svg = d3.select("body").append("svg")
    .attr("id", "chart")
    .attr("width", width)
    .attr("height",height + 100)
    .attr("transform", "translate(" + 0 + "," + margin.top + ")");

var g = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    
mydata.forEach(function(d){
    d.sepalLength = +d.sepalLength;
    d.sepalWidth = +d.sepalWidth;
});
 
x.domain([2, 5])
y.domain([4, 8])

//////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////

g.selectAll(".dot")
  .data(mydata)
  .enter().append("circle")
  .attr("class", "dot")
  .attr("r", function(d){ return responseScale(d.petalWidth);})
  .attr("cx", function(d) { return x(d.sepalWidth); })
  .attr("cy", function(d) { return y(d.sepalLength); })
  .style("fill", function(d) {
            if(d.species === "setosa"){return "pink"}
            if(d.species === "versicolor"){return "lightblue"}
            if(d.species === "virginica"){return "purple"}
    })
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
          
g.selectAll(".dot")
  .on("mouseover", function(d){
  d3.selectAll('.dot')
    .filter(function(dot){return (dot.species == d.species)})
    .transition()
    .style("opacity", 1)
})
  .on("mouseout", function(d){
  d3.selectAll('.dot')
    .filter(function(dot){return (dot.species == d.species)})
    .transition()
    .style("opacity", 0.1)
});

g.selectAll(".dot")
  .on("mouseover", function(d){
  console.log(d)
  })


g.append("g")
 ...