Skip to content

Instantly share code, notes, and snippets.

@LuisSevillano

LuisSevillano/.block

Last active April 2, 2016 12:29
Show Gist options
  • Save LuisSevillano/a506144e43c05eb3675a to your computer and use it in GitHub Desktop.
Save LuisSevillano/a506144e43c05eb3675a to your computer and use it in GitHub Desktop.
Download ZIP
Scatterplot
Raw
.block
license: mit
height: 650
Raw
README.md

Scatterplot This scatterplot is constructed from a CSV file storing the dimensions of sepals and petals of various iris flowers.

Raw
data.csv
sepalLength sepalWidth petalLength petalWidth species
5.1 3.5 1.4 0.2 setosa
4.9 3.0 1.4 0.2 setosa
4.7 3.2 1.3 0.2 setosa
4.6 3.1 1.5 0.2 setosa
5.0 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.0 3.4 1.5 0.2 setosa
4.4 2.9 1.4 0.2 setosa
4.9 3.1 1.5 0.1 setosa
5.4 3.7 1.5 0.2 setosa
4.8 3.4 1.6 0.2 setosa
4.8 3.0 1.4 0.1 setosa
4.3 3.0 1.1 0.1 setosa
5.8 4.0 1.2 0.2 setosa
5.7 4.4 1.5 0.4 setosa
5.4 3.9 1.3 0.4 setosa
5.1 3.5 1.4 0.3 setosa
5.7 3.8 1.7 0.3 setosa
5.1 3.8 1.5 0.3 setosa
5.4 3.4 1.7 0.2 setosa
5.1 3.7 1.5 0.4 setosa
4.6 3.6 1.0 0.2 setosa
5.1 3.3 1.7 0.5 setosa
4.8 3.4 1.9 0.2 setosa
5.0 3.0 1.6 0.2 setosa
5.0 3.4 1.6 0.4 setosa
5.2 3.5 1.5 0.2 setosa
5.2 3.4 1.4 0.2 setosa
4.7 3.2 1.6 0.2 setosa
4.8 3.1 1.6 0.2 setosa
5.4 3.4 1.5 0.4 setosa
5.2 4.1 1.5 0.1 setosa
5.5 4.2 1.4 0.2 setosa
4.9 3.1 1.5 0.2 setosa
5.0 3.2 1.2 0.2 setosa
5.5 3.5 1.3 0.2 setosa
4.9 3.6 1.4 0.1 setosa
4.4 3.0 1.3 0.2 setosa
5.1 3.4 1.5 0.2 setosa
5.0 3.5 1.3 0.3 setosa
4.5 2.3 1.3 0.3 setosa
4.4 3.2 1.3 0.2 setosa
5.0 3.5 1.6 0.6 setosa
5.1 3.8 1.9 0.4 setosa
4.8 3.0 1.4 0.3 setosa
5.1 3.8 1.6 0.2 setosa
4.6 3.2 1.4 0.2 setosa
5.3 3.7 1.5 0.2 setosa
5.0 3.3 1.4 0.2 setosa
7.0 3.2 4.7 1.4 versicolor
6.4 3.2 4.5 1.5 versicolor
6.9 3.1 4.9 1.5 versicolor
5.5 2.3 4.0 1.3 versicolor
6.5 2.8 4.6 1.5 versicolor
5.7 2.8 4.5 1.3 versicolor
6.3 3.3 4.7 1.6 versicolor
4.9 2.4 3.3 1.0 versicolor
6.6 2.9 4.6 1.3 versicolor
5.2 2.7 3.9 1.4 versicolor
5.0 2.0 3.5 1.0 versicolor
5.9 3.0 4.2 1.5 versicolor
6.0 2.2 4.0 1.0 versicolor
6.1 2.9 4.7 1.4 versicolor
5.6 2.9 3.6 1.3 versicolor
6.7 3.1 4.4 1.4 versicolor
5.6 3.0 4.5 1.5 versicolor
5.8 2.7 4.1 1.0 versicolor
6.2 2.2 4.5 1.5 versicolor
5.6 2.5 3.9 1.1 versicolor
5.9 3.2 4.8 1.8 versicolor
6.1 2.8 4.0 1.3 versicolor
6.3 2.5 4.9 1.5 versicolor
6.1 2.8 4.7 1.2 versicolor
6.4 2.9 4.3 1.3 versicolor
6.6 3.0 4.4 1.4 versicolor
6.8 2.8 4.8 1.4 versicolor
6.7 3.0 5.0 1.7 versicolor
6.0 2.9 4.5 1.5 versicolor
5.7 2.6 3.5 1.0 versicolor
5.5 2.4 3.8 1.1 versicolor
5.5 2.4 3.7 1.0 versicolor
5.8 2.7 3.9 1.2 versicolor
6.0 2.7 5.1 1.6 versicolor
5.4 3.0 4.5 1.5 versicolor
6.0 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.0 4.1 1.3 versicolor
5.5 2.5 4.0 1.3 versicolor
5.5 2.6 4.4 1.2 versicolor
6.1 3.0 4.6 1.4 versicolor
5.8 2.6 4.0 1.2 versicolor
5.0 2.3 3.3 1.0 versicolor
5.6 2.7 4.2 1.3 versicolor
5.7 3.0 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.0 1.1 versicolor
5.7 2.8 4.1 1.3 versicolor
6.3 3.3 6.0 2.5 virginica
5.8 2.7 5.1 1.9 virginica
7.1 3.0 5.9 2.1 virginica
6.3 2.9 5.6 1.8 virginica
6.5 3.0 5.8 2.2 virginica
7.6 3.0 6.6 2.1 virginica
4.9 2.5 4.5 1.7 virginica
7.3 2.9 6.3 1.8 virginica
6.7 2.5 5.8 1.8 virginica
7.2 3.6 6.1 2.5 virginica
6.5 3.2 5.1 2.0 virginica
6.4 2.7 5.3 1.9 virginica
6.8 3.0 5.5 2.1 virginica
5.7 2.5 5.0 2.0 virginica
5.8 2.8 5.1 2.4 virginica
6.4 3.2 5.3 2.3 virginica
6.5 3.0 5.5 1.8 virginica
7.7 3.8 6.7 2.2 virginica
7.7 2.6 6.9 2.3 virginica
6.0 2.2 5.0 1.5 virginica
6.9 3.2 5.7 2.3 virginica
5.6 2.8 4.9 2.0 virginica
7.7 2.8 6.7 2.0 virginica
6.3 2.7 4.9 1.8 virginica
6.7 3.3 5.7 2.1 virginica
7.2 3.2 6.0 1.8 virginica
6.2 2.8 4.8 1.8 virginica
6.1 3.0 4.9 1.8 virginica
6.4 2.8 5.6 2.1 virginica
7.2 3.0 5.8 1.6 virginica
7.4 2.8 6.1 1.9 virginica
7.9 3.8 6.4 2.0 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.0 6.1 2.3 virginica
6.3 3.4 5.6 2.4 virginica
6.4 3.1 5.5 1.8 virginica
6.0 3.0 4.8 1.8 virginica
6.9 3.1 5.4 2.1 virginica
6.7 3.1 5.6 2.4 virginica
6.9 3.1 5.1 2.3 virginica
5.8 2.7 5.1 1.9 virginica
6.8 3.2 5.9 2.3 virginica
6.7 3.3 5.7 2.5 virginica
6.7 3.0 5.2 2.3 virginica
6.3 2.5 5.0 1.9 virginica
6.5 3.0 5.2 2.0 virginica
6.2 3.4 5.4 2.3 virginica
5.9 3.0 5.1 1.8 virginica
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Scatterplot chart</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,300" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<style media="screen">
body {
font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: rgb(128,128,128);
}
h1{
font-weight: normal;
font-size: 25px;
color: #777;
}
circle:hover{
opacity: .8;
}
.axis path,
.axis line {
fill: none;
stroke: rgb(197,197,197);
shape-rendering: crispEdges;
}
.axis text {
fill: rgb(128,128,128);
}
.axis text {
font-size: 12px;
}
.virginica {
fill: rgb(24,188,204);
}
.versicolor {
fill: rgb(161,205,59);
}
.setosa {
fill: rgb(240,140,0);
}
</style>
</head>
<body>
<script type="text/javascript">
//margin convention
var margin = {top: 10, right: 20, bottom: 60, left: 30},
width = 960 - margin.left - margin.right,
height = 650 - margin.top - margin.bottom;
//create x and y scale. We'll set the domain later
var xScale = d3.scale.linear()
.range([ margin.bottom, width - margin.top - margin.bottom ]);
var yScale = d3.scale.linear()
.range([ height - margin.right, margin.top]);
//d3 functions to format numbers https://github.com/mbostock/d3/wiki/Formatting
var format = d3.format("s");
var formatComma = d3.format(",");
//create x axis
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(8)
.tickFormat(function(d) {
return format(d);
});
//create y axis
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.tickFormat(function(d) {
return format(d);
});
//create svg container
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 + ")");
//load data
d3.csv("data.csv", type, function(error, data){
var trans = 15;
//set scales domain
xScale.domain(d3.extent(data, function(d) {
return d.sepalWidth;
}));
yScale.domain(d3.extent(data, function(d) {
return d.sepalLength;
}));
//create our circles, one for each country data
var circles = svg.selectAll("circle")
.data(data);
//new elements
circles
.enter()
.append("circle")
.attr("cx", function(d){
return xScale(d.sepalWidth);
})
.attr("cy", height)
.attr("fill", "white");
//update position to make the animation
circles
.sort(function(a, b) {
return d3.ascending(+a.sepalWidth, +b.sepalWidth);
})
.transition()
.delay(function(d, i){return i*2;})
.duration(1000)
.attr("cy", function(d) {
return yScale(d.sepalLength);
})
.attr("r", 4)
.attr("opacity", ".9")
.attr("class", function(d){
return d.species;
});
//create title with data
circles
.append("title")
.text(function(d) {
return d.species +": "+formatComma(d.sepalWidth)+" cm sepal width and "+formatComma(d.sepalLength)+" cm sepal length";
});
//create axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (height) + ")")
.call(xAxis)
.append("text")
.attr("y", 35)
.attr("x",width/2-margin.left)
.attr("dy", ".5em")
.text("Sepal Width (cm)");
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + (margin.bottom - trans) + ",0)")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y",-55)
.attr("x",-(height/2)-margin.top)
.attr("dx", "1em")
.text("Sepal Length (cm)");
});
function type(d){
d.sepalLength = + d.sepalLength;
d.sepalWidth = +d.sepalWidth;
return d;
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment