render() { let maxRadius = 40 let xScale = d3.scaleLinear().domain([0, 1]).range([0, this.props.width]) let yScale = d3.scaleLinear().domain([0, 1]).range([0, this.props.height]) let rScale = d3.scaleLinear().domain([0, 1]).range([0, maxRadius]) let points = this.state.data.map(d => <circle cx={xScale(d.x)} cy={yScale(d.y)} r={rScale(d.r)} fill={colours[d.colour]} />) return <div> <svg width={this.props.width} height={this.props.height}>{points}</svg> <div><button onClick={this.handleClick}>Update</button></div> </div> }
_yScale() { const { scatterData } = this.state; const yExtent = d3.extent(scatterData, obj => obj.friends); const yScale = d3 .scaleLinear() .domain(yExtent) .range([0, 480]); return yScale; }
componentWillMount() { this.yScale = d3.scaleLinear(); this.updateD3(this.props); }
update(props) { this.x = d3.scaleLinear() .rangeRound([0,props.width.inner]); const bins = d3.histogram() .domain(this.x.domain()) .thresholds(this.x.ticks(20)) (props.data); this.y = d3.scaleLinear() .domain([0, d3.max(bins.map(d => d.length))]) .range([props.height.inner,0]); this.setState({ bins }); }
d3 .scaleLinear() .range([70, 10]) .domain([0, d3.max(stackedValues[stackedValues.length - 1], dp => dp[1])])
d3.scaleLinear() .domain([ d3.min(stack(seasons), d => d3.min(d, e => e[0])), d3.max(stack(seasons), d => d3.max(d, e => e[1])) ]) .range([this.height - (this.margin.bottom + this.margin.top + 30), 0])
_colorScale(selectedDay, currentDay) { const { csv } = this.state; const numExtent = d3.extent(csv, obj => parseInt(obj.number, 10)); const target = csv.find(obj => obj.day === currentDay); return selectedDay !== currentDay ? 'white' : d3 .scaleLinear() .interpolate(d3.interpolateHcl) .domain(numExtent) .range(['yellow', 'blue'])(parseInt(target.number, 10)); }
constructor(props) { super(); this.histogram = d3.histogram(); this.widthScale = d3.scaleLinear(); this.yScale = d3.scaleLinear(); this.updateD3(props); }
d3.scaleLinear() .range([ 0, (chart.width / 2) - (chart.margin.left + chart.margin.right), ]) .domain(d3.extent(sine, d => d[0]))
_xScale() { return d3 .scaleLinear() .domain([0, 5]) .range([0, 500]); }
_xScale() { return d3 .scaleLinear() .domain([0, 10]) .range([0, 500]); }
_xScale(x) { return d3 .scaleLinear() .domain([0, 10]) .range([0, 500])(x); }
_yScale() { return d3 .scaleLinear() .domain([0, 10]) .range([400, 0]); }
_intensityRamp(domainMax) { return d3 .scaleLinear() .domain([0, domainMax]) .range(['black', 'red']); }
constructor(props) { super(); this.histogram = d3.histogram(); this.widthScale = d3.scaleLinear(); this.yScale = d3.scaleLinear(); this.updateD3(props); }