|
|
<!doctype html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="utf-8" /> |
|
|
<meta name="viewport" content="width=device-width,initial-scale=1" /> |
|
|
<title>Calculus Portfolio — Introduction to Calculus</title> |
|
|
|
|
|
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet"> |
|
|
|
|
|
<style> |
|
|
:root{ |
|
|
--bg:#0f1724; |
|
|
--card:#0b1020; |
|
|
--muted:#9aa7bf; |
|
|
--accent:#7dd3fc; |
|
|
--accent-2:#60a5fa; |
|
|
--glass: rgba(255,255,255,0.04); |
|
|
--success:#34d399; |
|
|
--danger:#fb7185; |
|
|
--radius:16px; |
|
|
font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; |
|
|
} |
|
|
|
|
|
*{box-sizing:border-box} |
|
|
html,body{height:100%} |
|
|
body{ |
|
|
margin:0; |
|
|
background: linear-gradient(180deg, #071028 0%, #071a2e 65%); |
|
|
color:#e6eef8; |
|
|
-webkit-font-smoothing:antialiased; |
|
|
-moz-osx-font-smoothing:grayscale; |
|
|
padding:32px; |
|
|
} |
|
|
|
|
|
.wrap{ |
|
|
max-width:1100px; |
|
|
margin:0 auto; |
|
|
display:grid; |
|
|
grid-template-columns: 380px 1fr; |
|
|
gap:28px; |
|
|
} |
|
|
|
|
|
|
|
|
aside{ |
|
|
background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02)); |
|
|
border-radius:var(--radius); |
|
|
padding:22px; |
|
|
box-shadow: 0 6px 30px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.02); |
|
|
min-height:520px; |
|
|
position:sticky; |
|
|
top:32px; |
|
|
overflow:hidden; |
|
|
} |
|
|
|
|
|
.logo{ |
|
|
display:flex; |
|
|
gap:14px; |
|
|
align-items:center; |
|
|
margin-bottom:12px; |
|
|
} |
|
|
.logo .mark{ |
|
|
width:62px; |
|
|
height:62px; |
|
|
border-radius:12px; |
|
|
background:linear-gradient(135deg,var(--accent),var(--accent-2)); |
|
|
display:flex; |
|
|
align-items:center; |
|
|
justify-content:center; |
|
|
font-weight:800; |
|
|
color:#04263b; |
|
|
font-size:20px; |
|
|
box-shadow: 0 8px 20px rgba(96,165,250,0.14); |
|
|
} |
|
|
.logo h1{ |
|
|
font-size:16px; |
|
|
margin:0; |
|
|
line-height:1; |
|
|
letter-spacing:0.2px; |
|
|
} |
|
|
.logo p{margin:0;margin-top:4px;color:var(--muted);font-size:13px} |
|
|
|
|
|
.meta{ |
|
|
display:flex; |
|
|
gap:12px; |
|
|
flex-wrap:wrap; |
|
|
margin:18px 0 12px; |
|
|
} |
|
|
.chip{ |
|
|
background:var(--glass); |
|
|
padding:8px 10px; |
|
|
border-radius:10px; |
|
|
font-size:13px; |
|
|
color:var(--muted); |
|
|
box-shadow: 0 3px 10px rgba(2,6,23,0.45); |
|
|
} |
|
|
|
|
|
.summary{ |
|
|
color:var(--muted); |
|
|
font-size:14px; |
|
|
line-height:1.55; |
|
|
margin-bottom:14px; |
|
|
} |
|
|
|
|
|
.objectives{ |
|
|
margin-top:12px; |
|
|
} |
|
|
.objectives h3{font-size:13px;margin:0 0 8px;color:var(--accent)} |
|
|
.objectives ul{margin:0;padding-left:18px;color:var(--muted);line-height:1.6;font-size:14px} |
|
|
|
|
|
|
|
|
main{ |
|
|
background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); |
|
|
border-radius:var(--radius); |
|
|
padding:26px; |
|
|
min-height:520px; |
|
|
box-shadow: 0 6px 40px rgba(2,6,23,0.6); |
|
|
} |
|
|
|
|
|
header.port{ |
|
|
display:flex; |
|
|
align-items:center; |
|
|
justify-content:space-between; |
|
|
gap:12px; |
|
|
margin-bottom:20px; |
|
|
} |
|
|
.title{ |
|
|
display:flex; |
|
|
gap:16px; |
|
|
align-items:center; |
|
|
} |
|
|
.title h2{ |
|
|
margin:0;font-size:20px; |
|
|
} |
|
|
.title p{margin:0;color:var(--muted);font-size:13px} |
|
|
|
|
|
.badge{ |
|
|
background:linear-gradient(90deg,var(--accent-2),var(--accent)); |
|
|
color:#04263b; |
|
|
padding:10px 14px; |
|
|
border-radius:12px; |
|
|
font-weight:700; |
|
|
box-shadow: 0 8px 30px rgba(96,165,250,0.08); |
|
|
} |
|
|
|
|
|
|
|
|
section.block{ |
|
|
margin-bottom:20px; |
|
|
padding:16px; |
|
|
background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.015)); |
|
|
border-radius:12px; |
|
|
} |
|
|
.block h3{margin:0 0 10px;font-size:16px} |
|
|
.block p{margin:0;color:var(--muted);line-height:1.6} |
|
|
|
|
|
.outline-grid{ |
|
|
display:grid; |
|
|
grid-template-columns:repeat(2,1fr); |
|
|
gap:12px; |
|
|
margin-top:10px; |
|
|
} |
|
|
.outline-item{ |
|
|
background:rgba(255,255,255,0.02); |
|
|
padding:12px;border-radius:10px; |
|
|
border:1px solid rgba(255,255,255,0.02); |
|
|
color:var(--muted); |
|
|
font-size:14px; |
|
|
} |
|
|
.outline-item strong{display:block;color:#e6eef8;margin-bottom:6px} |
|
|
|
|
|
|
|
|
.accordion{ |
|
|
margin-top:10px; |
|
|
} |
|
|
.acco-item{ |
|
|
border-radius:10px; |
|
|
overflow:hidden; |
|
|
margin-bottom:8px; |
|
|
border:1px solid rgba(255,255,255,0.03); |
|
|
} |
|
|
.acco-head{ |
|
|
display:flex;justify-content:space-between;align-items:center; |
|
|
padding:12px;background:transparent;cursor:pointer; |
|
|
} |
|
|
.acco-head h4{margin:0;font-size:15px} |
|
|
.acco-body{ |
|
|
padding:12px 14px 16px; |
|
|
color:var(--muted); |
|
|
font-size:14px; |
|
|
display:none; |
|
|
line-height:1.6; |
|
|
border-top:1px solid rgba(255,255,255,0.02); |
|
|
} |
|
|
|
|
|
|
|
|
.demo{ |
|
|
display:grid; |
|
|
grid-template-columns: 1fr 260px; |
|
|
gap:16px; |
|
|
align-items:center; |
|
|
margin-top:12px; |
|
|
} |
|
|
.graph{ |
|
|
background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.015)); |
|
|
border-radius:12px;padding:14px; |
|
|
min-height:260px; |
|
|
} |
|
|
|
|
|
.controls{ |
|
|
padding:14px;border-radius:12px;background:rgba(255,255,255,0.02); |
|
|
} |
|
|
.controls label{display:block;font-size:13px;color:var(--muted);margin-bottom:8px} |
|
|
.controls input[type="range"]{width:100%} |
|
|
.controls .val{font-weight:700;color:#e6eef8;margin-top:8px} |
|
|
|
|
|
footer.note{ |
|
|
display:flex;justify-content:space-between;align-items:center; |
|
|
gap:10px;margin-top:16px;color:var(--muted);font-size:13px; |
|
|
} |
|
|
|
|
|
|
|
|
@media (max-width:980px){ |
|
|
.wrap{grid-template-columns:1fr; padding:0 12px} |
|
|
aside{position:relative;top:0} |
|
|
.demo{grid-template-columns:1fr} |
|
|
} |
|
|
|
|
|
|
|
|
.sparkle{ |
|
|
width:100%;height:6px;margin-bottom:12px; |
|
|
background: linear-gradient(90deg, rgba(125,211,252,0.06), rgba(96,165,250,0.06)); |
|
|
border-radius:6px; |
|
|
} |
|
|
|
|
|
.cta{ |
|
|
display:inline-flex;gap:10px;align-items:center;padding:10px 14px;border-radius:12px;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#04263b;font-weight:700;border:none;cursor:pointer; |
|
|
} |
|
|
|
|
|
|
|
|
.legend{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:13px} |
|
|
.dot{width:10px;height:10px;border-radius:50%} |
|
|
.dot.sec{background:rgba(125,211,252,0.9)} |
|
|
.dot.tan{background:rgba(96,165,250,0.9)} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="wrap" role="main"> |
|
|
|
|
|
<aside aria-label="Course overview"> |
|
|
<div class="logo" role="banner"> |
|
|
<div class="mark">∫d</div> |
|
|
<div> |
|
|
<h1>Calculus Portfolio</h1> |
|
|
<p>Introduction to Calculus — Differential & Integral</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="sparkle" aria-hidden="true"></div> |
|
|
|
|
|
<div class="meta" aria-hidden="true"> |
|
|
<div class="chip">Level: Introductory</div> |
|
|
<div class="chip">Duration: 10–12 weeks</div> |
|
|
<div class="chip">Format: Theory + Demo</div> |
|
|
</div> |
|
|
|
|
|
<p class="summary"> |
|
|
Calculus studies continuous change. This portfolio summarizes the course objectives, outline, key concepts (limits, derivatives, integrals), and includes a tiny interactive demo illustrating how a secant slope approaches a derivative (tangent slope). |
|
|
</p> |
|
|
|
|
|
<div class="objectives" aria-labelledby="obj"> |
|
|
<h3 id="obj">Course Objectives</h3> |
|
|
<ul> |
|
|
<li>Understand limits, derivatives & integrals</li> |
|
|
<li>Apply techniques to physics, engineering & economics</li> |
|
|
<li>Analyze & model real-world functions</li> |
|
|
<li>Use derivatives to find maxima/minima</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div style="margin-top:14px"> |
|
|
<button class="cta" id="downloadBtn" title="Save as PDF (print)"> |
|
|
📄 Save / Print |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div style="margin-top:18px"> |
|
|
<small style="color:var(--muted)">Author: Calculus Instructor • Prepared as a student portfolio</small> |
|
|
</div> |
|
|
</aside> |
|
|
|
|
|
|
|
|
<main> |
|
|
<header class="port"> |
|
|
<div class="title"> |
|
|
<div> |
|
|
<h2>Introduction to Calculus</h2> |
|
|
<p>Understanding differential & integral calculus — core ideas, examples, and applications.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="badge">Essentials</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section class="block" aria-labelledby="outlineTitle"> |
|
|
<h3 id="outlineTitle">Course Outline</h3> |
|
|
<div class="outline-grid" role="list"> |
|
|
<div class="outline-item" role="listitem"> |
|
|
<strong>Differential Calculus</strong> |
|
|
Limits • Derivatives • Applications (tangent lines, rates, optimization) |
|
|
</div> |
|
|
<div class="outline-item" role="listitem"> |
|
|
<strong>Integral Calculus</strong> |
|
|
Indefinite/Definite Integrals • Techniques • Area & accumulation problems |
|
|
</div> |
|
|
<div class="outline-item" role="listitem"> |
|
|
<strong>Foundations</strong> |
|
|
Limits, continuity, algebra of functions |
|
|
</div> |
|
|
<div class="outline-item" role="listitem"> |
|
|
<strong>Applications</strong> |
|
|
Physics (velocity/acceleration), engineering, economics & area computations |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="block" aria-labelledby="defs"> |
|
|
<h3 id="defs">What is Calculus?</h3> |
|
|
<p> |
|
|
Calculus is the study of continuous change. Historically developed by Newton and Leibniz, it focuses on two complementary ideas: |
|
|
</p> |
|
|
|
|
|
<div class="accordion" id="accordion"> |
|
|
<div class="acco-item"> |
|
|
<button class="acco-head" data-target="a1"><h4>Differential Calculus</h4><span>▸</span></button> |
|
|
<div class="acco-body" id="a1"> |
|
|
Differential calculus studies rates of change (derivatives). The derivative f'(x) = dy/dx measures how the function y = f(x) changes as x changes. It arises from the limit of a quotient: the slope of the secant line approaches the slope of the tangent line. |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="acco-item"> |
|
|
<button class="acco-head" data-target="a2"><h4>Integral Calculus</h4><span>▸</span></button> |
|
|
<div class="acco-body" id="a2"> |
|
|
Integral calculus reverses differentiation: integration accumulates small pieces to get a whole. Indefinite integrals include an arbitrary constant (C); definite integrals compute accumulated values like area under a curve. |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="acco-item"> |
|
|
<button class="acco-head" data-target="a3"><h4>Limits & Continuity</h4><span>▸</span></button> |
|
|
<div class="acco-body" id="a3"> |
|
|
Limits describe the behavior of a function as the input approaches a certain value. Continuity means the limit equals the function value. Limits are the foundation on which both derivatives and integrals are built. |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="block" aria-labelledby="demoTitle"> |
|
|
<h3 id="demoTitle">Interactive Demo — Secant → Tangent (Derivative)</h3> |
|
|
<p style="margin-bottom:12px;color:var(--muted)">Use the slider to move the second point (h). The slope of the secant line approaches the tangent slope as h → 0 for f(x) = x² at x = 1.</p> |
|
|
|
|
|
<div class="demo" role="application" aria-label="Derivative demo"> |
|
|
<div class="graph" id="svgWrap" aria-hidden="false"> |
|
|
|
|
|
<svg id="calcSVG" width="100%" height="260" viewBox="0 0 600 260" preserveAspectRatio="xMinYMin meet" aria-label="Graph area" role="img"></svg> |
|
|
</div> |
|
|
|
|
|
<div class="controls" aria-hidden="false"> |
|
|
<label for="hRange">h (distance between points): <span id="hVal">0.8</span></label> |
|
|
<input id="hRange" type="range" min="0.01" max="2" step="0.01" value="0.8" /> |
|
|
<div style="margin-top:12px"> |
|
|
<label for="xInput">Point x (evaluation point):</label> |
|
|
<input id="xInput" type="number" value="1" step="0.1" style="width:100%;padding:8px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:#e6eef8" /> |
|
|
</div> |
|
|
|
|
|
<div class="val" style="margin-top:12px"> |
|
|
Secant slope: <strong id="secSlope">2.6</strong> |
|
|
</div> |
|
|
<div class="val" style="margin-top:6px"> |
|
|
Tangent (derivative) at x: <strong id="tanSlope">2</strong> |
|
|
</div> |
|
|
|
|
|
<div style="height:10px"></div> |
|
|
|
|
|
<div class="legend" style="margin-top:10px"> |
|
|
<div class="dot sec" aria-hidden="true"></div><span>Secant</span> |
|
|
<div style="width:8px"></div> |
|
|
<div class="dot tan" aria-hidden="true"></div><span>Tangent</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<footer class="note"> |
|
|
<span>Formula shown uses f(x)=x². Derivative f'(x)=2x (so at x=1, tangent slope = 2).</span> |
|
|
<span style="opacity:0.9">Try h → 0 to see secant slope approach 2.</span> |
|
|
</footer> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="block" aria-labelledby="addTitle"> |
|
|
<h3 id="addTitle">Key Formulas & Notes</h3> |
|
|
<p style="margin-bottom:8px;color:var(--muted)"> |
|
|
<strong>Derivative:</strong> f'(x) = limₕ→0 (f(x+h) - f(x))/h<br> |
|
|
<strong>Indefinite Integral:</strong> ∫ f(x) dx = F(x) + C<br> |
|
|
<strong>Definite Integral:</strong> ∫ₐᵇ f(x) dx = F(b) - F(a) |
|
|
</p> |
|
|
|
|
|
<div style="display:flex;gap:12px;flex-wrap:wrap;margin-top:8px"> |
|
|
<div class="chip">Applications: Motion, Area, Optimization</div> |
|
|
<div class="chip">Tools: Analytical techniques, substitution, parts</div> |
|
|
<div class="chip">Prereqs: Functions, algebra, exponents</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section style="display:flex;justify-content:space-between;align-items:center;margin-top:8px"> |
|
|
<small style="color:var(--muted)">Prepared as a student portfolio • Clean, shareable, printable</small> |
|
|
<div> |
|
|
<button class="cta" id="toggleTheme">🌙 Toggle Theme</button> |
|
|
</div> |
|
|
</section> |
|
|
</main> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.querySelectorAll('.acco-head').forEach(btn=>{ |
|
|
btn.addEventListener('click', ()=>{ |
|
|
const target = btn.getAttribute('data-target'); |
|
|
const body = document.getElementById(target); |
|
|
const open = body.style.display === 'block'; |
|
|
|
|
|
document.querySelectorAll('.acco-body').forEach(b=>b.style.display='none'); |
|
|
|
|
|
document.querySelectorAll('.acco-head span').forEach(s=>s.textContent='▸'); |
|
|
if(!open){ |
|
|
body.style.display='block'; |
|
|
btn.querySelector('span').textContent='▾'; |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelector('.acco-head')?.click(); |
|
|
|
|
|
|
|
|
document.getElementById('downloadBtn').addEventListener('click', ()=> { |
|
|
window.print(); |
|
|
}); |
|
|
|
|
|
|
|
|
const toggle = document.getElementById('toggleTheme'); |
|
|
let dark = true; |
|
|
toggle.addEventListener('click', ()=>{ |
|
|
dark = !dark; |
|
|
if(!dark){ |
|
|
document.body.style.background = 'linear-gradient(180deg,#f8fafc,#e6eef8)'; |
|
|
document.body.style.color = '#02263b'; |
|
|
document.querySelectorAll('aside, main').forEach(el=>{ |
|
|
el.style.background = 'linear-gradient(180deg, rgba(2,38,59,0.02), rgba(2,38,59,0.01))'; |
|
|
el.style.boxShadow = '0 6px 20px rgba(2,6,23,0.04)'; |
|
|
}); |
|
|
} else { |
|
|
location.reload(); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
(function(){ |
|
|
const svg = document.getElementById('calcSVG'); |
|
|
const w = 600, h = 260; |
|
|
svg.setAttribute('viewBox','0 0 '+w+' '+h); |
|
|
|
|
|
|
|
|
const xMin = -1, xMax = 3, yMin = -1, yMax = 9; |
|
|
const mapX = x => ( (x - xMin) / (xMax - xMin) ) * (w-60) + 40; |
|
|
const mapY = y => h - ( (y - yMin) / (yMax - yMin) ) * (h-40) - 20; |
|
|
|
|
|
|
|
|
function drawAxes(){ |
|
|
svg.innerHTML = ''; |
|
|
const ns = 'http://www.w3.org/2000/svg'; |
|
|
|
|
|
|
|
|
for(let gx = Math.ceil(xMin); gx<=Math.floor(xMax); gx++){ |
|
|
const xPos = mapX(gx); |
|
|
const line = document.createElementNS(ns,'line'); |
|
|
line.setAttribute('x1',xPos); line.setAttribute('x2',xPos); |
|
|
line.setAttribute('y1',20); line.setAttribute('y2',h-20); |
|
|
line.setAttribute('stroke','rgba(255,255,255,0.02)'); |
|
|
line.setAttribute('stroke-width','1'); |
|
|
svg.appendChild(line); |
|
|
|
|
|
const txt = document.createElementNS(ns,'text'); |
|
|
txt.setAttribute('x', xPos); |
|
|
txt.setAttribute('y', h-6); |
|
|
txt.setAttribute('fill','rgba(230,238,248,0.45)'); |
|
|
txt.setAttribute('font-size','10'); |
|
|
txt.setAttribute('text-anchor','middle'); |
|
|
txt.textContent = gx; |
|
|
svg.appendChild(txt); |
|
|
} |
|
|
|
|
|
for(let gy = 0; gy<=8; gy+=1){ |
|
|
const yPos = mapY(gy); |
|
|
const line = document.createElementNS(ns,'line'); |
|
|
line.setAttribute('y1',yPos); line.setAttribute('y2',yPos); |
|
|
line.setAttribute('x1',40); line.setAttribute('x2',w-20); |
|
|
line.setAttribute('stroke','rgba(255,255,255,0.02)'); |
|
|
line.setAttribute('stroke-width','1'); |
|
|
svg.appendChild(line); |
|
|
} |
|
|
|
|
|
|
|
|
const axisX = document.createElementNS(ns,'line'); |
|
|
axisX.setAttribute('x1',mapX(xMin)); axisX.setAttribute('x2',mapX(xMax)); |
|
|
axisX.setAttribute('y1', mapY(0)); axisX.setAttribute('y2', mapY(0)); |
|
|
axisX.setAttribute('stroke','rgba(230,238,248,0.12)'); |
|
|
axisX.setAttribute('stroke-width','1.5'); |
|
|
svg.appendChild(axisX); |
|
|
|
|
|
const axisY = document.createElementNS(ns,'line'); |
|
|
axisY.setAttribute('x1',mapX(0)); axisY.setAttribute('x2',mapX(0)); |
|
|
axisY.setAttribute('y1', mapY(yMin)); axisY.setAttribute('y2', mapY(yMax)); |
|
|
axisY.setAttribute('stroke','rgba(230,238,248,0.12)'); |
|
|
axisY.setAttribute('stroke-width','1.5'); |
|
|
svg.appendChild(axisY); |
|
|
} |
|
|
|
|
|
function plotFunction(){ |
|
|
const ns = 'http://www.w3.org/2000/svg'; |
|
|
const path = document.createElementNS(ns,'path'); |
|
|
let d = ''; |
|
|
const steps = 200; |
|
|
for(let i=0;i<=steps;i++){ |
|
|
const t = i/steps; |
|
|
const x = xMin + t*(xMax - xMin); |
|
|
const y = x*x; |
|
|
const px = mapX(x), py = mapY(y); |
|
|
d += (i===0? 'M':'L') + px + ' ' + py + ' '; |
|
|
} |
|
|
path.setAttribute('d', d); |
|
|
path.setAttribute('stroke','rgba(125,211,252,0.95)'); |
|
|
path.setAttribute('stroke-width','2.2'); |
|
|
path.setAttribute('fill','none'); |
|
|
svg.appendChild(path); |
|
|
} |
|
|
|
|
|
function drawPoints(x, h){ |
|
|
const ns = 'http://www.w3.org/2000/svg'; |
|
|
const x1 = x; |
|
|
const x2 = x + h; |
|
|
const y1 = x1*x1; |
|
|
const y2 = x2*x2; |
|
|
|
|
|
const p1x = mapX(x1), p1y = mapY(y1); |
|
|
const p2x = mapX(x2), p2y = mapY(y2); |
|
|
|
|
|
|
|
|
const c1 = document.createElementNS(ns,'circle'); |
|
|
c1.setAttribute('cx',p1x); c1.setAttribute('cy',p1y); c1.setAttribute. |
