d3.area() .x(d => x(d.data.episode)) .y0(d => y(d[0])) .y1(d => y(d[1])) .curve(d3.curveBasis)
_stackArea(value) { const { _xScale, _yScale } = this; return d3 .area() .curve(d3.curveBasis) .x(d => _xScale(d.data.day)) .y0(d => _yScale(d[0])) .y1(d => _yScale(d[1]))(value); }
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> ); }
// method that transforms data into a svg path (should be exposed as part of the AreaSpline interface) _createArea() { const area = d3.shape.area() .x((d) => this.scaleX(moment(d[0]).toDate()) ) .y1((d) => -this.scaleY(d[1]) ) .curve(d3.shape.curveBasis) (this.data) return { path : area }; }
const movieArea = name => d3 .area() .x(d => xScale(d.day)) .y1(d => yScale(simpleStacking(d, name))) .y0(d => yScale(simpleStacking(d, name) - parseInt(d[name], 10))) .curve(d3.curveBasis)
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)) }}) }
.y0(d => yScale(d[0])) .y1(d => yScale(d[1])) .curve(curveBasis)
.curve(curveMonotoneX) .x(function(d) { return x_brush(d.date); }) .y0(brush_height)
// 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 }; }
.y1(d => areaY1(d.width)) .y0(areaY1(0)) .curve(curveBasis);
const movieStream = (name, i) => d3 .area() .x(d => xStreamScale(d.day)) .y1(d => yStreamScale(streamStacking(d, name, 'top', i))) .y0(d => yStreamScale(streamStacking(d, name, 'bottom', i))) .curve(d3.curveBasis)
d3.area() .x(d => xScale(d[0])) .y0(chart.height / 2) .y1(d => yScale(d[1])) .curve(d3.curveBasis)