export default function Distribution({values, width = 320, height = 120}) { const abscisa = linear().domain([0, 1]).range([0, width]); const hist = histogram().domain(abscisa.domain()).thresholds(abscisa.ticks(20)); const bins = hist(values); const ordinata = linear().domain([0, max(bins, b => b.length)]).range([height, 0]); const distribution = area().x(b => abscisa(b.x0)).y1(b => ordinata(b.length)).y0(height).curve(basis); return ( <article> <svg width={width} height={height}> <path fill="rgba(0, 0, 255, 0.6)" d={distribution(bins)} /> </svg> </article> ); }
const rendergraph = ({svg, width, height, brush_height, data}) => { const x_focus = scaleTime().range([0, width]), x_brush = scaleTime().range([0, width]), y_focus = scaleLinear().range([height, 0]); x_focus.domain(extent(data, function(d) { return d.date; })); x_brush.domain(x_focus.domain()); y_focus.domain([0, max(data, function(d) { return d.count; })]); const x_focus_axis = axisBottom(x_focus), y_focus_axis = axisLeft(y_focus); const focus_area = area() .curve(curveMonotoneX) .x(function(d) { return x_focus(d.date); }) .y0(height) .y1(function(d) { return y_focus(d.count); }); const brush_overlay = brushgraph({data, width, brush_height, x_brush, x_focus, x_focus_axis, focus_area, svg}) zoomgraph({data, width, height, x_focus, x_brush, x_focus_axis, y_focus_axis, focus_area, svg, brush_zoom: (svg,t) => { const brush = svg.select('.brush') brush.call(brush_overlay.move, x_brush.range().map(t.invertX, t)) }}) }
render() { const {className, data, x, y0, y1, ...props} = this.props; const area = d3.area() .x(x) .y0(y0) .y1(y1); return ( <path {...props} className={cx('area', className)} d={area(data)} /> ); }
// method that transforms data into a svg path (should be exposed as part of the AreaSpline interface) _createArea() { var that = this; var area = d3.shape.area() .x(function(d, index) { return that._Xvalue(d, index); }) .y1(function(d, index) { return that._Yvalue(d, index); }) .curve(d3.shape.curveNatural) (this.props.data) // console.debug(`area: ${JSON.stringify(area)}`); return { path : area }; }