d3 .line() .x(d => xScale(d.day)) .y(d => yScale(d.favorites))
render() { const median = this.props.median || d3.median(this.props.data, this.props.value), line = d3.line()([[0, 5], [this.props.width, 5]]), tickFormat = this.yScale.tickFormat(); const translate = `translate(${this.props.x}, ${this.yScale(median)})`, medianLabel = `Median Household: $${tickFormat(median)}`; return ( <g className='mean' transform={translate}> <text x={this.props.width-5} y='0' textAnchor='end'> {medianLabel} </text> <path d={line}></path> </g> ) }
constructor(props) { super(props); this.margin = { top: 20, right: 20, bottom: 50, left: 0 }; this.renderingWidth = this.props.graphWidth - this.margin.left - this.margin.right; this.renderingheight = this.props.graphHeight - this.margin.top - this.margin.bottom; this.x = d3.scaleTime() .range([0, this.renderingWidth]); this.y = d3.scaleLinear() .rangeRound([this.renderingheight, 0]); this.line = d3.line() .x(d => this.x(d.date)) .y(d => this.y(d.price)); }
d3.line() .x(x) .y(d => linear(weierstrass(d)))
.attr("stroke", "rgb(63,81,181)") .attr("stroke-width", 1.8) .attr("d", d3.line() .x(function(d) { return x(d.build) }) .y(function(d) { return y(d.size) })
render() { const median = this.props.median || d3.median(this.props.data, this.props.value), line = d3.line()([[0, 5], [this.props.width, 5]]); const translate = `translate(${this.props.x}, ${this.yScale(median)})`, medianLabel = `Median Household: $${this.yScale.tickFormat()(median)}`; return ( <g className="mean" transform={translate}> <text x={this.props.width-5} y="0" textAnchor="end"> {medianLabel} </text> <path d={line}></path> </g> ); }
d3.line() .x(d => xScale(d[0])) .y(d => yScale(d[1]))
d3 .line() .x(d => xScale(d.day)) .y(d => yScale(d.tweets))
.attr("stroke", "rgb(63,81,181)") .attr("stroke-width", 1.8) .attr("d", d3.line() .x(function(d) { return x(d.build) }) .y(function(d) { return y(d.time) })
d3 .line() .x(d => xScale(d.day)) .y(d => yScale(d.retweets))