charts.html

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <style>
body {
  background-color: #666;
}
.bar {
  fill: #1f78b4;
}

.bar:hover {
  fill: #a6cee3;
}

.bar.positive {
  fill: #33a02c;
}

.bar.positive:hover {
  fill: #b2df8a;
}

.bar.negative {
  fill: #e31a1c;
}

.bar.negative:hover {
  fill: #fb9a99;
}

.title {
  font: bold 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.axis {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis path {
  display: none;
}

div.block {
  padding: 1em;
}
</style>
  </head>
  <body>
    <h1>Représentations graphiques</h1>

    <script src="d3.js" type="text/javascript"></script>
    <script src="wrap.js" type="text/javascript"></script>
    <script src="waterfallChart.js" type="text/javascript"></script>
    <script src="meanChart.js" type="text/javascript"></script>
    <script type="text/javascript">
var margin = {top: 80, right: 90, bottom: 80, left: 90},
    width = 680 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;


var act = 1600;
var rawWaterfall = [
  { name: 'Montant forfaitaire', value: 990 },
  { name: 'Bonification', value: 160 },
  { name: '61% des revenus d’activité', value: 0.61*act },
  { name: 'Forfait logement', value: 70 },
  { name: 'Revenus d’activité', value: act },
  { name: 'Revenus hors activité', value: 10 },
];

var rawMean = [
  { name: 'Prime d’activité fictive pour Décembre 2018', value: 300 },
  { name: 'Prime d’activité fictive pour Janvier 2019', value: 100 },
  { name: 'Prime d’activité fictive pour Février 2019', value: 200 },
  { name: '', value: 0 },
  { name: 'Prime d’activité pour Mars 2019', value: 200 },
];

var step = 1;
var values = [rawWaterfall, rawMean];


var meanC = meanChart(d3.select("body"), {
  height: height,
  margin: margin,
  width: width,
});

var waterfallC = waterfallChart(d3.select("body"), {
  height: height,
  margin: margin,
  width: width,
});

waterfallC.refresh(rawWaterfall);
waterfallC.title("Votre prime d'activité fictive de Février 2019");
meanC.refresh(rawMean);
meanC.title("Votre prime d'activité de Mars 2019");

  </script>
  </body>
</html>