vertical boxplot

forked from micahstubbs's block: vertical boxplot

forked from anonymous's block: vertical boxplot

forked from jzgit's block: vertical boxplot

forked from A6Brgeuka's block: vertical boxplot

<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;
  background: #3de7b3;
}

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 = 300,
      w = 619;

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){ return d.day })) + 15
    ])
    .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(-370)
    .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){return Number(d.day)});

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")

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", "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", "#76eeca")
        .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", "#76eeca")
        .style("stroke-width", "1px");

d3.select(this)
        .append("rect")
        .attr("class", "range")
        .attr("width", 8)
        .attr("x", 0)
        .attr("y", yScale(d.q3) - yScale(d.median))
        .attr('rx', 4)
      	.attr('ry', 4)
        .attr("height", yScale(d.q1) - yScale(d.q3))
        .style("fill", "#76eeca")

d3.select(this)
        .append("circle")
        .attr("cx", 4)
        .attr("cy", 0)
        .attr("r", 4)
        .style("fill", "white")
        .style("stroke-width", "1px");
    
    })
  
  
}

</script>
  </footer>

</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js