45 lines
2.1 KiB
XML
45 lines
2.1 KiB
XML
<svg width="380" height="200" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<marker id="le-arr" markerWidth="7" markerHeight="5" refX="7" refY="2.5" orient="auto">
|
|
<path d="M0,0 L7,2.5 L0,5" fill="#ccc"/>
|
|
</marker>
|
|
</defs>
|
|
|
|
<!-- Axes -->
|
|
<line x1="50" y1="170" x2="360" y2="170" stroke="#ccc" stroke-width="1" marker-end="url(#le-arr)"/>
|
|
<line x1="50" y1="170" x2="50" y2="15" stroke="#ccc" stroke-width="1" marker-end="url(#le-arr)"/>
|
|
<text x="365" y="173" fill="#999" font-size="10">x</text>
|
|
<text x="45" y="12" fill="#999" font-size="10">y</text>
|
|
|
|
<!-- y = mx + b line -->
|
|
<line x1="50" y1="130" x2="330" y2="30" stroke="#e74c3c" stroke-width="2.5"/>
|
|
<text x="335" y="30" fill="#e74c3c" font-size="11" font-weight="bold">y = mx + b</text>
|
|
|
|
<!-- b: y-intercept -->
|
|
<circle cx="50" cy="130" r="5" fill="#3498db"/>
|
|
<line x1="50" y1="130" x2="50" y2="170" stroke="#3498db" stroke-width="1.5" stroke-dasharray="3"/>
|
|
<text x="18" y="133" fill="#3498db" font-size="11" font-weight="bold">b</text>
|
|
<text x="6" y="148" fill="#3498db" font-size="8">(intercept)</text>
|
|
|
|
<!-- Rise/run triangle for slope -->
|
|
<circle cx="130" cy="101" r="4" fill="#27ae60"/>
|
|
<circle cx="230" cy="66" r="4" fill="#27ae60"/>
|
|
|
|
<!-- Run (horizontal) -->
|
|
<line x1="130" y1="101" x2="230" y2="101" stroke="#27ae60" stroke-width="1.8" stroke-dasharray="4"/>
|
|
<text x="175" y="118" fill="#27ae60" font-size="10" text-anchor="middle">Δx</text>
|
|
|
|
<!-- Rise (vertical) -->
|
|
<line x1="230" y1="101" x2="230" y2="66" stroke="#27ae60" stroke-width="1.8" stroke-dasharray="4"/>
|
|
<text x="242" y="88" fill="#27ae60" font-size="10">Δy</text>
|
|
|
|
<!-- Slope label -->
|
|
<text x="260" y="110" fill="#27ae60" font-size="11" font-weight="bold">m = Δy/Δx</text>
|
|
<text x="260" y="125" fill="#27ae60" font-size="9">(slope = rate of change)</text>
|
|
|
|
<!-- x-axis tick at 0 -->
|
|
<text x="47" y="183" fill="#999" font-size="9" text-anchor="middle">0</text>
|
|
|
|
<text x="200" y="196" text-anchor="middle" fill="#666" font-size="10">b = starting value, m = how fast y changes per unit x</text>
|
|
</svg>
|
