Grafici con gli SCRIPT

Con WolframAlpha (versione online gratuita) si possono fare facilmente sia grafici di funzioni e curve descritte con "formule", sia tracciare poligonali e rappresentazioni di punti.  Ma quest'ultima cosa è fattibile solo nel caso di circa una ventina di segmenti o punti.
    Con semplici modifiche degli script seguenti (scaricabili sul proprio computer) si possono tracciare facilmente (oltre a grafici di funzione) rappresentazioni grafiche costituite da grandi quantità di punti e segmenti (e quindi anche curve), con la possibilità di tracciare i segmenti in qualunque colore.  I calcoli numerici sono fattibili facilmente con questi altri script.

    Rappresentazioni come quelle illustrate dalle seguenti immagini sono realizzabili facilmente, introducendo solo i dati, anche da chi non ha alcuna conoscienza informatica, anche dagli alunni delle scuole elementari. Vedi QUI.

    I nomi di funzione impiegabili (oltre a  +, -, /, *) sono quelli elencati più avanti in questo documento;  vanno preceduti da "Math.".

    Per semplicità la finestra grafica è in due sole forme,  una con altezza pari ai 2/5 (ovvero al 40%) della base, l'altra forma con altezza e base uguali.  Per entrambe le forme vi è una finestra più grande e una più piccola.  Due esempi, con scala monometrica, con titolo "...", con griglia, senza immagini.

    Costruire un file che genera un'immagine come le seguenti è molto semplice. Puoi scegliere uno dei 7 seguenti file, salvarlo sul tuo computer (cliccandone il nome col bottone destro del mouse), modificarlo e salvarlo con un nome a tuo piacere.

    I file per il riquadro 10×4, grande (graficoXpunti.htm), piccolo (graficoXp.htm) e molto piccolo (graficXp.htm), e per quello quadrato, grande (grafXpunti.htm), piccolo (grafXp.htm), molto piccolo (grXp.htm) e piccolissimo (grX.htm).

    I grafici realizzati li puoi copiare (col pulsante destro del mouse), incollarli in Paint o in qualunque altra applicazione grafica, modificarli e salvarli (ad esempio come file PNG) o incollarli in un documento che stai costruendo.

    Per spiegazioni semplici di come fare semplici grafici di funzioni clicca  QUI.

    In fondo come realizzare animazioni.

    Sotto la parte del file da modificare per ottenere la rappresentazione grafica voluta:  [aX,bX] intervallo delle ascisse, [aY,bY] intervallo delle ordinate, Dx e Dy distanze tra le tacche, quadro=1 se vuoi le indicazioni lungo gli assi della scala.  Nella versione quadrata c'è "altezza = base" senza 4/10.

...
// L0..9 estremi dei segmenti da tracciare, Q0..Q9 / O0..O9 punti vuoti/pieni da tracciare
C0=C1=C2=C3=C4=C5=C6=C7=C8=C9="blue" // colori of L0,..,L9

// bX maggiore o uguale al numero dei dati, aY = 0 o minore del min dei dati, bY maggiore o uguale al max
// Dx distanza righe verticali, Dy distanza righe orizzontali.  Rettangolo con  altezza = 4/10 base

aX = ...; bX = ...; aY = ...; bY = ...
Dx = ...; Dy = ...


titolo = "..."
Cax="brown"; Cgr="grey"                                     // colori degli assi e della griglia;  metti "white" se non li vuoi
// alcuni colori: blue, red, black, green, magenta, orange, white, grey, silver, aqua, pink, coral, limegreen, chocolate, brown
quadro=...          // se quadro=1 appare l'indicazione degli intervalli di x e y, se quadro=.. con .. diverso da 1 non apppare

C1="blue"  // colore del grafico L1

// modifica la definizione della funzione di cui volessi tracciare il grafico (f blu, g verde, h rosso, k arancione)
// Esempi: y=2*x+5   y=x*x/3  y= Math.sqrt(x-5)*10+3  y= Math.pow(x,3) (=x^3)  y= Math.sin(x/360*Math.PI)

function f(x) { y = 1/0; return y }  
function g(x) { y = 1/0; return y }
function h(x) { y = 1/0; return y }
function k(x) { y = 1/0; return y }

Co=Co1=Co2=Co3=Co4=Co5=Co6=Co7=Co8=Co9="";     T0=T1=T2=T3=T4=T5=T6=T7=T8=T9=""
// Se vuoi colorare l'interno del poligono L0 o L1 o ... L9 poni Co="colore" o Co1="colore" o ... Co9="colore"
// Puoi mettere fino a 10 scritte (S) in diverse posizioni (x,y) con T0=["S",x,y],...,T9=["S",x,y]

// 10 scritte di piccole dimensioni con s0=["S",x,y],.., s9=["S",x,y]
s0=s1=s2=s3=s4=s5=s6=s7=s8=s9=""
...
// se metti xx=[2,5] (o yy=[2,5]) sono tracciate le rette verticali x=2,x=5 (orizzontali y=2,y=5) di colore colxx
colxx="magenta"
xx=yy=[]

// puoi cambiare raggio (r) e colore (col) dei pallini Qn e On; valori standard:  rQ=2.6; colQ="black"; rO=2.6; colO="black" 
rQ=2.6; colQ="black"; rO=2.6; colO="black"
...
// linew=2; linef=2; lineg=2; lineh=2; linek=2  e' lo spessore standard di linee e grafici; puoi cambiarlo da 1 a 6
// col_f="blue"; col_g="seagreen"; col_h="red"; col_k="orange"      colori standard; puoi cambiarli
linew=2; linef=2; lineg=2; lineh=2; linek=2
col_f="blue"; col_g="seagreen"; col_h="red"; col_k="orange"
...
// Con opportune sequenze di segmenti si possono costruire curve in forma parametrica
...

Come colore puoi prendere anche #rrggbb (rr, gg, bb: quantità in base 16 di red, green, blue).  #9f9f9f è un grigio intermedio tra silver e grey. Vedi qui o qui.

  L'altra forma con altezza e base uguali.

    Esempi con la finestra grafica con altezza pari ai 2/5 (ovvero al 40%) della base.

https://www.macosaweb.it/script/graficoXpunti0.htm

...
aX = 0; bX = 100; aY = 0; bY = 40
Dx = 5; Dy = 5

titolo = "piano cartesiano 100 x 40"
Cax="brown"; Cgr="grey"
quadro=1

Q1x = L1x = [5,35,35, 5,5]
Q1y = L1y = [5, 5,35,35,5]
L2x = [40,60,80,60,40]
L2y = [ 20,0,20,40,20] 
Q2x = [60]; Q2y = [20]
O1x = L3x = [85,90,90,85,85]
O1y = L3y = [ 5, 5,35,35, 5]

C1="blue"  // colore del grafico L1
C2="red"   // colore del grafico L2
C3="green" // colore di L3

function f(x) { y = 1/0; return y }  
function g(x) { y = 1/0; return y }
function h(x) { y = 1/0; return y }
function k(x) { y = Math.abs(x-60)+10; return y }
...

https://www.macosaweb.it/script/graficoXp0.htm

...
function f(x) { y = 1/0; return y }  
function g(x) { y = 1/0; return y }
function h(x) { y = 1/0; return y }
function k(x) { y = Math.abs(x-60)+10; return y }

Co=Co1=Co2=Co3=Co4=Co5=Co6=Co7=Co8=Co9=""
// se vuoi colorare l'interno del poligono L0 o L1 o ... L9 poni Co="colore" o Co1="colore" o ... Co9="colore"
Co1="aqua"; Co3="limegreen"
...

https://www.macosaweb.it/script/graficoXpunti1.htm   https://www.macosaweb.it/script/graficoXp1.htm

...
aX = 0; bX = 11; aY = 0; bY = 150
Dx = 1; Dy = 10

titolo = "altezze mediane dei bambini di una classe quando avevano compiuto 2, 3,..., 10 anni"
Cax="brown"; Cgr="grey"
quadro=1

Q1x = L1x = [2, 3, 4, 5, 6, 7, 8, 9, 10]
Q1y = L1y = [87,95,106,111,116,122,126,133,139]
L2x=L3x=[0,11]; L2y=[50,50]; L3y=[100,100]; L4y=L5y=[0,150]; L4x=[5,5]; L5x=[10,10]
C1="black"; C2=C3=C4=C5="grey"
...

https://www.macosaweb.it/script/graficoXpunti1b.htm   https://www.macosaweb.it/script/graficoXp1b.htm

...
aX = 0; bX = 35; aY = 0; bY = 15
Dx = 5; Dy = 1

titolo = "^C, certain month, certain location"
Cax="brown"; Cgr="silver"
quadro=1

Q1x = L1x = [ 1, 2, 3, 4, 5, 6, 7, 8, 9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]
Q1y = L1y = [ 3, 4, 6, 2, 2, 3, 4, 6, 6, 8, 9, 9, 8,10, 8, 7, 8, 6, 4, 1, 2, 3, 5, 7, 6, 9,12,11,14,13,13]

C1="black"
...
// se metti xx=[2,5] (o yy=[2,5]) sono tracciate le rette verticali x=2,x=5 (orizzontali y=2,y=5) di colore colxx
colxx = "grey"
xx=[10,20,30]; yy=[5,10,15]
...

https://www.macosaweb.it/script/graficoXpunti1c.htm


 

https://www.macosaweb.it/script/graficoXpunti2.htm   https://www.macosaweb.it/script/graficoXp2.htm

...
aX = 1870; bX = 1990; aY = 0; bY = 90
Dx = 10; Dy = 10

titolo = "kg carne bovina, frutta fresca, granturco consumati annualmente in media da un italiano 1880-1980"
Cax="brown"; Cgr="grey"
quadro=1

Q1x = Q2x = Q3x = L1x = L2x = L3x = [1880,1890,1900,1910,1920,1930,1940,1950,1960,1970,1980]
Q1y = L1y = [19,21,23,28,31,27,23,37,65,88,79]
Q2y = L2y = [ 5, 6, 6, 7, 9, 9, 8, 7,13,25,25]
Q3y = L3y = [42,32,32,30,30,32,31,19, 8, 5, 3]

C1="blue" // colore del grafico L1
C2="red"   // colore del grafico L2
C3="green" // colore del grafico L3
...

https://www.macosaweb.it/script/graficoXpunti3.htm   https://www.macosaweb.it/script/graficoXp3.htm

...
aX = -10; bX = 10; aY = -4; bY = 4
Dx = 1; Dy = 1

titolo = "y = x (verde), y = 1/x (blu), y = x^2 (rosso)"
Cax="brown"; Cgr="grey"
quadro=1

function f(x) { y = 1/x; return y }  
function g(x) { y = x; return y }
function h(x) { y = x*x; return y }
function k(x) { y = 1/0; return y }
...

https://www.macosaweb.it/script/graficoXp_cerchio.htm

Puoi copiare e incollare (e modificare) questi comandi per tracciare ellissi e cerchi (sotto vedrai modi per tracciare altre curve); "raggio1" è la distanza orizzontale del centro dal bordo; raggio2 è quella verticale.

...
aX = 0; bX = 10; aY = 0; bY = 4
Dx = 1; Dy = 1

titolo = "cerchio ed ellisse"
...
C8="red"
xcentro=3; ycentro=2; raggio1=1.5; raggio2=1.5
function xellisse(t) {x=xcentro+raggio1*Math.cos(t); return x}
function yellisse(t) {y=ycentro+raggio2*Math.sin(t); return y}; t1=0; t2=6.29
for(j=0; j<=5e3; j=j+1) {t=t1+(t2-t1)/5e3*(j-1); L8x[j]=xellisse(t); L8y[j]=yellisse(t)}
C9="black"
xcentroA=7; ycentroA=2; raggio1A=2; raggio2A=1.5
function xellisseA(t) {x=xcentroA+raggio1A*Math.cos(t); return x}
function yellisseA(t) {y=ycentroA+raggio2A*Math.sin(t); return y}; tA1=0; tA2=6.29
for(j=0; j<=5e3; j=j+1) {t=tA1+(tA2-tA1)/5e3*(j-1); L9x[j]=xellisseA(t); L9y[j]=yellisseA(t)}

function f(x) { y = 1/0; return y } 
function g(x) { y = 1/0; return y }
...

https://www.macosaweb.it/script/graficoXpunti4.htm   https://www.macosaweb.it/script/graficoXp4.htm

...
aX = -720; bX = 720; aY = -3; bY = 3
Dx = 90; Dy = 1/2

titolo = "y = sin(x gradi) (blu), y = cos(x gradi) (blu), y = tan(x gradi) (rosso)"
Cax="brown"; Cgr="grey"
quadro=1

function f(x) { y = Math.sin(x/360*Math.PI); return y }  
function g(x) { y = Math.cos(x/360*Math.PI); return y }
function h(x) { y = Math.tan(x/360*Math.PI); return y }
function k(x) { y = 1/0; return y }
...

href=https://www.macosaweb.it/script/graficoXpunti_colori.htm

...
aX = -10; bX = 10; aY = -4; bY = 4
Dx = 1; Dy = 1
titolo = "grafici con colori e spessori cambiati"
...
function f(x) { y = x/4; return y }  
function g(x) { y = 1/x; return y }
function h(x) { y = -x/4; return y }
function k(x) { y = x*x/10; return y }
...
// linew=2; linef=2; lineg=2; lineh=2; linek=2  e' lo spessore standard di linee e grafici; puoi cambiarlo
// col_f="blue"; col_g="seagreen"; col_h="red"; col_k="orange"      colori standard; puoi cambiarli

linew=2; linef=1; lineg=6; lineh=4; linek=1
col_f="magenta"; col_g="lime"; col_h="red"; col_k="black"
...

Posso tracciare più di 4 grafici aggiungendo alcuni comandi:
href=https://www.macosaweb.it/script/graficoXpunti_oltre4.htm

...
function f(x) { y = x/4; return y }  
function g(x) { y = 1/x; return y }
function h(x) { y = -x/4; return y }
function k(x) { y = x*x/10; return y }
function k1(x) { y = -x*x/10-1; return y }
function k2(x) { y = -x*x/10-2; return y }
...
// aggiungo altre righe a quelle inizianti con   cx.beginPath(); cx.lineWidth=1; cx.strokeStyle=col_k
kkline=hline                            // se voglio spessore di f invece che di h metto kkline=fline
cx.beginPath(); cx.lineWidth=1; cx.strokeStyle="orange"
 for (i=0; i<=n; i++) { x=minX+(maxX-minX)/n*i; y=k1(x);
       if(Ix(x)*Iy(y)>0) {cx.strokeRect( X(x)-kkline, Y(y)-kkline, kkline*2, kkline*2) } }
cx.stroke()
cx.beginPath(); cx.lineWidth=1; cx.strokeStyle="blue"
 for (i=0; i<=n; i++) { x=minX+(maxX-minX)/n*i; y=k2(x);
       if(Ix(x)*Iy(y)>0) {cx.strokeRect( X(x)-kkline, Y(y)-kkline, kkline*2, kkline*2) } }
cx.stroke()
...

https://www.macosaweb.it/script/funzione_no.htm

...
aX = 0; bX = 32; aY = 0; bY = 3
Dx = 1; Dy = 1

titolo = "E' il grafico di una funzione?  Perche'?"
Cax="brown"; Cgr="white"
quadro=0

C1="blue"

n=300; at=3; bt=Math.PI*10; ab=bt-at
for(i=0;i<n;i=i+1) {t=at+ab/n*i
L0x[i]=t-1.15*Math.sin(t)*Math.tan(7/10*Math.PI); L0y[i]=Math.sin(t)+1.35 }
...


Non tutte le funzioni sono facili da descrivere col software; ad esempio nel caso di una radice di grado dispari, che è definita anche per input negativi, occorre usare l'elevamento a potenza con qualche trucco, trasformando ad esempio x^(1/5) in -(-x)^(1/5).
Ecco come tracciare il grafico della funzione descritta qui a destra, introducendo una nuova funzione (qui chiamata POT).		    
5√ x2(x+1)
—————
(1+x2)(x+3)

