horizontal boxplot

forked from micahstubbs's block: horizontal boxplot

forked from Thanaporn-sk's block: horizontal boxplot

forked from anonymous's block: horizontal boxplot

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

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