A scatter plot places data points on coordinate axes to visualize relationships between variables. In D3, it emerges from assembling reusable building blocks: axes, scales, bound data, and circles. section 4.2
Plotting temperature data
Bind temperature records to circles, map each date through an x-scale, map each average temperature through a y-scale, and give every point a consistent radius and color. section 4.2
const aubergine = "#75485E";
innerChart
.selectAll("circle") #1
.data(data)
.join("circle")
.attr("r", 4)
.attr("cx", d => xScale(d.date)) #2
.attr("cy", d => yScale(d.avg_temp_F))
.attr("fill", aubergine);
This implementation shows the essential pattern: join data to circles, then derive horizontal and vertical positions from scale accessors. section 4.2
Extend a scatter plot by encoding more variables and responding to data changes:
- Represent a third variable with circle area and another with color. section 7.4
- Filter the dataset and animate circles entering or exiting the visualization. section 7.4
- Let D3 control the visualization’s portion of a frontend application DOM. section 8.5
