{
//this visualization will be square, so set height to width to keep it responsive
const height = width;
//create SVG artboard
const svg = d3.create("svg").attr("width", width).attr("height", height);
//background rectangle
svg
.append("rect")
.attr("width", width)
.attr("height", height)
.attr("fill", backgroundColor);
//calculate how big 2x2 quadrants should be
const quadrantSize = width / 2 - margin;
//draw 4 quadrants
svg
.append("rect")
.attr("width", quadrantSize)
.attr("height", quadrantSize)
.attr("x", margin)
.attr("y", margin)
.attr("fill", topLeftColor);
svg
.append("rect")
.attr("width", quadrantSize)
.attr("height", quadrantSize)
.attr("x", width / 2)
.attr("y", margin)
.attr("fill", topRightColor);
svg
.append("rect")
.attr("width", quadrantSize)
.attr("height", quadrantSize)
.attr("x", margin)
.attr("y", height / 2)
.attr("fill", bottomLeftColor);
svg
.append("rect")
.attr("width", quadrantSize)
.attr("height", quadrantSize)
.attr("x", width / 2)
.attr("y", height / 2)
.attr("fill", bottomRightColor);
//draw horizontal axis and terminals
svg
.append("line")
.attr("x1", margin)
.attr("y1", height / 2)
.attr("x2", width - margin)
.attr("y2", height / 2)
.attr("stroke", axisColor)
.attr("stroke-width", axisStrokeWidth);
svg
.append("circle")
.attr("cx", margin)
.attr("cy", height / 2)
.attr("r", terminalSize)
.attr("stroke", axisColor)
.attr("stroke-width", axisStrokeWidth)
.attr("fill", terminalFill);
svg
.append("circle")
.attr("cx", width - margin)
.attr("cy", height / 2)
.attr("r", terminalSize)
.attr("stroke", axisColor)
.attr("stroke-width", axisStrokeWidth)
.attr("fill", terminalFill);
//draw vertical axis and terminals
svg
.append("line")
.attr("y1", margin)
.attr("x1", height / 2)
.attr("y2", width - margin)
.attr("x2", height / 2)
.attr("stroke", axisColor)
.attr("stroke-width", axisStrokeWidth);
svg
.append("circle")
.attr("cy", margin)
.attr("cx", height / 2)
.attr("r", terminalSize)
.attr("stroke", axisColor)
.attr("stroke-width", axisStrokeWidth)
.attr("fill", terminalFill);
svg
.append("circle")
.attr("cy", width - margin)
.attr("cx", height / 2)
.attr("r", terminalSize)
.attr("stroke", axisColor)
.attr("stroke-width", axisStrokeWidth)
.attr("fill", terminalFill);
//axis labels
svg
.append("text")
.attr("x", margin - labelSpacing)
.attr("y", height / 2)
.attr("fill", labelColor)
.text(xAxisMinLabel)
.attr("dominant-baseline", "middle")
.attr("text-anchor", "end")
.attr("font-family", font)
.attr("font-size", fontSize);
svg
.append("text")
.attr("x", width - margin + labelSpacing)
.attr("y", height / 2)
.attr("fill", labelColor)
.text(xAxisMaxLabel)
.attr("dominant-baseline", "middle")
.attr("text-anchor", "start")
.attr("font-family", font)
.attr("font-size", fontSize);
svg
.append("text")
.attr("y", width - margin + labelSpacing)
.attr("x", height / 2)
.attr("fill", labelColor)
.text(yAxisMinLabel)
.attr("dominant-baseline", "hanging")
.attr("text-anchor", "middle")
.attr("font-family", font)
.attr("font-size", fontSize);
svg
.append("text")
.attr("y", margin - labelSpacing)
.attr("x", height / 2)
.attr("fill", labelColor)
.text(yAxisMaxLabel)
.attr("text-anchor", "middle")
.attr("font-family", font)
.attr("font-size", fontSize);
svg
.append("circle")
.attr("cy", x)
.attr("cx", y)
.attr("r", circleRadius)
.attr("fill", circleFill)
.attr("stroke", circleStroke)
.attr("stroke-width", circleStrokeWidth);
return svg.node();
}
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.