https://www.macosaweb.it/script/radicali.htm

...
aX = -6; bX = 3; aY = -2; bY = 2
Dx = 1; Dy = 1

titolo = "y = ( x^2*(x+1) / ( (1+x^2)*(x+3) ) ^ (1/5)"
Cax="brown"; Cgr="white"
quadro=1
...
C1="blue"
...
function POT(x) { if(x>=0) {y = Math.pow(x,1/5)} else {y = -Math.pow(-x,1/5)}; return y }
function f(x) { y = POT( x*x*(x+1)/((1+x*x)*(x+3)) ); return y }  
...

https://www.macosaweb.it/script/talbot.htm

...
aX = -10; bX = 10; aY = -4; bY = 4
Dx = 20; Dy = 8

titolo = "Blue, red, green: Talbot's curves.  Orange: Lissajous curve"
Cax="white"; Cgr="grey"
quadro=1

C0="blue"; C1="red"; C2="green"; C3="orange"
A = 1.5; B = 1.2; F = 2.5; n=200
for(i=0;i<=n; i=i+1) { t = 2*Math.PI/n*i
L0x[i]=(A*A-2*F*F+F*F*Math.pow(Math.sin(t),2))*Math.sin(t)/B
L0y[i]=(A*A+F*F*Math.pow(Math.sin(t),2))*Math.cos(t)/A       }
A = 3.5; B = 1; F = 2; n=200
for(i=0;i<=n; i=i+1) { t = 2*Math.PI/n*i
L1x[i]=(A*A-2*F*F+F*F*Math.pow(Math.sin(t),2))*Math.sin(t)/B
L1y[i]=(A*A+F*F*Math.pow(Math.sin(t),2))*Math.cos(t)/A  }
A = 1; B = 1/2; F = 1; n=200
for(i=0;i<=n; i=i+1) { t = 2*Math.PI/n*i
L2x[i]=(A*A-2*F*F+F*F*Math.pow(Math.sin(t),2))*Math.sin(t)/B
L2y[i]=(A*A+F*F*Math.pow(Math.sin(t),2))*Math.cos(t)/A  }
n=200
for(i=0;i<=n; i=i+1) { t = 2*Math.PI/n*i
L3y[i] = 3*Math.sin(3*t+1); L3x[i]=9*Math.sin(t)  }
...

https://www.macosaweb.it/script/graficoXpunti5.htm   https://www.macosaweb.it/script/graficoXp5.htm

...
aX = 0; bX = 180; aY = 0; bY = 300
Dx = 10; Dy = 50

titolo = "retta di regressione vincolata a passare per (0,0)"
Cax="brown"; Cgr="grey"
quadro=1

Q1x = [55,   70, 155, 160, 155, 115, 105, 165, 110, 115,   85, 165, 110, 155, 105]
Q1y = [85, 115, 205, 230, 185, 185, 145, 240, 140, 155, 125, 290, 170, 195, 135]

function f(x) { y = 1.42*x; return y }  
function g(x) { y = 1/0; return y }
function h(x) { y = 1/0; return y }
function k(x) { y = 1/0; return y }...

https://www.macosaweb.it/script/graficoXpunti6a.htm
https://www.macosaweb.it/script/graficoXpunti6.htm


Per le "medie mobili" vedi qui e (gli esempi).

...
aX = 0; bX = 110; aY = -50; bY = 450
Dx = 10; Dy = 50

titolo = "mm mensili di pioggia a Genova tra il 1984 e il 1992 e loro medie mobili (fatte 5 volte)"
Cax="brown"; Cgr="grey"
quadro=1

L1y = [41, 44, 72, 79, 197, 62, 0, 200, 52, 95, 155, 108, 71, 34, 257, 37, 161, 68, 0, 20, 14, 7, 63, 112, 172,
67, 48, 197, 16, 30, 63, 24, 115, 42, 88, 34, 70, 159, 30, 115, 65, 30, 95, 61, 88, 276, 112, 42, 187, 35, 111,
64, 101, 61, 11, 26, 25, 149, 0, 70, 10, 97, 27, 286, 12, 5, 14, 232, 57, 38, 6, 22, 34, 19, 7, 142, 2, 25, 6, 68,
61, 349, 84, 157, 44, 71, 61, 27, 93, 44, 67, 0, 423, 145, 57, 0, 47, 44, 65, 78, 16, 110, 28, 49, 391, 245, 54, 72]
for(i=0; i < L1y.length; i=i+1) {L1x[i]=i}  // come x prendo 0, 1, ..., num. delle y meno 1
C1="blue"
L2y = [41, 57.91, 73.3, 85.18, 92.1, 94.81, 95.9, 97.87, 100.942, 103.708, 105.009, 105.4, 106.535, 108.267, 108.195,
102.084, 88.42, 69.19, 50.59, 38.87, 38.37, 48.69, 65.49, 82.19, 93.27, 96.31, 91.93, 82.71, 72.01, 63.4, 59.16,
59.37, 62.2, 65.75, 69.53, 73.79, 78.08, 80.85, 80.62, 77.94, 75.54, 77.41, 85.91, 99.92, 114.449, 123.574, 124.096,
117.185, 106.923, 96.62, 87.39, 78.12, 68.22, 58.59, 51.66, 49.14, 50.14, 52.52, 54.72, 58.47, 65.32, 75.04, 82.93,
85.72, 83.07, 79.32, 76.4, 73.22, 65.89, 54.32, 41.82, 33.55, 31.46, 34.3, 38.23, 40.87, 42.74, 48.63, 62.87, 85.96,
110.641, 127.288, 128.69, 116.358, 97.07, 79.21, 67.32, 63.02, 67.06, 79.96, 100.171, 120.136, 129.992, 122.806,
102.084, 77.92, 60.74, 53.63, 54.15, 58.88, 68.24, 85.09, 109.867, 136.044, 151.661, 145.927, 116.61, 72]
for(i=0; i < L2y.length; i=i+1) {L2x[i]=i}  // come x prendo 0, 1, ..., num. delle y meno 1
C2="red"
...

Le medie mobili per "lisciare" curve ottenute con coppie (x,y) in cui le y sono approssimate. Esempio (vedi):


 

https://www.macosaweb.it/script/graficoXpunti7.htm   https://www.macosaweb.it/script/graficoXp7.htm

...
aX = 0; bX = 100; aY = 0; bY = 2
Dx = 10; Dy = 0.5

titolo = "Abitanti in una certa citta' nel 1970 per fasce di eta' (le % sono le aree dei rettangoli)"
// (18% abitanti eta' (0,15) anni, 16.5% [15,25) anni, 50% [25,55), 10% [55,65), 5.5% [65,100])
Cax="grey"; Cgr="grey"
quadro=1

L1x=[0,0,15,15];     L1y=[0,18,18,0];     for(i=0;i<4;i=i+1) L1y[i]=L1y[i]/(15-0)
L2x=[15,15,25,25];   L2y=[0,16.5,16.5,0]; for(i=0;i<4;i=i+1) L2y[i]=L2y[i]/(25-15)
L3x=[25,25,55,55];   L3y=[0,50,50,0];     for(i=0;i<4;i=i+1) L3y[i]=L3y[i]/(55-25)
L4x=[55,55,65,65];   L4y=[0,10,10,0];     for(i=0;i<4;i=i+1) L4y[i]=L4y[i]/(65-55)
L5x=[65,65,100,100]; L5y=[0,5.5,5.5,0];   for(i=0;i<4;i=i+1) L5y[i]=L5y[i]/(100-65)

C1=C2=C3=C4=C5="blue"
...

https://www.macosaweb.it/script/graficoXpunti7b.htm   https://www.macosaweb.it/script/graficoXp7b.htm

...
aX = 0; bX = 100; aY = 0; bY = 3.5
Dx = 10; Dy = 0.5

titolo = "Morti in Italia nel 1951 per fasce di eta' (le % sono le aree dei rettangoli)"
Cax="grey"; Cgr="grey"
quadro=1

