forked from micahstubbs's block: vertical boxplot
forked from anonymous's block: vertical boxplot
forked from micahstubbs's block: vertical boxplot
forked from anonymous's block: vertical boxplot
day | min | max | median | q1 | q3 | |
---|---|---|---|---|---|---|
1 | -2 | 2 | 0 | -.4 | .5 | |
2 | -2 | 2 | 0 | -.4 | .5 | |
3 | -2 | 2 | 0 | -.4 | .5 | |
4 | -2 | 2 | 0.2 | -.4 | .5 | |
5 | -2 | 2 | 0.2 | -.4 | .5 | |
6 | -2 | 2 | 0.2 | -.4 | .5 | |
7 | -2 | 2 | 0.2 | -.4 | .5 | |
8 | -2 | 2 | 0.2 | -.4 | .5 | |
9 | -2 | 2 | 0.2 | -.4 | .5 | |
10 | -2 | 2 | 0.2 | -.4 | .5 | |
11 | -2 | 2 | 0.2 | -.4 | .5 | |
12 | -2 | 2 | 0.2 | -.4 | .5 |
<html> | |
<head> | |
<title>vertical boxplot</title> | |
<meta charset="utf-8" /> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" type="text/JavaScript"></script> | |
</head> | |
<style> | |
svg { | |
border: 1px solid gray; | |
} | |
line { | |
shape-rendering: crispEdges; | |
stroke: #000000; | |
} | |
line.minor { | |
stroke: #777777; | |
stroke-dasharray: 2,2; | |
} | |
path.domain { | |
fill: none; | |
stroke: black; | |
} | |
</style> | |
<body> | |
</body> | |
<script> | |
d3.csv("data.csv", boxplot) | |
function boxplot(data){ | |
var h = 500, | |
w = 500; | |
var margin = { | |
'top': 20, | |
'bottom': 20, | |
'left': 20, | |
'right': 30 | |
} | |
d3.select("body").append("svg") | |
.attr("height", h) | |
.attr("width", w); | |
xScale = d3.scale.linear() | |
.domain([ | |
d3.min(data, function(d){ return d.day }), | |
Number(d3.max(data, function(d,i){ return d.day })) + 1 | |
]) | |
.range([ | |
margin.left, | |
w - margin.right | |
]); | |
yScale = d3.scale.linear() | |
.domain([-2,2]) // 0% to 100% | |
.range([ | |
h - margin.bottom, | |
margin.top | |
]); | |
console.log(data); | |
yAxis = d3.svg.axis() | |
.scale(yScale) | |
.orient("right") | |
.ticks(8) | |
.tickSize(-470) | |
.tickSubdivide(true); // deprecated, I know | |
d3.select("svg").append("g") | |
.attr("transform", "translate(470,0)") | |
.attr("id", "yAxisG") | |
//.call(yAxis); | |
var days = data.map(function(d, i){return Number(d.day) + i}); | |
xAxis = d3.svg.axis() | |
.scale(xScale) | |
.orient("bottom") | |
.tickSize(-470) | |
.tickValues(days); | |
d3.select("svg").append("g") | |
.attr("transform", "translate(0,480)") | |
.attr("id", "xAxisG") | |
// .call(xAxis); | |
// d3.select("svg").selectAll("circle.median") | |
// .data(data) | |
// .enter() | |
// .append("circle") | |
// .attr("class", "tweets") | |
// .attr("r", 5) | |
// .attr("cx", function(d) {return xScale(d.day)}) | |
// .attr("cy", function(d) {return yScale(d.median)}) | |
// .style("fill", "blue"); | |
d3.select("svg").selectAll("g.box") | |
.data(data) | |
.enter() | |
.append("g") | |
.attr("class", "box") | |
.attr("transform", function(d){ | |
return "translate(" + xScale(d.day) + "," + | |
yScale(d.median) + ")" | |
}) | |
.each(function(d,i){ | |
// d3.select(this) | |
// .append("line") | |
// .attr("class", "range") | |
// .attr("x1", 0) | |
// .attr("x2", 0) | |
// .attr("y1", yScale(d.max) - yScale(d.median)) | |
// .attr("y2", yScale(d.min) - yScale(d.median)) | |
// .style("stroke", "black") | |
// .style("stroke-width", "1px"); | |
d3.select(this) | |
.append("line") | |
.attr("class", "max") | |
.attr("x1", -10) | |
.attr("x2", 10) | |
.attr("y1", yScale(d.max) - yScale(d.median)) | |
.attr("y2", yScale(d.max) - yScale(d.median)) | |
.style("stroke", "black") | |
.style("stroke-width", "1px"); | |
d3.select(this) | |
.append("line") | |
.attr("class", "min") | |
.attr("x1", -10) | |
.attr("x2", 10) | |
.attr("y1", yScale(d.min) - yScale(d.median)) | |
.attr("y2", yScale(d.min) - yScale(d.median)) | |
.style("stroke", "black") | |
.style("stroke-width", "1px"); | |
d3.select(this) | |
.append("rect") | |
.attr("class", "range") | |
.attr("width", 11) | |
.attr("x", -10) | |
.attr("y", yScale(d.q3) - yScale(d.median)) | |
.attr("height", yScale(d.q1) - yScale(d.q3)) | |
.style("fill", "white") | |
.style("stroke", "black") | |
.style("stroke-width", "3.52px"); | |
d3.select(this) | |
.append("line") | |
.attr("x1", -10) | |
.attr("x2", 10) | |
.attr("y1", 0) | |
.attr("y2", 0) | |
.style("stroke", "black") | |
.style("stroke-width", "1px"); | |
}) | |
} | |
</script> | |
</footer> | |
</html> |