function createGenerator(props, generator?: Area): Area { generator = generator || d3.area(); return args.reduce((acc: Area, arg) => { const prop = props[arg]; if (prop) { return acc[arg](prop); } return acc; }, generator); }
// 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 }; }
series .append("path") .attr("clip-path","url(#ellipse-clip)") .style("fill", this.props.ringData.colorA) .attr("stroke", this.props.ringData.colorB) .attr("opacity", 0.2) .attr("stroke-width", 1.5) .attr("d", d => area(d))
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)) }}) }
// 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 }; }
.keys(Object.keys(stackData[0])) const stackArea = area() .x((d, i) => xScale(i)) .y0(d => yScale(d[0]))
const brush_area = area() .curve(curveMonotoneX) .x(function(d) { return x_brush(d.date); })
}); const salaryArea = area() .x(d => areaX1(d.salary)) .y1(d => areaY1(d.width))
function createGenerator(props, generator?: Area): Area { generator = generator || d3.area(); return args.reduce((acc: Area, arg) => { const prop = props[arg]; if (prop) { return acc[arg](prop); } return acc; }, generator); }