Skip to content

Instantly share code, notes, and snippets.

@santi698

santi698/.block

Forked from mbostock/.block
Last active May 19, 2016 15:17
Show Gist options
  • Save santi698/b58c8afe0983b786e134b999de3e5b03 to your computer and use it in GitHub Desktop.
Save santi698/b58c8afe0983b786e134b999de3e5b03 to your computer and use it in GitHub Desktop.
Download ZIP
Scatterplot
Raw
.block
license: gpl-3.0
Raw
README.md

Datos de 15 registros de RunKeeper

Trabajo Práctico de datos personales de Visualización de la Información.

Raw
data.csv
distancia ritmo anio
9.99238109997 5.93452145257 2016
2.4414649768 7.08590955202 2013
3.1485536002 5.87042041531 2013
2.84509752736 4.85630686955 2013
1.9025106801 5.06348449661 2013
6.73628865235 5.9379878245 2016
5.00159647981 4.80180013794 2016
1.00796501859 5.29118891524 2016
5.30844735052 6.11603817894 2016
5.99587427721 4.94784668508 2013
6.01018871205 6.16730496205 2016
10.0216802049 5.55628718889 2013
1.17357238528 6.14931533596 2013
2.45922874909 4.85924703199 2013
5.63099690844 4.83336558503 2013
2.95220149539 5.41968426782 2013
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.dot {
stroke: #000;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.linear()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var color = d3.scale.category10();
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
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 + ")");
d3.csv("data.csv", function(error, data) {
if (error) throw error;
data.forEach(function(d) {
d.distancia = +d.distancia;
d.ritmo = +d.ritmo;
d.anio = d.anio
});
x.domain(d3.extent(data, function(d) { return d.distancia; })).nice();
y.domain(d3.extent(data, function(d) { return d.ritmo; })).nice();
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("class", "label")
.attr("x", width)
.attr("y", -6)
.style("text-anchor", "end")
.text("Distancia (km)");
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("class", "label")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Ritmo (min/km)")
svg.selectAll(".dot")
.data(data)
.enter().append("circle")
.attr("class", "dot")
.attr("r", 3.5)
.attr("cx", function(d) { return x(d.distancia); })
.attr("cy", function(d) { return y(d.ritmo); })
.style("fill", function(d) { return color(d.anio); });
var legend = svg.selectAll(".legend")
.data(color.domain())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
legend.append("rect")
.attr("x", width - 18)
.attr("width", 18)
.attr("height", 18)
.style("fill", color);
legend.append("text")
.attr("x", width - 24)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) { return d; });
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment