chart = {
const context = DOM.context2d(width, height);
context.fillStyle = "#F5F5F5";
context.fillRect(0, 0, width, height);
const area = d3.area()
.x0(d => x(-d.length))
.x1(d => x(d.length))
.y(d => y(d.x0))
.curve(d3.curveBasis)
.context(context);
context.strokeStyle = "blue";
//context.fillStyle = "lightblue";
context.lineWidth = 2;
context.beginPath();
area(bins);
//context.fill();
context.stroke();
return context.canvas;
}
console.log(JSON.stringify(data.slice(0, 20)))
y = d3.scaleLinear().domain(d3.extent(data, d => d['Weight_in_lbs'])).range([height, 0])
histogram = d3.histogram()
.value((d) => d['Weight_in_lbs'])
.thresholds(y.ticks(12))
.domain(y.domain());
x = d3.scaleLinear().domain([-binsMax, binsMax]).range([width/4, 3*width/4]);
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
