Public
Edited
Oct 16, 2024
viewof circleStrokeWidth = Inputs.range ([1,20], {
label: "Circle Stoke Width",
step: "1",
value: "10",
})
viewof CircleRadius= Inputs.range ([1,50], {
label: "Circle Radius",
step: "1",
value: "10",
})
viewof circleStrokeColor = Inputs.color ({
label: "Circle Stroke Color",
value: "#ffffff"
})
viewof circleColor = Inputs.color ({
label: "Circle Color",
value: "#ffffff"
})
{
//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", margin + quadrantSize)
.attr("y", margin)
.attr("fill", topRightColor)
svg
.append("rect")
.attr("width", quadrantSize)
.attr("height", quadrantSize)
.attr("x", margin)
.attr("y", margin + quadrantSize)
.attr("fill", bottomLeftColor)
svg
.append("rect")
.attr("width", quadrantSize)
.attr("height", quadrantSize)
.attr("x", margin + quadrantSize)
.attr("y", margin + quadrantSize)
.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", axisStrokeColor)
.attr("stroke-width", axisStrokeWidth);
svg
.append("circle")
.attr("cx", margin)
.attr("cy", height / 2)
.attr("r", axisTerminalRadius)
.attr("stroke", axisStrokeColor)
.attr("stroke-width", axisStrokeWidth)
.attr("fill", axisTerminalColor);
svg
.append("circle")
.attr("cx", width - margin)
.attr("cy", height / 2)
.attr("r", axisTerminalRadius)
.attr("stroke", axisStrokeColor)
.attr("stroke-width", axisStrokeWidth)
.attr("fill", axisTerminalColor);
//draw vertical axis and terminals
svg
.append("line")
.attr("x1", margin + quadrantSize)
.attr("y1", margin)
.attr("x2", margin + quadrantSize)
.attr("y2", height - margin)
.attr("stroke", axisStrokeColor)
.attr("stroke-width", axisStrokeWidth);
svg
.append("circle")
.attr("cx", margin + quadrantSize)
.attr("cy", margin)
.attr("r", axisTerminalRadius)
.attr("stroke", axisStrokeColor)
.attr("stroke-width", axisStrokeWidth)
.attr("fill", axisTerminalColor);
svg
.append("circle")
.attr("cx", margin + quadrantSize)
.attr("cy", height - margin)
.attr("r", axisTerminalRadius)
.attr("stroke", axisStrokeColor)
.attr("stroke-width", axisStrokeWidth)
.attr("fill", axisTerminalColor);
//axis labels
svg
.append("text")
.attr("x", margin - labelSapcing)
.attr("y", margin + quadrantSize)
.attr("fill", labelColor)
.text(xAxisMinimunLabel)
.attr("dominant-baseline", "middle")
.attr("text-anchor", "end")
.attr("font-family", fontFamily)
.attr("font-size", fontSize);
svg
.append("text")
.attr("x", quadrantSize * 2 + margin + labelSapcing)
.attr("y", height / 2)
.attr("fill", labelColor)
.text(xAxisMaximumLabel)
.attr("dominant-baseline", "middle")
.attr("text-anchor", "start")
.attr("font-family", fontFamily)
.attr("font-size", fontSize);
svg
.append("text")
.attr("x", margin + quadrantSize)
.attr("y", height - margin + labelSapcing)
.attr("fill", labelColor)
.text(yAxisMinimunLabel)
.attr("dominant-baseline", "hanging")
.attr("text-anchor", "middle")
.attr("font-family", fontFamily)
.attr("font-size", fontSize);
svg
.append("text")
.attr("x", margin + quadrantSize)
.attr("y", margin - labelSapcing)
.attr("fill", labelColor)
.text(yAxisMaximumLabel)
.attr("dominant-baseline", "middle")
.attr("text-anchor", "middle")
.attr("font-family", fontFamily)
.attr("font-size", fontSize);
svg
.append("circle")
.attr("cx", x)
.attr("cy", y)
.attr("r", CircleRadius)
.attr("fill", circleColor)
.attr("stroke", circleStrokeColor)
.attr("stroke-width", axisStrokeWidth);
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.
