Skip to content

Instantly share code, notes, and snippets.

@eric-wieser
Last active January 4, 2016 10:19
Show Gist options
  • Save eric-wieser/8608097 to your computer and use it in GitHub Desktop.
Save eric-wieser/8608097 to your computer and use it in GitHub Desktop.
Wine vs tompkins score
[{"tompkins": 64.37, "firsts": 19.8, "name": "Sidney Sussex", "wine": 97507}, {"tompkins": 60.92, "firsts": 15.8, "name": "Newnham", "wine": 27263}, {"tompkins": 64.16, "firsts": 21.4, "name": "Fitzwilliam", "wine": 23028}, {"tompkins": 65.49, "firsts": 25.9, "name": "King's", "wine": 338559}, {"tompkins": 57.92, "firsts": 13.2, "name": "Hughes Hall", "wine": 14033.58}, {"tompkins": 60.51, "firsts": 18.9, "name": "Wolfson", "wine": 39647.1}, {"tompkins": 73.66, "firsts": 41.7, "name": "Trinity", "wine": 223291.98}, {"tompkins": 64.85, "firsts": 21.1, "name": "Caius", "wine": 96994}, {"tompkins": 68.94, "firsts": 28.1, "name": "Trinity Hall", "wine": 127186}, {"tompkins": 65.84, "firsts": 25.1, "name": "St John's", "wine": 260064}, {"tompkins": 66.51, "firsts": 26.9, "name": "St Catharine's", "wine": 62432}, {"tompkins": 66.76, "firsts": 24.7, "name": "Christ's", "wine": 71055}, {"tompkins": 66.05, "firsts": 23.0, "name": "Downing", "wine": 77798}, {"tompkins": 62.92, "firsts": 18.5, "name": "Girton", "wine": 30051}, {"tompkins": 70.85, "firsts": 33.7, "name": "Pembroke", "wine": 141692}, {"tompkins": 64.59, "firsts": 21.6, "name": "Selwyn", "wine": 49498}, {"tompkins": 66.89, "firsts": 26.3, "name": "Queens'", "wine": 111112.64}, {"tompkins": 60.74, "firsts": 13.9, "name": "Murray Edwards", "wine": 32917}, {"tompkins": 65.0, "firsts": 22.8, "name": "Magdalene", "wine": 68192}, {"tompkins": 68.17, "firsts": 28.3, "name": "Churchill", "wine": 87685}, {"tompkins": 66.08, "firsts": 25.3, "name": "Clare", "wine": 79989}, {"tompkins": 60.33, "firsts": 16.0, "name": "Homerton", "wine": 27974.55}, {"tompkins": 68.72, "firsts": 30.5, "name": "Emmanuel", "wine": 131127}, {"tompkins": 67.47, "firsts": 27.1, "name": "Jesus", "wine": 212256}, {"tompkins": 66.41, "firsts": 27.8, "name": "Peterhouse", "wine": 82133}, {"tompkins": 64.94, "firsts": 23.9, "name": "Corpus Christi", "wine": 79254}, {"tompkins": 61.95, "firsts": 16.2, "name": "Robinson", "wine": 44722.39}, {"tompkins": 56.35, "firsts": 13.4, "name": "St Edmund's", "wine": 19304}]
<!DOCTYPE html>
<html>
<head>
<title>The d3 test</title>
<style>
.chart {
}
.main text {
font: 10px sans-serif;
}
.axis line, .axis path {
shape-rendering: crispEdges;
stroke: black;
fill: none;
}
circle {
fill: steelblue;
}
/* Style northward tooltips differently */
.d3-tip.n:after {
margin: -1px 0 0 0;
top: 100%;
left: 0;
}
.d3-tip {
line-height: 1;
font-weight: bold;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 2px;
}
/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
box-sizing: border-box;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: rgba(0, 0, 0, 0.8);
content: "\25BC";
position: absolute;
text-align: center;
}
</style>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.v2.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
</head>
<body>
<div class='content'>
<!-- /the chart goes here -->
</div>
<script type="text/javascript" src="plot.js"></script>
</body>
</html>
var margin = {top: 50, right: 15, bottom: 60, left: 60}
, width = 960 - margin.left - margin.right
, height = 500 - margin.top - margin.bottom;
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) {
return d.name;
});
var chart = d3.select('body')
.append('svg:svg')
.attr('width', width + margin.right + margin.left)
.attr('height', height + margin.top + margin.bottom)
.attr('class', 'chart')
chart.call(tip);
var main = chart.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
.attr('width', width)
.attr('height', height)
.attr('class', 'main')
d3.json("combined.json", function(data) {
var x = d3.scale.linear()
.domain([
0,
d3.max(data, function(d) { return d.wine; })
])
.range([ 0, width ]);
var y = d3.scale.linear()
.domain([
d3.min(data, function(d) { return d.tompkins; }),
d3.max(data, function(d) { return d.tompkins; })
])
.range([ height, 0 ]);
// draw the x axis
var xAxis = d3.svg.axis()
.scale(x)
.orient('bottom');
main.append('g')
.attr('transform', 'translate(0,' + height + ')')
.attr('class', 'main axis date')
.call(xAxis)
.append("text")
.attr("y", 0)
.attr("dy", "-.71em")
.attr("x", width)
.style("text-anchor", "end")
.text("Wine expenditure / £");
// draw the y axis
var yAxis = d3.svg.axis()
.scale(y)
.orient('left');
main.append('g')
.attr('transform', 'translate(0,0)')
.attr('class', 'main axis date')
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Tompkins score");
var g = main.append("svg:g");
console.log(tip);
g.selectAll("scatter-dots")
.data(data)
.enter()
.append("svg:circle")
.attr("cx", function (d,i) { return x(d.wine); } )
.attr("cy", function (d) { return y(d.tompkins); } )
.attr("r", 4)
.on('mouseover', tip.show)
.on('mouseout', tip.hide);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment