let svg_width = 640,
		svg_height = 480,

		margin_top = 30,
		margin_bottom = 30,
		margin_left = 30,
		margin_right = 30,

                  //-----------------
    padding = 35, //   <--  ICI   ---
                  //-----------------

    width = svg_width - margin_left - margin_right - (2 * padding),
    height = svg_height - margin_top - margin_bottom - (2 * padding);


svg_viz = d3.select('body').append('svg')
    .attr('class',"g_svg")
    .attr('width', svg_width)
    .attr('height', svg_height);

svg_rect = svg_viz.append('g').append('rect')
    .attr('class',"rect_svg")
    .attr('width', svg_width)
    .attr('height', svg_height);

g_top = svg_viz.append('rect')
    .attr('class',"g_top")
    .attr('width', width)
    .attr('height', margin_top)
    .attr("transform", "translate(" + (margin_left + padding) + "," + (0 + padding) + ")");

g_left = svg_viz.append('rect')
    .attr('class',"g_left")
    .attr('width', margin_left)
    .attr('height', height)
    .attr("transform", "translate(" + (0 + padding) + "," + (margin_top + padding) + ")");

g_right = svg_viz.append('rect')
    .attr('class',"g_right")
    .attr('width', margin_right)
    .attr('height', height)
    .attr("transform", "translate(" + (margin_left + width + padding) + "," + (margin_top + padding) + ")");

g_bottom = svg_viz.append('rect')
    .attr('class',"g_bottom")
    .attr('width', width)
    .attr('height', margin_bottom)
    .attr("transform", "translate(" + (margin_left + padding) + "," + (margin_top + height + padding) + ")");

chart = svg_viz.append('rect')
    .attr('class',"chart")
    .attr('width', width)
    .attr('height', height)
    .attr("transform", "translate(" + (margin_left + padding) + "," + (margin_top + padding) + ")")

paragraphe_1 = d3.select('body').append('p')
    .text("Sans padding, on peut voir que certains bords sont tronqué. Dans la pratique, on ajoute aussi un padding. Ici padding = "+padding);

paragraphe_1 = d3.select('body').append('p')
    .text("Essayez de faire varier cette valeur");
