Graphs

Scatter Plot

Y Header X Header

HTML

<h2>
    <fieldset class="scatter">
    <legend>Scatter Plot</legend>

    <span class="yHeader">Y Header</span>

    <svg width="300" height="300" class="scatter">
        <circle cx="70%" cy="20%" r="5"></circle>
        <circle cx="60%" cy="20%" r="5"></circle>
        <circle cx="40%" cy="20%" r="5"></circle>
        <circle cx="40%" cy="40%" r="5"></circle>
        <circle cx="20%" cy="40%" r="5"></circle>
        <circle cx="30%" cy="40%" r="5"></circle>
        <circle cx="60%" cy="70%" r="5"></circle>
        <circle cx="70%" cy="70%" r="5"></circle>
        <circle cx="90%" cy="70%" r="5"></circle>

        <text x="0%" y="100%">0</text>
        <text x="0%" y="90%">10</text>
        <text x="0%" y="80%">20</text>
        <text x="0%" y="70%">30</text>
        <text x="0%" y="60%">40</text>
        <text x="0%" y="50%">50</text>
        <text x="0%" y="40%">60</text>
        <text x="0%" y="30%">70</text>
        <text x="0%" y="20%">80</text>
        <text x="0%" y="10%">90</text>
        <text x="10%" y="100%">10</text>
        <text x="20%" y="100%">20</text>
        <text x="30%" y="100%">30</text>
        <text x="40%" y="100%">40</text>
        <text x="50%" y="100%">50</text>
        <text x="60%" y="100%">60</text>
        <text x="70%" y="100%">70</text>
        <text x="80%" y="100%">80</text>
        <text x="90%" y="100%">90</text>
    </svg>

    <span class="origin"></span>
    <span class="xHeader">X Header</span>
    </fieldset>
</h2>

CSS

fieldset.scatter {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    gap: 10px;
    width: 0;
}
fieldset.scatter svg {
    padding: 20px;
    border: 2px solid var(--white);
    border-top: none;
    border-right: none;
}
fieldset.scatter svg circle {
    fill: var(--white);
    stroke: black;
    stroke-width: 0;
}
fieldset.scatter svg text {
    fill: var(--white);
    text-anchor: left;
}
fieldset.scatter .yHeader {
    margin: auto;
    writing-mode: vertical-rl;
}
fieldset.scatter .origin {
    margin: auto;
}
fieldset.scatter .xHeader {
    margin: auto;
}