text: Q:
  
  D3 js BoxPlot with already calculated data
  
  I need to make a D3 BoxPlot. 
  I have a dataset with several billions of rows, and it is unfeasible to send the raw data to the client. So, I created an API and I send only the summarized version containing the max/min/std_dev values of each column.
  In all the examples ( one two ) I saw using D3 BoxPlot, the data summarization is done on the client side (the opposite of my case).
  Is it possible to use the BoxPlot with already calculated data? Does anyone have an example?
  
  A:
  
  Well, since you are getting the already calculated data, the task here is even easier!
  First, let's set the scales. In the data you copy/pasted in your comment you have max and min, which I'll use for the third and first quartiles. Since you don't have the second quartile (median) in your data, I'll use mean. Also, as your data have 3 identical objects, I change it a little bit, to make the boxes different.
  So, setting the y scale:
  var yScale = d3.scaleLinear()
      .domain([0, d3.max(data, function(d) {
          return d.max
      }) * 1.1])
      .range([h - padding, padding]);
  
  Which is a standard linear scale.
  For the x scale, I'm using a band scale:
  var xScale = d3.scaleBand()
      .domain(data.map(function(d) {
          return d.label
      }))
      .range([padding, w - padding])
      .padding(0.4);
  
  Which is very good to give us the left and right limits of the rectangles.
  Now, it's just a matter of printing the rectangles and the lines (the medians).
  For the rectangles, notice the math to get the third quartile as the top of the rectangle, and the first quartile as its height (y and height attributes):
  var boxes = svg.selectAll("foo")
      .data(data)
      .enter()
      .append("rect")
      .attr("fill", "none")
      .attr("stroke", "black")
      .attr("x", function(d) {
          return xScale(d.label)
      })
      .attr("width", xScale.bandwidth())
      .attr("y", function(d) {
          return yScale(d.max)
      })
      .attr("height", function(d) {
          return yScale(d.min) - yScale(d.max)
      });
  
  And, finally, for the lines, we just use mean for both y1 and y2 values:
  var lines = svg.selectAll("foo")
      .data(data)
      .enter()
      .append("line")
      .attr("stroke", "black")
      .attr("stroke-width", 4)
      .attr("x1", function(d) {
          return xScale(d.label)
      })
      .attr("x2", function(d) {
          return xScale(d.label) + xScale.bandwidth()
      })
      .attr("y1", function(d) {
          return yScale(d.mean)
      })
      .attr("y2", function(d) {
          return yScale(d.mean)
      })
  
  Here is a demo with your data structure:
  
  var data = [{
    "count": "2",
    "min": "1.6",
    "max": "4.1",
    "label": "labelA",
    "stddev": "0.72",
    "mean": "3.1"
  }, {
    "count": "2",
    "min": "1.1",
    "max": "2.9",
    "label": "labelB",
    "stddev": "0.72",
    "mean": "2.2"
  }, {
    "count": "2",
    "min": "2.4",
    "max": "3.6",
    "label": "labelC",
    "stddev": "0.72",
    "mean": "2.7"
  }];
  
  var w = 500,
    h = 200,
    padding = 30,
    padding2 = 20;
  
  var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h);
  
  var yScale = d3.scaleLinear()
    .domain([0, d3.max(data, function(d) {
      return d.max
    }) * 1.1])
    .range([h - padding2, 10]);
  
  var xScale = d3.scaleBand()
    .domain(data.map(function(d) {
      return d.label
    }))
    .range([padding, w - padding])
    .padding(0.4);
  
  var xAxis = d3.axisBottom(xScale);
  var yAxis = d3.axisLeft(yScale);
  
  var gX = svg.append("g")
    .attr("transform", "translate(0," + (h - padding2) + ")")
    .call(xAxis);
  
  var gY = svg.append("g")
    .attr("transform", "translate(" + padding + ",0)")
    .call(yAxis);
  
  var boxes = svg.selectAll("foo")
    .data(data)
    .enter()
    .append("rect")
    .attr("fill", "none")
    .attr("stroke", "black")
    .attr("x", function(d) {
      return xScale(d.label)
    })
    .attr("width", xScale.bandwidth())
    .attr("y", function(d) {
      return yScale(d.max)
    })
    .attr("height", function(d) {
      return yScale(d.min) - yScale(d.max)
    });
  
  var lines = svg.selectAll("foo")
    .data(data)
    .enter()
    .append("line")
    .attr("stroke", "black")
    .attr("stroke-width", 4)
    .attr("x1", function(d) {
      return xScale(d.label)
    })
    .attr("x2", function(d) {
      return xScale(d.label) + xScale.bandwidth()
    })
    .attr("y1", function(d) {
      return yScale(d.mean)
    })
    .attr("y2", function(d) {
      return yScale(d.mean)
    })
  <script src="https://d3js.org/d3.v4.min.js"></script>
  
  PS: Once you have the data for the whiskers, you can simply add the code for creating the lines to this basic structure, following the same principle.
  
  