forked from micahstubbs's block: horizontal boxplot
forked from Thanaporn-sk's block: horizontal boxplot
forked from anonymous's block: horizontal boxplot
license: CC0-1.0 |
forked from micahstubbs's block: horizontal boxplot
forked from Thanaporn-sk's block: horizontal boxplot
forked from anonymous's block: horizontal boxplot
day | min | max | median | q1 | q3 | number | |
---|---|---|---|---|---|---|---|
1 | 14 | 65 | 33 | 20 | 35 | 22 | |
2 | 25 | 73 | 25 | 25 | 30 | 170 | |
3 | 15 | 40 | 25 | 17 | 28 | 185 | |
4 | 18 | 55 | 33 | 28 | 42 | 135 | |
5 | 14 | 66 | 35 | 22 | 45 | 150 | |
6 | 22 | 70 | 34 | 28 | 42 | 170 | |
7 | 14 | 65 | 33 | 30 | 50 | 28 | |
9 | 23 | 100 | 200 | 30 | 40 | 152 |
<html> | |
<head> | |
<title>horizontal 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([0,100]) // 0% to 100% | |
.range([ | |
margin.left, | |
w - margin.right | |
]); | |
yScale = d3.scale.linear() | |
.domain([0,14]) | |
.range([ | |
h - margin.bottom - 5, | |
margin.top | |
]); | |
console.log(data); | |
xAxis = d3.svg.axis() | |
.scale(xScale) | |
.orient("bottom") | |
.ticks(10) | |
// .tickSize(-470) | |
.tickSubdivide(true); // deprecated, I know | |
d3.select("svg").append("g") | |
.attr("transform", "translate(23,470)") | |
.attr("id", "xAxisG") | |
.call(xAxis); | |
var days = data.map(function(d){return Number(d.day)}); | |
yAxis = d3.svg.axis() | |
.scale(yScale) | |
.orient("left") | |
.ticks(14); | |
// .tickSize(-470) | |
// .tickValues(days); | |
d3.select("svg").append("g") | |
.attr("transform", "translate(42,0)") | |
.attr("id", "yAxisG") | |
.call(yAxis); | |
d3.select("svg").selectAll("g.box") | |
.data(data) | |
.enter() | |
.append("g") | |
.attr("class", "box") | |
.attr("transform", function(d){ | |
return "translate(" + xScale(d.median) + "," + | |
yScale(d.day) + ")" | |
}) | |
.each(function(d,i){ | |
d3.select(this) | |
.append("line") | |
.attr("class", "range") | |
.attr("x1", xScale(d.max) - xScale(d.median)) | |
.attr("x2", xScale(d.min) - xScale(d.median)) | |
.attr("y1", 0) | |
.attr("y2", 0) | |
.style("stroke", "black") | |
.style("stroke-width", "4px"); | |
d3.select(this) | |
.append("line") | |
.attr("class", "max") | |
.attr("x1", xScale(d.max) - xScale(d.median)) | |
.attr("x2", xScale(d.max) - xScale(d.median)) | |
.attr("y1", -10) | |
.attr("y2", 10) | |
.style("stroke", "black") | |
.style("stroke-width", "4px"); | |
d3.select(this) | |
.append("line") | |
.attr("class", "min") | |
.attr("x1", xScale(d.min) - xScale(d.median)) | |
.attr("x2", xScale(d.min) - xScale(d.median)) | |
.attr("y1", -10) | |
.attr("y2", 10) | |
.style("stroke", "black") | |
.style("stroke-width", "4px"); | |
d3.select(this) | |
.append("rect") | |
.attr("class", "range") | |
.attr("x", xScale(d.q1) - xScale(d.median)) | |
.attr("y", -10) | |
.attr("height", 20) | |
.attr("width", xScale(d.q3) - xScale(d.q1)) | |
.style("fill", "white") | |
.style("stroke", "black") | |
.style("stroke-width", "2px"); | |
d3.select(this) | |
.append("line") | |
.attr("x1", 0) | |
.attr("x2", 0) | |
.attr("y1", -10) | |
.attr("y2", 10) | |
.style("stroke", "darkgray") | |
.style("stroke-width", "4px"); | |
}) | |
d3.select("svg").selectAll("circle.median") | |
.data(data) | |
.enter() | |
.append("circle") | |
.attr("class", "tweets") | |
.attr("r", 5) | |
.attr("cx", function(d) {return xScale(d.median);}) | |
.attr("cy", function(d) {return yScale(d.day)}); | |
} | |
</script> | |
</footer> | |
</html> |