Skip to content

Instantly share code, notes, and snippets.

@aurelient

aurelient/.block

Last active January 24, 2020 08:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save aurelient/9a1e41d765c1619f454a277399c88c92 to your computer and use it in GitHub Desktop.
Save aurelient/9a1e41d765c1619f454a277399c88c92 to your computer and use it in GitHub Desktop.
Download ZIP
Scatterplot of Iris data : d3 v4
Raw
.block
license: mit
Raw
index.html
<!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{
stroke-width: 1px;
stroke: #777;
}
</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 + ')');
var xScale = d3.scaleLinear().range([0, width]);
var yScale = d3.scaleLinear().range([height, 0]);
// il aurait plus judicieux de faire :
// var yScale = d3.scaleLinear().range([0, height]);
var xAxis = d3.axisTop().scale(xScale);
var yAxis = d3.axisLeft().scale(yScale);
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();
svg.append('g')
.attr('class', 'x axis')
.call(xAxis);
svg.append('g')
.attr('class', 'y axis')
.call(yAxis);
var mark = svg.selectAll('.mark')
.data(data)
.enter().append('rect')
.attr('class', 'mark')
.attr('x', function(d){return xScale(d.SepalLength);})
.attr('y', function(d){ return yScale(d.SepalWidth); })
.attr('height', function(d){ return d.PetalLength; })
.attr('width', function(d){ return d.PetalLength; })
.style('fill', function(d){ return color(d.Species); });
svg.append('text')
.attr('x', 2)
.attr('y', height + 5)
.attr('class', 'label')
.text('Sepal Width');
svg.append('text')
.attr('x', width)
.attr('y', 10)
.attr('text-anchor', 'end')
.attr('class', 'label')
.text('Sepal Length');
var legend = svg.selectAll('legend')
.data(color.domain())
.enter().append('g')
.attr('class', 'legend')
.attr('transform', function(d,i){
return 'translate(0,' + ((i * 20) + height-60.0) + ')';
});
legend.append('rect')
.attr('x', width)
.attr('width', 18)
.attr('height', 18)
.style('fill', color);
legend.append('text')
.attr('x', width - 6)
.attr('y', 9)
.attr('dy', '.35em')
.style('text-anchor', 'end')
.text(function(d){ return d; });
legend.on('click', function(type){
d3.selectAll('.mark')
.style('opacity', 0.15)
.filter(function(d){
return d.Species == type;
})
.style('opacity', 1);
})
})
</script>
</body>
</html>
Raw
iris.csv
SepalLength SepalWidth PetalLength PetalWidth Name
4.5 2.3 3.3 0.3 Iris-setosa
4.4 3.2 4.3 0.2 Iris-setosa
5.0 3.5 3.6 0.6 Iris-setosa
6.4 3.2 10.5 1.5 Iris-versicolor
6.9 3.1 12.9 1.5 Iris-versicolor
6.7 3.0 13.0 1.7 Iris-versicolor
5.1 2.5 14.0 1.1 Iris-versicolor
7.2 3.0 8.8 1.6 Iris-virginica
7.4 2.8 7.1 1.9 Iris-virginica
7.7 3.0 7.1 2.3 Iris-virginica
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment