This commit is contained in:
Boris Paing 2021-03-30 20:53:28 +02:00
parent f80788dc52
commit dae94aafea
2 changed files with 211 additions and 111 deletions

211
bulles.html Normal file
View File

@ -0,0 +1,211 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bulles - Kinetic Graphs</title>
<link href="css/kg.0.2.1.css" rel="stylesheet" type="text/css" />
<script src="js/kg.0.2.1.js"></script>
<style>
.kg-container {
margin: auto;
}
#repartitions {
width: 100%;
}
#repartitions .axis {
display: none;
}
.kg-container ul {
margin-top: 0;
margin-bottom: 0;
}
.kg-container div {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
</style>
</head>
<body>
<nav><a href=".">&lt; Accueil</a></nav>
<h1>Évolution des répartitions de la monnaie possédée par 4 individus</h1>
<div class="kg-container" id="repartitions">
params:
- {name: annee_reelle_depart, value: 2021}
- {name: annee, value: 1, min: 1, max: 40}
- {name: afficherNoms, value: true}
- {name: afficherParts, value: true}
- {name: afficherMontants, value: false}
- {name: afficherM, value: false}
- {name: M0_j1, value: 6000}
- {name: M0_j2, value: 3750}
- {name: M0_j3, value: 3000}
- {name: M0_j4, value: 2250}
- {name: DU_0, value: 372.665}
- {name: nb_joueurs, value: 4}
- {name: scale, value: 7}
- {name: nom_j1, value: PierreJean}
- {name: nom_j2, value: Sybille}
- {name: nom_j3, value: Fred}
- {name: nom_j4, value: Stephane}
calcs:
annee_reelle: (params.annee_reelle_depart) + (params.annee) - 1
M_0: (params.M0_j1) + (params.M0_j2) + (params.M0_j3) + (params.M0_j4)
M: (calcs.M_0) * (1.10)^(params.annee - 1)
DU_total: ((calcs.M) - (calcs.M_0)) / (params.nb_joueurs)
DU_courant: (calcs.M)/(params.nb_joueurs) * 1.10
M_en_relatif: (calcs.M) / (calcs.DU_courant)
M_j1: (params.M0_j1) + (calcs.DU_total)
M_j2: (params.M0_j2) + (calcs.DU_total)
M_j3: (params.M0_j3) + (calcs.DU_total)
M_j4: (params.M0_j4) + (calcs.DU_total)
part_j1: (calcs.M_j1) / (calcs.M)
part_j2: (calcs.M_j2) / (calcs.M)
part_j3: (calcs.M_j3) / (calcs.M)
part_j4: (calcs.M_j4) / (calcs.M)
pct_j1: (calcs.part_j1) * 100
pct_j2: (calcs.part_j2) * 100
pct_j3: (calcs.part_j3) * 100
pct_j4: (calcs.part_j4) * 100
display_j1: (calcs.part_j1) * (params.scale)
display_j2: (calcs.part_j2) * (params.scale)
display_j3: (calcs.part_j3) * (params.scale)
display_j4: (calcs.part_j4) * (params.scale)
layout:
OneGraphPlusSidebar:
graph:
xAxis:
max: 12
ticks: 0
yAxis:
max: 12
ticks: 0
objects:
- Circle:
label:
text: Pierre-Jean
show: (params.afficherNoms)
center: [4,8]
radius: (calcs.display_j1)
fill: red
color: red
stroke: red
- Circle:
label:
text: Sybille
show: (params.afficherNoms)
center: [10,8]
radius: (calcs.display_j2)
fill: blue
color: blue
stroke: blue
- Circle:
label:
text: Fred
show: (params.afficherNoms)
center: [10,3]
radius: (calcs.display_j3)
fill: yellow
color: orange
stroke: yellow
- Circle:
label:
text: Stephane
show: (params.afficherNoms)
center: [4,3]
radius: (calcs.display_j4)
fill: green
color: green
stroke: green
sidebar:
controls:
- title: Voir l'evolution dans le temps
description: "Faites défiler les années pour voir comment évolue la part relative de chacun dans le temps."
sliders:
- {param: annee, label: "annee"}
checkboxes:
#- param: afficherNoms
# label: "\\text{Afficher les noms de chaque humain}"
- param: afficherMontants
label: "\\text{Afficher les montants absolus}"
- param: afficherM
label: "\\text{Afficher la masse monétaire totale}"
divs:
- html: "`En ${calcs.annee_reelle}, si aucun échange n'a lieu d'ici là, la monnaie sera répartie ainsi&nbsp;:`"
show: (params.afficherParts | params.afficherMontants)
- html: "`<ul>
<li>${(calcs.M_j1).toFixed(0)} Ğ1 pour Pierre-Jean</li>
<li>${(calcs.M_j2).toFixed(0)} Ğ1 pour Sybille</li>
<li>${(calcs.M_j3).toFixed(0)} Ğ1 pour Fred</li>
<li>${(calcs.M_j4).toFixed(0)} Ğ1 pour Stephane</li>
</ul>`"
show: params.afficherMontants
- html: "`<ul>
<li>${(calcs.pct_j1).toFixed(1)}% pour Pierre-Jean</li>
<li>${(calcs.pct_j2).toFixed(1)}% pour Sybille</li>
<li>${(calcs.pct_j3).toFixed(1)}% pour Fred</li>
<li>${(calcs.pct_j4).toFixed(1)}% pour Stephane</li>
</ul>`"
show: not(params.afficherMontants)
- html: "`La maisse monétaire totale sera de ${(calcs.M_en_relatif).toFixed(0)}&nbsp;DU`"
show: (params.afficherM & not(params.afficherMontants))
- html: "`La maisse monétaire totale sera de ${(calcs.M).toFixed(0)}&nbsp;Ğ1`"
show: (params.afficherM & params.afficherMontants)
- html: "`Le montant du DU annuel est de ${(calcs.DU_courant).toFixed(0)}&nbsp;Ğ1`"
</div>
</body>
</html>

View File

@ -1,111 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Courbes - Kinetic Graphs</title>
<link href="css/kg.0.2.1.css" rel="stylesheet" type="text/css" />
<script src="js/kg.0.2.1.js"></script>
<style>
.kg-container {
margin: auto;
}
#evolution-solde {
width: 100%;
}
</style>
</head>
<body>
<nav><a href=".">&lt; Accueil</a></nav>
<h1>Evolution du solde d'un individu</h1>
<p>
c représente le taux de croissance de la masse monétaire.
</p>
<p>
Essayez de modifier c pour voir comment votre solde évoluera.
</p>
<div class="kg-container" id="evolution-solde">
params:
- {name: c, value: 10, min: 0, max: 100}
- {name: N, value: 100}
- {name: M00, value: 1000}
- {name: a00, value: 0}
calcs:
M01: (params.M00 * (1 + params.c / 100))
M02: calcs.M01 * pow((1 + params.c / 100), 2)
M03: calcs.M02 * pow((1 + params.c / 100), 3)
M04: calcs.M03 * pow((1 + params.c / 100), 4)
M05: calcs.M04 * pow((1 + params.c / 100), 5)
M06: calcs.M05 * pow((1 + params.c / 100), 6)
M07: calcs.M06 * pow((1 + params.c / 100), 7)
DU01: calcs.M01 / params.N * params.c / 100
DU02: calcs.M02 / params.N * params.c / 100
DU03: calcs.M03 / params.N * params.c / 100
DU04: calcs.M04 / params.N * params.c / 100
DU05: calcs.M05 / params.N * params.c / 100
DU06: calcs.M06 / params.N * params.c / 100
DU07: calcs.M07 / params.N * params.c / 100
a01: ((params.a00 + calcs.DU01) / calcs.DU01)
a02: ((calcs.a01 + calcs.DU02) / calcs.DU02)
a03: ((calcs.a02 + calcs.DU03) / calcs.DU03)
a04: ((calcs.a03 + calcs.DU04) / calcs.DU04)
a05: ((calcs.a04 + calcs.DU05) / calcs.DU05)
a06: ((calcs.a05 + calcs.DU06) / calcs.DU06)
a07: ((calcs.a06 + calcs.DU07) / calcs.DU07)
layout:
OneWideGraphPlusSidebar:
graph:
xAxis:
title: Temps $(annees)$
max: 80
ticks: 12
yAxis:
title: Monnaie $(DUG1)$
max: 10
ticks: 10
objects:
- Curve:
univariateFunction:
fn: (x)^(1/params.c)
ind: x
color: red
- Point:
coordinates: [0,params.a00]
- Point:
coordinates: [1,calcs.a01]
- Point:
coordinates: [2,calcs.a02]
- Point:
coordinates: [3,calcs.a03]
- Point:
coordinates: [4,calcs.a04]
- Point:
coordinates: [5,calcs.a05]
- Point:
coordinates: [6,calcs.a06]
- Point:
coordinates: [7,calcs.a07]
sidebar:
controls:
- title: Modifier le taux de croissance
sliders:
- {param: c, label: "c"}
</div>
</body>
</html>