T = 4819  // (migliaia di morti, 729 tra 0 e 5 anni, 35 tra 5 e 10, 77 tra 10 e 20, ...)
T = T/100
L1x=[ 0, 0, 5, 5];   L1y=[0,729,729,0];   for(i=0;i<4;i=i+1) L1y[i]=L1y[i]/(5-0)/T
L2x=[ 5, 5,10,10];   L2y=[0,35,35,0];     for(i=0;i<4;i=i+1) L2y[i]=L2y[i]/(10-5)/T
L3x=[10,10,20,20];   L3y=[0,77,77,0];     for(i=0;i<4;i=i+1) L3y[i]=L3y[i]/(20-10)/T
L4x=[20,20,30,30];   L4y=[0,132,132,0];   for(i=0;i<4;i=i+1) L4y[i]=L4y[i]/(30-20)/T
L5x=[30,30,40,40];   L5y=[0,134,134,0];   for(i=0;i<4;i=i+1) L5y[i]=L5y[i]/(40-30)/T
L6x=[40,40,50,50];   L6y=[0,285,285,0];   for(i=0;i<4;i=i+1) L6y[i]=L6y[i]/(50-40)/T
L7x=[50,50,60,60];   L7y=[0,457,457,0];   for(i=0;i<4;i=i+1) L7y[i]=L7y[i]/(60-50)/T
L8x=[60,60,75,75];   L8y=[0,1401,1401,0]; for(i=0;i<4;i=i+1) L8y[i]=L8y[i]/(75-60)/T
L9x=[75,75,100,100]; L9y=[0,1569,1569,0]; for(i=0;i<4;i=i+1) L9y[i]=L9y[i]/(100-75)/T

C1=C2=C3=C4=C5=C6=C7=C8=C9="blue"
...
Vedi sotto gli istogrammi per realizzati in altro modo
 

https://www.macosaweb.it/script/graficoXpunti8.htm   (il rapporto tra base e altezza deve essere 20/8, ovvero 10/4, ovvero 5/2, ...)

...
aX = 0; bX = 20; aY = 4; bY = 12
Dx = 1; Dy = 1

titolo = "figure in un sistema monometrico"
Cax="brown"; Cgr="grey"
quadro=1

Q1x = L1x = [5,10,10,5,5,9,9,6,6,8,8,7]
Q1y = L1y = [5,5,10,10,6,6,9,9,7,7,8,8]
L2x = [5+7,10+7,10+7,5+7,5+7,9+7,9+7,6+7,6+7,8+7,8+7,7+7]
L2y = L1y

C1="blue"; C2="red"
...

https://www.macosaweb.it/script/graficoXpunti9.htm

...
aX = 0; bX = 800; aY = 0; bY = 100
Dx = 50; Dy = 5

titolo = "A 763 associo 100 (linee rosse).  A quale percentuale corrisponde 264 (linee verdi)?"
Cax="brown"; Cgr="grey"
quadro=1

Q1x = L1x = [0, 763]
Q1y = L1y = [0, 100]
L2x = [763, 763, 0]
L2y = [0, 100, 100]
L3x = [264, 264, 0]
L3y = [0, 100*264/763, 100*264/763]
Q2x = [0]; Q2y = [100*264/763]

C1="blue"; C2="red"; C3="green" // colore del grafico L3
...

https://www.macosaweb.it/script/graficoXpunti10.htm

...
aX = 0; bX = 100; aY = 0; bY = 800
Dx = 5; Dy = 50

titolo = "A 100 associo 763 (linee rosse).  A quale percentuale corrisponde 264 (linee verdi)?"
Cax="brown"; Cgr="grey"
quadro=1

Q1y = L1y = [0, 763]
Q1x = L1x = [0, 100]
L2y = [763, 763, 0]
L2x = [0, 100, 100]
L3y = [264, 264, 0]
L3x = [0, 100*264/763, 100*264/763]
Q2y = [0]; Q2x = [100*264/763]

C1="blue"; C2="red"; C3="green"
...

https://www.macosaweb.it/script/graficoXpunti11.htm

...
aX = -1; bX = 12; aY = -2; bY = 12
Dx = 1; Dy = 1

titolo = "una funzione definita a tratti  (0 tra 0 e 5,  x-5 tra 5 e 8,  2x-13 oltre 8)"
Cax="brown"; Cgr="grey"
quadro=1

C1="blue"
Q1x=[0,5,8]; Q1y=[0,0,3]

function f(x) { y = 1/0; if(x>0) y = 0; if(x>5) y = x-5; if(x>8) y = 2*x-13; return y }  
function g(x) { y = 1/0; return y }
function h(x) { y = 1/0; return y }
function k(x) { y = 1/0; return y }
...

Un esempio di rappresentazione di dati approssimati conoscendone la precisione.  Per studiare le caratteristiche di un elastico, lo si tiene sospeso per un estremo e si appendono all'altro estremo diversi oggetti. Ogni volta si misura il peso dell'oggetto e il corrispondente allungamento dell'elastico. Il peso F degli oggetti viene misurato con una bilancia a molla con divisioni di 10 g (in modo che se l'ago si ferma vicino alla tacca 260 si può assumere che il peso sia 260±5 g). Le lunghezze che assume l'elastico sono misurate con la precisione di 1 mm, in modo che i valori dell'allungamento H (ottenuti come differenza di due lunghezze) hanno la precisione di 2 mm. Si ottengono i valori riportati nel grafico, con la loro precisione:

15±2, 260±5    20±2, 380±5    39±2, 710±5    52±2, 990±5

https://www.macosaweb.it/script/graficoXpunti12.htm

x = H
y = F

 

Minima pendenza: (990-5)/(52+2) = 18.2407...   Massima pendenza: (710+5)/(39-2) = 19.3243...   y = k·x con 18.24 ≤ k ≤ 19.33

...
aX = 0; bX = 60; aY = 0; bY = 1100
Dx = 5; Dy = 100

titolo = "y: peso (g) di certi oggetti, x: allungamento (mm) dell'elastico.  Che dire della relazione che lega x e y?"
Cax="brown"; Cgr="grey"
quadro=1

C0=C1=C2=C3="red"
L0x=[15-2,15+2,15+2,15-2,15-2]; L0y=[260-5,260-5,260+5,260+5,260-5]
L1x=[20-2,20+2,20+2,20-2,20-2]; L1y=[380-5,380-5,380+5,380+5,380-5]
L2x=[39-2,39+2,39+2,39-2,39-2]; L2y=[710-5,710-5,710+5,710+5,710-5]
L3x=[52-2,52+2,52+2,52-2,52-2]; L3y=[990-5,990-5,990+5,990+5,990-5]

Q0x=[39-2,52+2]; Q0y=[710+5,990-5]

function f(x) { y = (990-5)/(52+2)*x; return y }  
function g(x) { y = (710+5)/(39-2)*x; return y }
function h(x) { y = 1/0; return y }
function k(x) { y = 1/0; return y }
...

    Esempi con la finestra grafica quadrata.

Grande:  https://www.macosaweb.it/script/grafXpunti0.htm.   Piccola:  https://www.macosaweb.it/script/grafXp0.htm.  Molto piccola:  https://www.macosaweb.it/script/grXp0.htm.  Piccolissima:  https://www.macosaweb.it/script/grXp0.htm

...
aX = 6; bX = 19; aY = 35; bY = 48
Dx = 1; Dy = 1

titolo = "I T A L I A   (e capoluoghi di regione)"
Cax="brown"; Cgr="grey"
quadro=1

