Personal Margin Convention

<!DOCTYPE html>
<meta charset="utf-8">
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-axis.v1.min.js"></script>
<script>

var margin = {top: 40, right: 40, bottom: 40, left: 40},
    padding = {top: 60, right: 60, bottom: 60, left: 60},
    vizWidth = 960,
    vizHeight = 500,
    plotWidth = vizWidth - margin.left - margin.right,
    plotHeight = vizHeight - margin.top - margin.bottom,
    panelWidth = plotWidth - padding.left - padding.right,
    panelHeight = plotHeight - padding.top - padding.bottom;

var color = {yellow: "#ffe74c", red: "#ff5964", white:"#ffffff",
             green: "#6bf178", blue: "#35a7ff"}

var x = d3.scaleIdentity()
    .domain([0, panelWidth]);

var y = d3.scaleIdentity()
    .domain([0, panelHeight]);

var xAxis = d3.axisBottom(x);

var yAxis = d3.axisRight(y);

var viz = d3.select("body").append("svg")
    .attr("width", vizWidth)
    .attr("height", vizHeight);

//for display purposes
viz.append("rect")
    .attr("width", vizWidth)
    .attr("height", vizHeight)
    .attr('fill', color.yellow);

var plot = viz.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

//for display purposes
plot.append("rect")
    .attr("width", plotWidth)
    .attr("height", plotHeight)
    .attr('fill', color.blue);

var panel = plot.append("g")
    .attr("transform", "translate(" + padding.left + "," + padding.top + ")");

panel.append("rect")
    .attr("width", panelWidth)
    .attr("height", panelHeight)
    .attr('fill', color.green);

panel.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + panelHeight + ")")
    .call(xAxis);

panel.append("g")
    .attr("class", "y axis")
    .attr("transform", "translate(" + panelWidth + ",0)")
    .call(yAxis);

plot.append("text")
    .text("Margin for Different Plots")
    .attr("y", -8);

panel.append("text")
    .text("Padding for Plots Axes")
    .attr("y", -8);

</script>

https://d3js.org/d3.v4.min.js

https://d3js.org/d3-axis.v1.min.js