A React key gives each item in a rendered collection a stable identity, helping React track which DOM item to update when data changes. section 8.6.1
Keys in a scatterplot
Map over framework data and give every Circle a unique key, such as key={`circle-${framework.id}`}. Keep the key tied to the item’s identifier while scales calculate its position and color. section 8.6.1
Use keys when rendering repeated components:
- Map the dataset into one component per item. section 8.6.1
- Pass a unique value derived from the item, such as its id. section 8.6.1
- Assign keys to generated axis tick groups as well. section 8.6.1
Listing 8.10 Appending circles (ScatterplotReactControlled.js)
...
import * as d3 from 'd3'; #1
import Circle from '../ChartComponents/Circle';
const ScatterplotReactControlled = props => {
...
const xScale = d3.scaleLinear() #2
.domain([0, d3.max(props.data, d => d.user_count)])
.range([0, innerWidth])
.nice();
const yScale = d3.scaleLinear()
.domain([0, 100])
.range([innerHeight, 0]);
return (
<Card>
<h2>Retention vs Usage</h2>
<ChartContainer ... >
{props.data.map(framework => (
<Circle
key={`circle-${framework.id}`} #3
cx={xScale(framework.user_count)}
cy={yScale(framework.retention_percentage)}
r={6}
fill={props.colorScale(framework.id)}
/>
))}
</ChartContainer>
</Card>
)
};
export default ScatterplotReactControlled;
Inspect the complete scatterplot mapping, including the key assigned to each Circle. section 8.6.1
