Skip to content

Instantly share code, notes, and snippets.

@tophtucker
Forked from mbostock/.block
Last active May 12, 2016
Embed
What would you like to do?
Survivor with Seth performance

Survivor with Seth III auction performance

name price place performance outperformance
Corey 0.588235294 11 8 13.6
Zoe 0.588235294 13 6 10.2
Stu 0.588235294 15 4 6.800000001
Rachel 2.588235294 2 17 6.568181818
Sam 4.588235294 5 14 3.051282051
Bip 5.928235294 2 17 2.867632467
Liz 4.588235294 6 13 2.833333333
Blake 6.588235294 7 12 1.821428571
Peter C. 8.33 4 15 1.800720288
Ethan 0.588235294 18 1 1.7
Louisa 14.91823529 1 18 1.206577028
Jono 12.58823529 8 11 0.873831776
Julia 3.588235294 16 3 0.836065574
Adia 13.58823529 10 9 0.662337662
Tone 13.58823529 13 6 0.441558442
Hannah 4.588235294 17 2 0.435897436
Peter F. 20.58823529 12 7 0.34
Will 31.58823529 9 10 0.316573557
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 13px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.point {
text-anchor: middle;
}
</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.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 priceFormat = d3.format("$.2");
var placeFormat = function(d) {
if(d == 0) {
return "";
} else if(d == 1) {
return "1st";
} else if(d == 2) {
return "2nd";
} else if(d == 3) {
return "3rd";
} else {
return d+"th";
}
}
var x = d3.scale.linear()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickFormat(placeFormat)
.ticks(20);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat(priceFormat);
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.tsv("data.tsv", function(error, data) {
if (error) throw error;
data.forEach(function(d) {
d.price = +d.price;
d.place = +d.place;
});
x.domain(d3.extent(data, function(d) { return d.place; })).nice();
y.domain(d3.extent(data, function(d) { return d.price; })).nice();
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
svg.selectAll(".point")
.data(data)
.enter().append("text")
.attr("class", "point")
.attr("x", function(d) { return x(d.place); })
.attr("y", function(d) { return y(d.price); })
.attr("dy", ".5em")
.text(function(d) { return d.name; });
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment