md ` # Chapter 2
Making a scatterplot! Joins, circles, axes, oh my!`
html `<div id="wrapper"></div>`
data = [
{x:1, y:1},
{x:2, y:2},
{x:3, y:3},
{x:4, y:4},
{x:5, y:5}
]
xAccessor = d => d.x
yAccessor = d => d.y
width = d3.min([
500,
500
])
dimensions = [
{
width: width,
height: width,
margin: {
top: 10,
right: 10,
bottom: 50,
left: 50,
}, }
]
dimensions.boundedWidth = dimensions[0].width
- dimensions[0].margin.left
- dimensions[0].margin.right
dimensions.boundedHeight = dimensions[0].height
- dimensions[0].margin.top
- dimensions[0].margin.bottom
wrapper = d3.select("#wrapper") .append("svg")
.attr("width", dimensions[0].width)
.attr("height", dimensions[0].height)
bounds = wrapper.append("g") .style("transform", `translate(${
dimensions[0].margin.left
}px, ${ dimensions[0].margin.top
}px)`)
xScale = d3.scaleLinear()
.domain(d3.extent(data, xAccessor))
.range([0, dimensions.boundedWidth])
.nice()
yScale = d3.scaleLinear()
.domain(d3.extent(data, yAccessor))
.range([dimensions.boundedHeight, 0])
.nice()
dots = bounds.selectAll("circle") .data(data)
.enter().append("circle")
.attr("cx", d => xScale(xAccessor(d)))
.attr("cy", d => yScale(yAccessor(d)))
.attr("r", 5)
.attr("fill", d => colorScale(colorAccessor(d)))
xAxisGenerator = d3.axisBottom() .scale(xScale)
xAxis = bounds.append("g") .call(xAxisGenerator)
.style("transform", `translateY(${dimensions.boundedHeight}px)`)
xAxisLabel = xAxis.append("text")
.attr("x", dimensions.boundedWidth / 2)
.attr("y", dimensions[0].margin.bottom - 10)
.attr("fill", "black")
.style("font-size", "1.4em")
.html("Dew point (°F)")
yAxisGenerator = d3.axisLeft() .scale(yScale)
.ticks(4)
yAxis = bounds.append("g") .call(yAxisGenerator)
yAxisLabel = yAxis.append("text")
.attr("x", -dimensions.boundedHeight / 2)
.attr("y", -dimensions[0].margin.left + 10)
.attr("fill", "black")
.style("font-size", "1.4em")
.text("Relative humidity")
.style("transform", "rotate(-90deg)")
.style("text-anchor", "middle")
colorAccessor = d => d.y
colorScale = d3.scaleLinear()
.domain(d3.extent(data, colorAccessor))
.range(["skyblue", "darkslategrey"])
d3 = require("d3@5")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