L1x = [8,7.87,7.6,7,6.81,6.81,7.2,7.08,6.6,6.6,7,6.82,6.82,7.7,7.7,7.5,7.5,8,8.15,8.47,8.7,8.8,8.9,10.1,10.25,10.45,10.5,10.46,10.75,10.73,
11.2,11.05,11.1,11.2,12.2,13.1,13.8,14.1,14.2,14.4,14.5,14.35,14.75,14.9,15.35,15.55,15.65,16.15,16.2,16.23,16,15.83,15.9,15.6,
15.65,16,16.6,16.58,17,17.1,17.18,17.125,16.8,16.52,16.5,17,17.2,17.2,17.82,18,18.36,18.5,17.9,15.9,15.87,16.25,16.2,16.1,15.1,
15,14.23,13.55,12.4,12.28,12.5,12.5,12.2,12.3,13.1,13.5,13.8,13.8,13.9,13.85,13.6,13.55,13.6,13.5,13.6,13.4,13.65,12.45,12.1,11.5,
11,10.5,10.4,10.1,10.05,10.2,10.05,10,9.6,9.5,9.3,9.3,9,9.1,8.95,8.85,8.4,8.45,8.1,8]
L1y = [46,45.9,45.95,45.85,45.81,45.7,45.35,45.2,45.1,45,44.6,44.5,44.35,44.12,44.08,43.9,43.8,43.87,43.9,44.3,44.38,44.4,44.38,44,43.84,
43.3,43,42.92,42.88,42.8,42.5,42.4,42.35,42.38,41.8,41.25,41.175,40.75,40.8,40.7,40.65,40.55,40.65,40.3,40,40.1,40.1,39,38.91,38.8,
38.72,38.6,38.45,38.25,37.85,37.9,38.45,38.75,38.91,38.89,38.95,39.4,39.6,39.65,39.77,40.5,40.5,40.4,40.28,40,39.75,40.1,40.7,41.5,
41.6,41.75,41.9,41.96,41.94,42,42.45,43.63,44.2,44.78,44.8,45,45.25,45.43,45.6,45.75,45.65,45.55,45.6,45.7,45.8,45.83,46,46,46.2,
46.3,46.5,46.68,47.1,47.05,46.78,46.81,46.5,46.6,46.45,46.28,46.2,46.35,46.3,46.5,46.5,46.35,46,45.8,45.8,46,46.25,46.4,46.28,46]

L2x = [9.2,9.7,9.8,9.75,9.68,9.78,9.6,9.2,9.1,9,8.8,8.7,8.6,8.4,8.35,8.5,8.38,8.42,8.18,8.2,8.5,8.6,9.2]
L2y = [41.3,41,40.5,40.4,40.28,40.1,39.15,39.25,39.2,39,38.8,38.9,38.8,39.2,39.5,39.85,40,40.4,40.7,40.95,40.85,40.9,41.3]

L3x = [15.5, 15.2, 14.95,14.3, 14,   13.8, 13.3, 13.05,12.85,12.7,12.5, 12.43,12.6,13.9,14.2, 14.5, 15,   15.12,15.12,15.35,15.3, 15.15,15.13,15.55,15.47]
L3y = [38.32,38.15,38.2, 38.02,38.04,37.95,38.23,38.21,38.05,38.2,38.05,37.8, 37.6,37.1,37.05,36.77,36.74,36.66,36.8, 37,   37.25,37.3, 37.5, 38.3, 38.32]

Q1x = [8.93,9.18,7.69,7.31,11.26,9.12,13.36,14.27,12.32,12.48,16.87,13.40,15.81,16.59,11.34,13.77,13.51,14.66,11.12,12.39]
Q1y = [44.41,45.47,45.07,45.74,43.77,39.22,38.12,40.85,45.44,41.90,41.12,42.35,40.64,38.91,44.49,45.65,43.61,41.56,46.07,43.11]

C1="red"; C2="red"; C3="red"
...

Nel secondo, terzo e quarto script con l'aggiunta:

...
Co=Co1=Co2=Co3=Co4=Co5=Co6=Co7=Co8=Co9=""
// se vuoi colorare l'interno del poligono L0 o L1 o ... L9 poni Co="colore" o Co1="colore" o ... Co9="colore"
Co1=Co2=Co3="limegreen"
...

https://www.macosaweb.it/script/diseq2.htm  (← commenti nel file)

https://www.macosaweb.it/script/diseq3.htm   https://www.macosaweb.it/script/diseq4.htm  (← commenti nei file)


 

https://www.macosaweb.it/script/distrib.htm   e   https://www.macosaweb.it/script/distrib2.htm  (sull'asse x le età; si è presa 100 come età massima in quanto allora era trascurabile il numero degli ultracentenari; le altezze dei rettangoli corrispondono alle frequenze medie per anno; nel secondo istogramma si vede che tra 0 e 5 anni la frequenza annua media era molto più alta che tra 75 e 100 anni; come sono diversi questi istogrammi da quelli del 1920 e da quelli del 2020?) 

...
aX = -10; bX = 110; aY = -0.01; bY = 1.85/100
Dx = 0; Dy = 0
titolo = "distribuzione per eta' popolaz. in una data citta' italiana nel 1970"
Cax="white"; Cgr="white"
quadro=0

C0="black"; C1="grey"

L1x=[-10,110]; L1y=[0,0]
I=[0,  15,  25,  55,  65, 100]
P=[ 18, 16.5,  50, 10, 5.5]; NP=P.length
SUM=0; for(i=0;i<NP;i=i+1)  {SUM=SUM+P[i]}
mean=0; for(i=0;i<NP;i=i+1) {mean=mean+P[i]*(I[i]+I[i+1])/2}; mean=mean/SUM
Tot=0; for(i=0;i<NP;i=i+1) {Tot=Tot+P[i]}; for(i=0;i<NP;i=i+1) {P[i]=P[i]/Tot/(I[i+1]-I[i])}
L0x=[]; j=0; for(i=1;i<=NP;i=i+1) { L0x[j]=I[i-1]; L0x[j+1]=I[i-1]; L0x[j+2]=I[i]; L0x[j+3]=I[i]; j=j+4 }
L0y=[]; j=0; for(i=1;i<=NP;i=i+1) { L0y[j]=0; L0y[j+1]=P[i-1]; L0y[j+2]=P[i-1]; L0y[j+3]=0; j=j+4 }
...
Co=Co1=Co2=Co3=Co4=Co5=Co6=Co7=Co8=Co9="";       T0=T1=T2=T3=T4=T5=T6=T7=T8=T9=""
// Per colorare l'interno del poligono L0 o L1 o ... L9: Co="colore" o Co1="colore" o ... Co9="colore"
// Puoi mettere fino a 10 scritte (S) in diverse posizioni (x,y) con T0=["S",x,y],...,T9=["S",x,y]
Co="silver"
T0=["0",0,-0.001]; T1=["15",15,-0.001]; T2=["25",25,-0.001]; T3=["55",55,-0.001]; T4=["65",65,-0.001]; T5=["100",100,-0.001]

// 10 scritte di piccole dimensioni con s0=["S",x,y],.., s9=["S",x,y]
s0=s1=s2=s3=s4=s5=s6=s7=s8=s9=""
s0=["18%",6.5,0.0175]; s1=["16.5%",21,0.0175]; s2=["50%",(25+55)/2,0.0175]; s3=["10%",60,0.0175]; s4=["5.5%",165/2,0.0175]
s5=["eta' media = "+Math.round(mean),89,0.012]
...
...
aX = -5; bX = 105; aY = -0.015; bY = 3.1/100
Dx = 5; Dy = 0
titolo = "Morti per eta' in Italia nel 1951 (% proporz. aree rettangoli)"
Cax="silver"; Cgr="silver"
quadro=0
C0="black"; C1="grey"
L1x=[-5,105]; L1y=[0,0]
I=[0,  5, 10, 20, 30, 40, 50, 60, 75, 100]
P=[ 729,35,77,132,134,285,457,1401,1569]; NP=P.length
SUM=0; for(i=0;i<NP;i=i+1)  {SUM=SUM+P[i]}
mean=0; for(i=0;i<NP;i=i+1) {mean=mean+P[i]*(I[i]+I[i+1])/2}; mean=mean/SUM
Tot=0; for(i=0;i<NP;i=i+1) {Tot=Tot+P[i]}; for(i=0;i<NP;i=i+1) {P[i]=P[i]/Tot/(I[i+1]-I[i])}
L0x=[]; j=0; for(i=1;i<=NP;i=i+1) { L0x[j]=I[i-1]; L0x[j+1]=I[i-1]; L0x[j+2]=I[i]; L0x[j+3]=I[i]; j=j+4 }
L0y=[]; j=0; for(i=1;i<=NP;i=i+1) { L0y[j]=0; L0y[j+1]=P[i-1]; L0y[j+2]=P[i-1]; L0y[j+3]=0; j=j+4 }
...
Co=Co1=Co2=Co3=Co4=Co5=Co6=Co7=Co8=Co9="";       T0=T1=T2=T3=T4=T5=T6=T7=T8=T9=""
..-
Co="silver"
T0=["eta' media di morte = "+Math.round(mean),55,0.025]
...
s0=s1=s2=s3=s4=s5=s6=s7=s8=s9=""
s0=["0",0,-0.0015]; s1=["20",20,-0.0015]; s2=["40",40,-0.0015]; s3=["60",60,-0.0015]; s4=["80",80,-0.0015]; s5=["100",100,-0.0015]
...

