Skip to content

Instantly share code, notes, and snippets.

@harukihill

harukihill/.block

Last active June 10, 2017 00:43
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 harukihill/0f7b423f7a4d796bf08eae5cd1e2fae0 to your computer and use it in GitHub Desktop.
Save harukihill/0f7b423f7a4d796bf08eae5cd1e2fae0 to your computer and use it in GitHub Desktop.
Download ZIP
Freethrows
Raw
.block
license: mit
Raw
Freethrows.csv
Made P(Made) n Mean SE T-Stat ME Confint
8 0.8 32 7.313 0.078 2.040 0.160 5.714
6 0.6 8.911
10 1
6 0.6
5 0.5
9 0.9
8 0.8
9 0.9
7 0.7
6 0.6
6 0.6
4 0.4
8 0.8
7 0.7
6 0.6
5 0.5
7 0.7
7 0.7
6 0.6
7 0.7
7 0.7
9 0.9
8 0.8
10 1
9 0.9
8 0.8
9 0.9
7 0.7
6 0.6
7 0.7
8 0.8
9 0.9
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
rect.bar {fill:steelblue;}
#title {font-size: 20px;
font-family: sans-serif;
font-weight: 200;
text-align: center;}
#Axis {font-size: 12px}
</style>
</head>
<body>
<h1 id="title">Histogram of Freethrows Made (out of 10 attempts)</h1>
<script>
var margin = {top:20, bottom:20, left:40, right:20};
var height = 450 - margin.top - margin.bottom;
var width = 600 - margin.left - margin.right;
var barPadding = 2
var dataset;
var svg = d3.select("body")
.append("svg")
.attr("height",height + margin.top + margin.bottom)
.attr("width", width + margin.left + margin.right);
d3.csv("Freethrows.csv", function(error, data){
data.forEach(function(d){
d.made = +d.Made,
d.prob = +d["P(Made)"]
d.mean = +d.Mean
});
var xScale = d3.scaleLinear()
.domain([d3.min(data,function(d){return d.made;}),d3.max(data,function(d){return d.made;}) + 1])
.range([margin.left,width - margin.right]);
var yScale = d3.scaleLinear()
.range([height - margin.bottom,margin.top]);
var histogram = d3.histogram()
.value(function(d){return d.Made;})
.domain(xScale.domain())
.thresholds(xScale.ticks(6));
var bins = histogram(data);
yScale.domain([0,d3.max(bins, function(d){return d.length;})]);
var bars = svg.selectAll("rect")
.data(bins)
.enter()
.append("rect")
.attr("class", "bar")
.attr("x",1)
.attr("transform", function(d) {
return "translate(" + xScale(d.x0) + "," + yScale(d.length) + ")"; })
.attr("width", function(d) { return xScale(d.x1) - xScale(d.x0) - barPadding ;})
.attr("height", function(d) { return height - margin.top - yScale(d.length);});
svg.append("g")
.attr("transform", "translate(0," + (height - margin.bottom) + ")")
.attr("id", "Axis")
.call(d3.axisBottom(xScale));
svg.append("g")
.attr("transform", "translate(" + (margin.left - 5) + "," + 0 + ")")
.attr("id", "Axis")
.call(d3.axisLeft(yScale));
svg.selectAll("line")
.data(data)
.enter()
.append("line")
.style("stroke", "black")
.attr("x1", function(d,i){return xScale(7.31);})
.attr("x2", function(d){return xScale(7.31);})
.attr("y1", height)
.attr("y2", 0);
})
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment