javascript - D3 js BoxPlot with already calculated data -

i need make d3 boxplot. have dataset several billions of rows, , unfeasible send raw data client. so, created api , send summarized version containing max/min/std_dev values of each column.

in examples ( one two ) saw using d3 boxplot, data summarization done on client side (the opposite of case).

is possible use boxplot calculated data? have example?

well, since getting calculated data, task here easier!

first, let's set scales. in data copy/pasted in comment have max , min, i'll use third , first quartiles. since don't have second quartile (median) in data, i'll use mean. also, data have 3 identical objects, change little bit, make boxes different.

so, setting y scale:

var yscale = d3.scalelinear()     .domain([0, d3.max(data, function(d) {         return d.max     }) * 1.1])     .range([h - padding, padding]); 

which standard linear scale.

for x scale, i'm using band scale:

var xscale = d3.scaleband()     .domain(data.map(function(d) {         return d.label     }))     .range([padding, w - padding])     .padding(0.4); 

which give left , right limits of rectangles.

now, it's matter of printing rectangles , lines (the medians).

for rectangles, notice math third quartile top of rectangle, , first quartile height (y , 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, lines, use mean both y1 , 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 demo 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 have data whiskers, can add code creating lines basic structure, following same principle.