https://www.macosaweb.it/script/grafXp1.htm   e   https://www.macosaweb.it/script/grafXp1b.htm

Immagine a sinistra:

...
aX = 0; bX = 100; aY = 0; bY = 100
Dx = 10; Dy = 10

titolo = "piano cartesiano 100 x 100"
Cax="brown"; Cgr="grey"
quadro=1

Q1x = L1x = [10,50,90,50,10]
Q1y = L1y = [50,10,50,90,50]
Q2x = L2x = [30,70,70,30,30]
Q2y = L2y = [30,30,70,70,30]
O0x = O0y =[50]

C1="red"; C2="black"

function f(x) { y = 50+Math.sqrt(40*40-(x-50)*(x-50)); return y }  
function g(x) { y = 50-Math.sqrt(40*40-(x-50)*(x-50)); return y }
function h(x) { y = 1/0; return y }
function k(x) { y = 1/0; return y }
...

Immagine a destra:

...
aX = 0; bX = 100; aY = 0; bY = 100
Dx = 10; Dy = 10

titolo = "piano cartesiano 100 x 100"
Cax="brown"; Cgr="grey"
quadro=1

Q1x = L1x = [10,50,90,50,10]
Q1y = L1y = [50,10,50,90,50]
Q2x = L2x = [30,70,70,30,30]
Q2y = L2y = [30,30,70,70,30]
O0x = O0y =[50]

N = 200; H = 2*Math.PI/N
for(i=0; i<=N; i=i+1) {L3x[i]=50+40*Math.cos(H*i); L3y[i]=50+40*Math.sin(H*i)
                       L4x[i]=50+10*Math.cos(H*i); L4y[i]=50+10*Math.sin(H*i)}

C1="red"; C2="black"; C3=C4="violet"
...

Formato piccolo: https://www.macosaweb.it/script/grafXp2.htm  e  grande:  https://www.macosaweb.it/script/grafXpunti2.htm

...
aX = -10; bX = 10; aY = -10; bY = 10
Dx = 1; Dy = 1

titolo = "punti a caso nella corona circolare centrata in (1,-2) tra i raggi 3 e 8"
Cax="brown"; Cgr="grey"
quadro=1

jP=-1
for(i=0; i < 2e4; i=i+1) {xP = Math.random()*20-10; yP = Math.random()*20-10;
if((xP-1)*(xP-1)+(yP+2)*(yP+2) < 8*8  &  (xP-1)*(xP-1)+(yP+2)*(yP+2) > 3*3) {jP=jP+1; Q1x[jP]=xP; Q1y[jP]=yP } }

O1x=[1]; O1y[0]=[-2]

C1="red"; C2="black"
...

Posso anche modificare dimensioni e colore dei punti operando su rQ, colQ, rO=2.6, colO. Le figure seguenti sono ottenute con questo script https://www.macosaweb.it/script/grafXp2b.htm ottenuto con le modifiche sotto descritte [nel secondo si sono tracciati meno punti: invece di for(i=0; i < 2e5; i=i+1) si è usato for(i=0; i < 1e4; i=i+1)] 

...
jP=-1
for(i=0; i < 2e5; i=i+1) {xP = Math.random()*20-10; yP = Math.random()*20-10;
if((xP-1)*(xP-1)+(yP+2)*(yP+2) < 8*8  &  (xP-1)*(xP-1)+(yP+2)*(yP+2) > 3*3) {jP=jP+1; O1x[jP]=xP; O1y[jP]=yP } }
...
// puoi cambiare raggi e colore dei pallini Qn e On; valori standard:  rQ=2.6; colQ="black"; rO=2.6; colO="black" 
rQ=2.6; colQ="black"; rO=2.6; colO="black"
rO=0.5; colO="red"
https://www.macosaweb.it/script/corona.htm 
...
titolo = "corona circolare centrata in (1,-2) tra i raggi 3 e 8"
Cax="brown"; Cgr="grey"
...
C3=C4="blue"; C1=C2="lime"
N = 200; H = 2*Math.PI/N
L1x=[-10,10];L1y=[-2,-2]; L2x=[1,1];L2y=[-10,10]
for(i=0; i<=N; i=i+1)
    { L3x[i]=1+8*Math.cos(H*i); L3y[i]=-2+8*Math.sin(H*i)
      L4x[i]=1+3*Math.cos(H*i); L4y[i]=-2+3*Math.sin(H*i) }
...
Co=Co1=Co2=Co3=Co4=Co5=Co6=Co7=Co8=Co9=""; ...
Co3="orange"; Co4="white"
...
 
 

Lo script   https://www.macosaweb.it/script/gradi.htm  traccia la figura qui a sinistra:  un quarto di cerchio di raggio 1 con indicati, con dei pallini, 5°, 10°, ..., 85°.
Può essere usato ad esempio per trovare la pendenza di una strada o l'inclinazione dei raggi dell sole, come nell'esempio che puoi vedere qui.

Nella scuola superiore si vede come questi calcoli possono essere svolti utilizzando la funzione atan (arcotangente).

https://www.macosaweb.it/script/grafXp3.htm   https://www.macosaweb.it/script/grafXp4.htm

...
aX = 0; bX = 5; aY = 0; bY = 5
Dx = 1/2; Dy = 1/2

titolo = "piano cartesiano 5 x 5"
Cax="brown"; Cgr="grey"
quadro=1

Q1x = L1x = [0.5,1,4,4.5,3,4.5,2,0,0.5]
Q1y = L1y = [0,0,1,2.5,3,3.5,4.5,2.5,0]

O1x = [2.135]; O1y = [2.159]

C1="blue"
...

https://www.macosaweb.it/script/grafXpunti_mm.htm     https://www.macosaweb.it/script/grafXp_mm.htm

...
aX = 0; bX = 80; aY = 0; bY = 80
Dx = 1; Dy = 1

titolo = ""
Cax="coral"; Cgr="orange"
quadro=0

C0="silver"; C1="silver"
C2="coral"; C3="coral"
L0x = [ 5,5,15,15,25,25,35,35,45,45,55,55,65,65,75,75]
L0y = [80,0,0,80,80, 0, 0,80,80, 0, 0,80,80, 0, 0,80,80, 0]
L1y = [ 5,5,15,15,25,25,35,35,45,45,55,55,65,65,75,75]
L1x = [80,0,0,80,80, 0, 0,80,80, 0, 0,80,80, 0, 0,80,80, 0]
L2x = [ 0,0,10,10,20,20,30,30,40,40,50,50,60,60,70,70,80,80]
L2y = [80,0,0,80,80, 0, 0,80,80, 0, 0,80,80, 0, 0,80,80, 0]
L3y = [ 0,0,10,10,20,20,30,30,40,40,50,50,60,60,70,70,80,80]
L3x = [80,0,0,80,80, 0, 0,80,80, 0, 0,80,80, 0, 0,80,80, 0]

C4="black"
Q0x=L4x = [10,20,55,75,35,65,30,30,10]
Q0y=L4y = [20,10,10,20,20,35,70,20,20]
...

