d3.area() .x(d => x(d.data.episode)) .y0(d => y(d[0])) .y1(d => y(d[1])) .curve(d3.curveBasis)
d3 .area() .x(dataPoint => xScale(dataPoint.year)) .y0(dataPoint => yScale(dataPoint.values[0])) .y1(dataPoint => yScale(dataPoint.values[1]))
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> ); }
_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); }
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)
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) .y1(function(d) { return y(d.count); });
.y0(d => yScale(d[1])) .y1(d => yScale(d[2]));
d3.area() .x(d => xScale(d[0])) .y0(chart.height / 2) .y1(d => yScale(d[1])) .curve(d3.curveBasis)
.x(d => areaX1(d.salary)) .y1(d => areaY1(d.width)) .y0(areaY1(0)) .curve(curveBasis);
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)