Edit Scatter Plot

Name

Also known as (comma separated)

Brief definition Individual data points showing relationships.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "correlation", "type": "select", "label": "Correlation", "default": "positive", "options": [ "positive", "negative", "none" ] }, { "id": "pointSize", "type": "number", "label": "Point radius", "default": 3.5, "min": 2, "max": 6, "step": 0.5 }, { "id": "showTrendLine", "type": "toggle", "label": "Show trend line", "default": true }, { "id": "accent", "type": "color", "label": "Point colour", "default": "#F5C2E0", "presets": [ "#F5C2E0", "#A8E6C1", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] } ]

Templates (JSON object keyed by format) { "html": "<figure class=\"scatter-plot scatter-plot--{{correlation}}\" style=\"--accent:{{accent}};--r:{{pointSize}};\" role=\"img\" aria-label=\"Scatter plot showing a {{correlation}} correlation between score X and score Y across 8 points\">\n <svg class=\"scatter-plot__svg\" viewBox=\"0 0 140 122\" xmlns=\"http://www.w3.org/2000/svg\">\n <g aria-hidden=\"true\">\n <line class=\"scatter-plot__grid\" x1=\"20\" y1=\"10\" x2=\"20\" y2=\"100\"></line>\n <line class=\"scatter-plot__grid\" x1=\"20\" y1=\"100\" x2=\"130\" y2=\"100\"></line>\n <text class=\"scatter-plot__tick\" x=\"16\" y=\"103\">0</text>\n <text class=\"scatter-plot__tick\" x=\"16\" y=\"58\">50</text>\n <text class=\"scatter-plot__tick\" x=\"16\" y=\"14\">100</text>\n <text class=\"scatter-plot__tick\" x=\"20\" y=\"112\">0</text>\n <text class=\"scatter-plot__tick\" x=\"75\" y=\"112\">50</text>\n <text class=\"scatter-plot__tick\" x=\"127\" y=\"112\">100</text>\n <text class=\"scatter-plot__axistitle\" x=\"6\" y=\"8\">Y (pts)</text>\n <text class=\"scatter-plot__axistitle\" x=\"75\" y=\"119\">X (pts)</text></g>\n <g class=\"scatter-plot__series scatter-plot__series--positive\"><circle class=\"sp-point scatter-plot__point--positive\" cx=\"30\" cy=\"88\"></circle>\n <circle class=\"sp-point scatter-plot__point--positive\" cx=\"45\" cy=\"78\"></circle>\n <circle class=\"sp-point scatter-plot__point--positive\" cx=\"55\" cy=\"70\"></circle>\n <circle class=\"sp-point scatter-plot__point--positive\" cx=\"68\" cy=\"64\"></circle>\n <circle class=\"sp-point scatter-plot__point--positive\" cx=\"80\" cy=\"52\"></circle>\n <circle class=\"sp-point scatter-plot__point--positive\" cx=\"92\" cy=\"44\"></circle>\n <circle class=\"sp-point scatter-plot__point--positive\" cx=\"105\" cy=\"32\"></circle>\n <circle class=\"sp-point scatter-plot__point--positive\" cx=\"118\" cy=\"22\"></circle>\n {{#if showTrendLine}}<polyline class=\"scatter-plot__trend\" points=\"28,90 120,20\"></polyline>{{/if}}\n </g>\n <g class=\"scatter-plot__series scatter-plot__series--negative\"><circle class=\"sp-point scatter-plot__point--negative\" cx=\"30\" cy=\"22\"></circle>\n <circle class=\"sp-point scatter-plot__point--negative\" cx=\"45\" cy=\"30\"></circle>\n <circle class=\"sp-point scatter-plot__point--negative\" cx=\"55\" cy=\"40\"></circle>\n <circle class=\"sp-point scatter-plot__point--negative\" cx=\"68\" cy=\"48\"></circle>\n <circle class=\"sp-point scatter-plot__point--negative\" cx=\"80\" cy=\"58\"></circle>\n <circle class=\"sp-point scatter-plot__point--negative\" cx=\"92\" cy=\"66\"></circle>\n <circle class=\"sp-point scatter-plot__point--negative\" cx=\"105\" cy=\"76\"></circle>\n <circle class=\"sp-point scatter-plot__point--negative\" cx=\"118\" cy=\"86\"></circle>\n {{#if showTrendLine}}<polyline class=\"scatter-plot__trend\" points=\"28,20 120,90\"></polyline>{{/if}}\n </g>\n <g class=\"scatter-plot__series scatter-plot__series--none\"><circle class=\"sp-point scatter-plot__point--none\" cx=\"30\" cy=\"50\"></circle>\n <circle class=\"sp-point scatter-plot__point--none\" cx=\"45\" cy=\"75\"></circle>\n <circle class=\"sp-point scatter-plot__point--none\" cx=\"55\" cy=\"30\"></circle>\n <circle class=\"sp-point scatter-plot__point--none\" cx=\"68\" cy=\"60\"></circle>\n <circle class=\"sp-point scatter-plot__point--none\" cx=\"80\" cy=\"40\"></circle>\n <circle class=\"sp-point scatter-plot__point--none\" cx=\"92\" cy=\"80\"></circle>\n <circle class=\"sp-point scatter-plot__point--none\" cx=\"105\" cy=\"35\"></circle>\n <circle class=\"sp-point scatter-plot__point--none\" cx=\"118\" cy=\"55\"></circle>\n {{#if showTrendLine}}<polyline class=\"scatter-plot__trend\" points=\"28,55 120,58\"></polyline>{{/if}}\n </g>\n </svg>\n</figure>\n<style>\n.scatter-plot { max-width: 380px; font: 11px system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 14px; box-sizing: border-box; }\n.scatter-plot__svg { width: 100%; height: auto; display: block; overflow: visible; }\n.scatter-plot__grid { stroke: #24143055; stroke-width: 1; }\n.scatter-plot__tick { font-size: 7.5px; fill: #24143099; text-anchor: end; }\n.scatter-plot__axistitle { font-size: 7.5px; fill: #24143099; text-anchor: middle; }\n.scatter-plot__series { display: none; }\n.scatter-plot--positive .scatter-plot__series--positive { display: block; }\n.scatter-plot--negative .scatter-plot__series--negative { display: block; }\n.scatter-plot--none .scatter-plot__series--none { display: block; }\n.scatter-plot__point { fill: var(--accent); stroke: #241430; stroke-width: .75; r: var(--r); }\n.scatter-plot__trend { fill: none; stroke: #241430; stroke-width: 1.5; stroke-dasharray: 4 3; }\n</style>", "tailwind": "<figure class=\"scatter-plot-tw scatter-plot-tw--{{correlation}}\" style=\"--accent:{{accent}};--r:{{pointSize}};\" role=\"img\" aria-label=\"Scatter plot showing a {{correlation}} correlation between score X and score Y across 8 points\">\n <svg class=\"scatter-plot-tw__svg\" viewBox=\"0 0 140 122\" xmlns=\"http://www.w3.org/2000/svg\">\n <g aria-hidden=\"true\">\n <line class=\"scatter-plot-tw__grid\" x1=\"20\" y1=\"10\" x2=\"20\" y2=\"100\"></line>\n <line class=\"scatter-plot-tw__grid\" x1=\"20\" y1=\"100\" x2=\"130\" y2=\"100\"></line>\n <text class=\"scatter-plot-tw__tick\" x=\"16\" y=\"103\">0</text>\n <text class=\"scatter-plot-tw__tick\" x=\"16\" y=\"58\">50</text>\n <text class=\"scatter-plot-tw__tick\" x=\"16\" y=\"14\">100</text>\n <text class=\"scatter-plot-tw__tick\" x=\"20\" y=\"112\">0</text>\n <text class=\"scatter-plot-tw__tick\" x=\"75\" y=\"112\">50</text>\n <text class=\"scatter-plot-tw__tick\" x=\"127\" y=\"112\">100</text>\n <text class=\"scatter-plot-tw__axistitle\" x=\"6\" y=\"8\">Y (pts)</text>\n <text class=\"scatter-plot-tw__axistitle\" x=\"75\" y=\"119\">X (pts)</text></g>\n <g class=\"scatter-plot-tw__series scatter-plot-tw__series--positive\"><circle class=\"sp-point scatter-plot-tw__point--positive\" cx=\"30\" cy=\"88\"></circle>\n <circle class=\"sp-point scatter-plot-tw__point--positive\" cx=\"45\" cy=\"78\"></circle>\n <circle class=\"sp-point scatter-plot-tw__point--positive\" cx=\"55\" cy=\"70\"></circle>\n <circle class=\"sp-point scatter-plot-tw__point--positive\" cx=\"68\" cy=\"64\"></circle>\n <circle class=\"sp-point scatter-plot-tw__point--positive\" cx=\"80\" cy=\"52\"></circle>\n <circle class=\"sp-point scatter-plot-tw__point--positive\" cx=\"92\" cy=\"44\"></circle>\n <circle class=\"sp-point scatter-plot-tw__point--positive\" cx=\"105\" cy=\"32\"></circle>\n <circle class=\"sp-point scatter-plot-tw__point--positive\" cx=\"118\" cy=\"22\"></circle>\n {{#if showTrendLine}}<polyline class=\"scatter-plot-tw__trend\" points=\"28,90 120,20\"></polyline>{{/if}}\n </g>\n <g class=\"scatter-plot-tw__series scatter-plot-tw__series--negative\"><circle class=\"sp-point scatter-plot-tw__point--negative\" cx=\"30\" cy=\"22\"></circle>\n <circle class=\"sp-point scatter-plot-tw__point--negative\" cx=\"45\" cy=\"30\"></circle>\n <circle class=\"sp-point scatter-plot-tw__point--negative\" cx=\"55\" cy=\"40\"></circle>\n <circle class=\"sp-point scatter-plot-tw__point--negative\" cx=\"68\" cy=\"48\"></circle>\n <circle class=\"sp-point scatter-plot-tw__point--negative\" cx=\"80\" cy=\"58\"></circle>\n <circle class=\"sp-point scatter-plot-tw__point--negative\" cx=\"92\" cy=\"66\"></circle>\n <circle class=\"sp-point scatter-plot-tw__point--negative\" cx=\"105\" cy=\"76\"></circle>\n <circle class=\"sp-point scatter-plot-tw__point--negative\" cx=\"118\" cy=\"86\"></circle>\n {{#if showTrendLine}}<polyline class=\"scatter-plot-tw__trend\" points=\"28,20 120,90\"></polyline>{{/if}}\n </g>\n <g class=\"scatter-plot-tw__series scatter-plot-tw__series--none\"><circle class=\"sp-point scatter-plot-tw__point--none\" cx=\"30\" cy=\"50\"></circle>\n <circle class=\"sp-point scatter-plot-tw__point--none\" cx=\"45\" cy=\"75\"></circle>\n <circle class=\"sp-point scatter-plot-tw__point--none\" cx=\"55\" cy=\"30\"></circle>\n <circle class=\"sp-point scatter-plot-tw__point--none\" cx=\"68\" cy=\"60\"></circle>\n <circle class=\"sp-point scatter-plot-tw__point--none\" cx=\"80\" cy=\"40\"></circle>\n <circle class=\"sp-point scatter-plot-tw__point--none\" cx=\"92\" cy=\"80\"></circle>\n <circle class=\"sp-point scatter-plot-tw__point--none\" cx=\"105\" cy=\"35\"></circle>\n <circle class=\"sp-point scatter-plot-tw__point--none\" cx=\"118\" cy=\"55\"></circle>\n {{#if showTrendLine}}<polyline class=\"scatter-plot-tw__trend\" points=\"28,55 120,58\"></polyline>{{/if}}\n </g>\n </svg>\n</figure>\n<style>\n.scatter-plot-tw { max-width: 380px; font: 11px system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 14px; box-sizing: border-box; }\n.scatter-plot-tw__svg { width: 100%; height: auto; display: block; overflow: visible; }\n.scatter-plot-tw__grid { stroke: #24143055; stroke-width: 1; }\n.scatter-plot-tw__tick { font-size: 7.5px; fill: #24143099; text-anchor: end; }\n.scatter-plot-tw__axistitle { font-size: 7.5px; fill: #24143099; text-anchor: middle; }\n.scatter-plot-tw__series { display: none; }\n.scatter-plot-tw--positive .scatter-plot-tw__series--positive { display: block; }\n.scatter-plot-tw--negative .scatter-plot-tw__series--negative { display: block; }\n.scatter-plot-tw--none .scatter-plot-tw__series--none { display: block; }\n.scatter-plot-tw__point { fill: var(--accent); stroke: #241430; stroke-width: .75; r: var(--r); }\n.scatter-plot-tw__trend { fill: none; stroke: #241430; stroke-width: 1.5; stroke-dasharray: 4 3; }\n</style>", "react": "export function ScatterPlot({\n correlation = \"{{correlation}}\",\n pointSize = {{pointSize}},\n showTrendLine = {{showTrendLine}},\n accent = \"{{accent}}\",\n}) {\n const series = {\n positive: { pts: [[30,88],[45,78],[55,70],[68,64],[80,52],[92,44],[105,32],[118,22]], trend: \"28,90 120,20\" },\n negative: { pts: [[30,22],[45,30],[55,40],[68,48],[80,58],[92,66],[105,76],[118,86]], trend: \"28,20 120,90\" },\n none: { pts: [[30,50],[45,75],[55,30],[68,60],[80,40],[92,80],[105,35],[118,55]], trend: \"28,55 120,58\" },\n };\n const active = series[correlation] ?? series.positive;\n return (\n <figure role=\"img\" aria-label={`Scatter plot showing a ${correlation} correlation between score X and score Y across 8 points`}\n style={{ maxWidth: 380, padding: 14, font: \"11px system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", boxSizing: \"border-box\" }}>\n <svg viewBox=\"0 0 140 122\" style={{ width: \"100%\", height: \"auto\", display: \"block\", overflow: \"visible\" }}>\n <g aria-hidden=\"true\">\n <line x1={20} y1={10} x2={20} y2={100} stroke=\"#24143055\" />\n <line x1={20} y1={100} x2={130} y2={100} stroke=\"#24143055\" />\n <text x={16} y={103} fontSize={7.5} fill=\"#24143099\" textAnchor=\"end\">0</text>\n <text x={16} y={58} fontSize={7.5} fill=\"#24143099\" textAnchor=\"end\">50</text>\n <text x={16} y={14} fontSize={7.5} fill=\"#24143099\" textAnchor=\"end\">100</text>\n <text x={20} y={112} fontSize={7.5} fill=\"#24143099\" textAnchor=\"end\">0</text>\n <text x={75} y={112} fontSize={7.5} fill=\"#24143099\" textAnchor=\"end\">50</text>\n <text x={127} y={112} fontSize={7.5} fill=\"#24143099\" textAnchor=\"end\">100</text>\n <text x={6} y={8} fontSize={7.5} fill=\"#24143099\" textAnchor=\"middle\">Y (pts)</text>\n <text x={75} y={119} fontSize={7.5} fill=\"#24143099\" textAnchor=\"middle\">X (pts)</text>\n </g>\n {active.pts.map(([x, y], i) => (\n <circle key={i} cx={x} cy={y} r={pointSize} fill={accent} stroke=\"#241430\" strokeWidth={0.75} />\n ))}\n {showTrendLine && (\n <polyline points={active.trend} fill=\"none\" stroke=\"#241430\" strokeWidth={1.5} strokeDasharray=\"4 3\" />\n )}\n </svg>\n </figure>\n );\n}" }