Un altro esempio, con la scritta sotto al grafico (abbiamo copiato solo la parte inferiore dell'immagine):
https://www.macosaweb.it/script/bicicletta.htm 

...
aX = 0; bX = 120; aY = 0; bY = 120
Dx = 1; Dy = 1
titolo = ""
Cax="coral"; Cgr="orange"
quadro=0

C0="silver"; C1="silver"
C2="coral"; C3="coral"
L0x = [ 5,5,15,15,25,25,35,35,45,45,55,55,65,65,75,75,85,85,95,95,105,105,115,115]
L0y = [120,0,0,120,120, 0, 0,120,120, 0, 0,120,120, 0, 0,120,120, 0, 0,120,120, 0, 0,120,120, 0]
L1y = [ 5,5,15,15,25,25,35,35,45,45,55,55,65,65,75,75,85,85,95,95,105,105,115,115]
L1x = [120,0,0,120,120, 0, 0,120,120, 0, 0,120,120, 0, 0,120,120, 0, 0,120,120, 0, 0,120,120, 0]
L2x = [ 0,0,10,10,20,20,30,30,40,40,50,50,60,60,70,70,80,80,90,90,100,100,110,110,120,120]
L2y = [120,0,0,120,120, 0, 0,120,120, 0, 0,120,120, 0, 0,120,120, 0, 0,120,120, 0, 0,120,120, 0]
L3y = [ 0,0,10,10,20,20,30,30,40,40,50,50,60,60,70,70,80,80,90,90,100,100,110,110,120,120]
L3x = [120,0,0,120,120, 0, 0,120,120, 0, 0,120,120, 0, 0,120,120, 0, 0,120,120, 0, 0,120,120, 0]

L4x=[10,10,105]; L4y=[65,10,10]
L5x=[0,0.33,0.83,1.2,1.7,1.83,2.33,2.57,3,46]; for(i=0; i < L5x.length; i=i+1) {L5x[i]=10+L5x[i]*30}
L5y=[0,5,15,18,18,20,34,41,46]; for(i=0; i < L5y.length; i=i+1) {L5y[i]=10+L5y[i]}

O1x=[L5x[0],L5x[3],L5x[4],L5x[8]]; O1y=[L5y[0],L5y[3],L5y[4],L5y[8]]
...
// Puoi mettere fino a 10 scritte (S) in diverse posizioni (x,y) con T0=["S",x,y],...,T9=["S",x,y]
T0=["0",10,7]; T1=["1",40,7]; T2=["2",70,7]; T3=["3",100,7]
T4=["0",5,10]; T5=["10",5,"20"]; T6=["20",5,"30"]; T7=["30",5,"40"]; T8=["40",5,"50"]; T9=["50",5,"60"]
...
// ----------------------------------------------------------------------------------
...
AY="Dx = "+Dx
...
if(quadro >1 || quadro <1) {AY="";AX="";BX=""; AAX="";BBX="";AAY="";BBY=""}  // se "quadro" non e' 1 tolgo indicazioni lungo assi

AY="un percorso in bicicletta durato 3 h (1 mm = 2 min), con una sosta"
...

https://www.macosaweb.it/script/campo.htm     https://www.macosaweb.it/script/campo2.htm

...
aX = 0; bX = 100; aY = 0; bY = 100
Dx = 20; Dy = 20

titolo = "vertici A in alto,  B a sinistra, ...,  E a destra"
Cax="grey"; Cgr="grey"
quadro=1
C1=C2="black"
Q1x=L1x=[ 10, 30, 65, 90, 35, 10 ]
Q1y=L1y=[ 20, 10, 15, 60, 90, 20 ]
L2x=[ 30, 35, 65]; L2y=[ 10, 90, 15]
...

Posso calcolare l'area con lo script "tri lato-lato-lato" che trovi qui (vedi gli esempi presenti nello script).

Cambiando la griglia (Dx e Dy uguali a 10 invece che a 20) vedo che, in realtà, il campo è stato tracciato con in vertici su ascisse e coordinate pari a multipli di 5.  Nell'ipotesi che queste siano le coordinate esatte posso trovare l'area con lo script "area polig":

Le lunghezze dei lati presenti sotto alla immagine (AB = …) sono state calcolate con lo script "dist".

https://www.macosaweb.it/script/mappa.htm

...
aX = -5; bX = 205; aY = -15; bY = 195
Dx = 0; Dy = 0

titolo = "0-10%         10-20%         20-30%          > 30%"
Cax="white"; Cgr="white"
quadro=0
C0=C1=C2=C3=C4=C5=C6=C7=C8=C9="black"

L1x=[57,10,8,27,48,57,45,67,75,57]
L1y=[158,121,78,43,47,72,101,112,130,158]
L2x=[27,48,57, 45, 67, 75,62,112,112,78,115,101,27]
L2y=[43,47,72,101,112,130,150,150,118,103,35.5,25,43]
L3x=[112,78,115,184,168,112,112]
L3y=[118,103,35.5,87,145,144,118]
L4x=[168,184,101,178,197,168]
L4y=[145, 87, 25, 4,115,145]
L5x=[10,35,35,10,10]; L5y=[170,170,195,195,170]; for(i=0;i<5;i=i+1) {L5x[i]=L5x[i]+10; L5y[i]=L5y[i]}
L6y=L7y=L8y=L5y
L6x=[10,35,35,10,10]; for(i=0;i<5;i=i+1) {L6x[i]=L6x[i]+55}
L7x=[10,35,35,10,10]; for(i=0;i<5;i=i+1) {L7x[i]=L7x[i]+100}
L8x=[10,35,35,10,10]; for(i=0;i<5;i=i+1) {L8x[i]=L8x[i]+145}

// modifica la definizione della funzione di cui volessi tracciare il grafico (f blu, g verde, h rosso, k arancione)
// Esempi: y=2*x+5   y=x*x/3  y= Math.sqrt(x-5)*10+3  y= Math.pow(x,3) (=x^3)  y= Math.sin(x/360*Math.PI)

function f(x) { y = 1/0; return y }  
function g(x) { y = 1/0; return y }
function h(x) { y = 1/0; return y }
function k(x) { y = 1/0; return y }

Co=Co1=Co2=Co3=Co4=Co5=Co6=Co7=Co8=Co9="";     T0=T1=T2=T3=T4=T5=T6=T7=T8=T9=""
// Se vuoi colorare l'interno del poligono L0 o L1 o ... L9 poni Co="colore" o Co1="colore" o ... Co9="colore"
// Puoi mettere fino a 10 scritte (S) in diverse posizioni (x,y) con T0=["S",x,y],...,T9=["S",x,y]

Co3=Co5="white"; Co1=Co6="lightgrey"; Co4=Co7="darkgrey"; Co2=Co8="grey"

T0=["A",10,50]; T1=["B",55,25]; T2=["C",130,100]; T3=["D",192,30]
T4 = ["Diffusione di X in 4 regioni confinanti",100,-8]
...

https://www.macosaweb.it/script/polari.htm

minimo: 44 mm (gen. 1º anno), massimo: 108 mm (mar. 2º anno)

https://www.macosaweb.it/script/spirale.htm

...
aX = -100; bX = 100; aY = -110; bY = 90
Dx = 10; Dy = 10

titolo = "una spirale  (raggio = 5*2^(angolo/4)"
// r = 5*2^(teta/4); x = r * cos(teta); y = r * sin(teta)
Cax="brown"; Cgr="grey"
quadro=1

C1="blue"

n=200; H = 2*Math.PI/n
for(i=0;i<=3*n; i=i+1) { t = H*i
L0x[i]= 5*Math.pow(2,t/4)*Math.cos(t)
L0y[i]= 5*Math.pow(2,t/4)*Math.sin(t)       }
...

https://www.macosaweb.it/script/asteroide.htm

...
aX = -1; bX = 1; aY = -1; bY = 1
Dx = 0.1; Dy = 0.1

titolo = "asteroide  ( x=cos(t)^3,  y=sin(t)^3 )"
Cax="brown"; Cgr="grey"
quadro=1

C1="blue"

n=200; H = 2*Math.PI/n
for(i=0;i<=3*n; i=i+1) { t = H*i
L0x[i]= Math.pow(Math.cos(t),3)
L0y[i]= Math.pow(Math.sin(t),3)       }
...

https://www.macosaweb.it/script/isto_barre.htm

...
aX = 0; bX = 12; aY = 0-5; bY = 12-5
Dx = 1; Dy = 1

titolo = "temperature in gradi a marzo alle 12 (14 3 giorni,...)" 
Cax="silver"; Cgr="grey"
quadro=1

C0=C1=C2=C3=C4=C5=C6=C7="black"
L0x = [2,3,3,2,2]; L0y = [0,0,3,3,0]; O0x = [2.5,2.5,2.5]; O0y = [.5,1.5,2.5]
L1x = [3,4,4,3,3]; L1y = [0,0,6,6,0]; O1x = [3.5,3.5,3.5,3.5,3.5,3.5]; O1y = [.5,1.5,2.5,3.5,4.5,5.5]
L2x = [4,5,5,4,4]; L2y = [0,0,4,4,0]; O2x = [4.5,4.5,4.5,4.5]; O2y = [.5,1.5,2.5,3.5]
L3x = [5,6,6,5,5]; L3y = [0,0,7,7,0]; O3x = [5.5,5.5,5.5,5.5,5.5,5.5,5.5]; O3y = [.5,1.5,2.5,3.5,4.5,5.5,6.5]
L4x = [6,7,7,6,6]; L4y = [0,0,4,4,0]; O4x = [6.5,6.5,6.5,6.5]; O4y = [.5,1.5,2.5,3.5]
L5x = [7,8,8,7,7]; L5y = [0,0,2,2,0]; O5x = [7.5,7.5]; O5y = [.5,1.5]
L6x = [8,9,9,8,8]; L6y = [0,0,1,1,0]; O6x = [8.5]; O6y = [.5]
L7x = [9,10,10,9,9]; L7y = [0,0,4,4,0]; O7x = [9.5,9.5,9.5,9.5]; O7y = [.5,1.5,2.5,3.5]
...
Co=Co1=Co2=Co3=Co4=Co5=Co6=Co7=Co8=Co9=""
// se vuoi colorare l'interno del poligono L0 o L1 o ... L9 poni Co="colore" o Co1="colore" o ... Co9="colore"
Co=Co1=Co2=Co3=Co4=Co5=Co6=Co7="yellow"
// 10 scritte di piccole dimensioni con s0=["S",x,y],.., s9=["S",x,y]
s0=s1=s2=s3=s4=s5=s6=s7=s8=s9=""
s0=["14",2.5,-0.5]; s1=["15",3.5,-0.5]; s2=["16",4.5,-0.5]; s3=["17",5.5,-0.5]
s4=["18",6.5,-0.5]; s5=["19",7.5,-0.5]; s6=["20",8.5,-0.5]; s7=["21",9.5,-0.5]
...

https://www.macosaweb.it/script/areogramma1.htm
https://www.macosaweb.it/script/areogramma2.htm
https://www.macosaweb.it/script/areogramma3.htm

Le pecentuali (calcolabili con questo script) sono 14.5%, 45.5%, 11.1%, 28.8%, in accordo con i pallini che suddividono il cerchio in 10 parti uguali. 

...
aX = -1; bX = 1; aY = -1; bY = 1
Dx = 1; Dy = 1

titolo = "125, 392, 96, 248"
Cax="white"; Cgr="white"
quadro=0

N=4; D = [125, 392, 96, 248]; T=0; for(i=0; i<N; i=i+1) T=T+D[i]

C0="black"; C1="red"; C2="blue"; C3="green"
n=300; H = 2*Math.PI/n; t0=0; 
L0x=[0];L0y=[0];for(i=1;i<=n; i=i+1) { t = H*i*D[0]/T; L0x[i]= Math.cos(t); L0y[i]= Math.sin(t)}; t0=t+t0
L1x=[0];L1y=[0];for(i=1;i<=n; i=i+1) { t = H*i*D[1]/T; L1x[i]= Math.cos(t+t0); L1y[i]= Math.sin(t+t0) } t0=t+t0
L2x=[0];L2y=[0];for(i=1;i<=n; i=i+1) { t = H*i*D[2]/T; L2x[i]= Math.cos(t+t0); L2y[i]= Math.sin(t+t0) }; t0=t+t0
L3x=[0];L3y=[0];for(i=1;i<=n; i=i+1) { t = H*i*D[3]/T; L3x[i]= Math.cos(t+t0); L3y[i]= Math.sin(t+t0) }; t0=t+t0
Q0x[0]=1; Q0y[0]=0; H = 2*Math.PI/10; for(i=1; i<=10; i=i+1) {Q0x[i]=Math.cos(H*i); Q0y[i]=Math.sin(H*i)}
...

...
aX = -1-1/4; bX = 1-1/4; aY = -1-1/2; bY = 1
...
Co=Co1=Co2=Co3=Co4=Co5=Co6=Co7=Co8=Co9="";       T0=T1=T2=T3=T4=T5=T6=T7=T8=T9=""
// Se vuoi colorare l'interno del poligono L0 o L1 o ... L9 poni Co="colore" o Co1="colore" o ... Co9="colore"
// Puoi mettere fino a 10 scritte (S) in diverse posizioni (x,y) con T0=["S",x,y],...,T9=["S",x,y]
Co="silver"; Co1="pink"; Co2="cyan";Co3="limegreen"
...
...
aX = -1-1/2; bX = 1-1/2; aY = -1-1; bY = 1
...
// senza Q0x[0]=1; Q0y[0]=0; H = 2*Math.PI/10; for(i=1; i<=10; i=i+1) {Q0x[i]=Math.cos(H*i); Q0y[i]=Math.sin(H*i)}
...

Alcune trasformazioni geometriche. Vedi:

cerchi,   ellissi,   parabole,   iperboli
 


Tutte le funzioni usabili (oltre alle 4 operazioni). I nomi devono essere vanno preceduti da "Math."

abs(a)     / |a|                            log10(a) / log of a base 10
acos(a)    / arc cosine of a                max(a,b)
asin(a)    / arc sine of a                  min(a,b)
atan(a)    / arc tangent of a               pow(a,b) / a to the power b
atan2(a,b) / arc tangent of a/b             random() / random n. in [0,1)
cbrt(a)    / cube root of a                 round(a) / integer closest to a
ceil(a)    / integer closest to a not < a   sign(a)  / sign of a 
cos(a)     / cosine of a                    sin(a)   / sine of a
exp(a)     / exponential of a               sqrt(a)  / square root of a
floor(a)   / integer closest to a not > a   tan(a)   / tangent of a
log(a)     / log of a base e                trunc(a) / integer portion of a
log2(a)    / log of a base 2                PI       / π

cosh(a),sinh(a),tanh(a), acosh(a),asinh(a),atanh(a)    hyperbolic functions

      Note:   M%N is the remainder of M/N,   != is "not equal"

Si possono realizzare delle semplici animazioni con dei rinamdi da una pagina all'altra. Un esempio, di cui sotto sono riprodotte alcune immagini, e poi le spiegazioni.

graficoXpunti_zoom1.htm

Un altro:  graficoXpunti_zoomA.htm

Come sono realizzati?  Consideriamo graficoXpunti_zoom1.htm. Se si apre il file si vede che in fondo al documento ci sono queste righe:

...
</script>
<p><b><a href=graficoXpunti_zoom2.htm>CLICCA QUI</a> per CAMBIARE SCALA</b></p>

 <p><br><b><a href="https://macosaweb.it/script/graficoXpunti_ex.htm" target=_blank>help</a></b></p>

C'è il rinvio al documento (graficoXpunti_zoom2) che genera la successiva immagine; in fondo a questo c'è il rinvio ... fino a che l'ultimo documento rinvia a quello iniziale.

Un altro esmpio:  grafXpA.htm

Ovviamente si possono realizzare animazioni con figure diverse dai grafici di funzione.

Per informazioni, aiuti, suggerimenti, ... potete scrivere a  dapueto@macosaweb.it