d3-maximize demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .overlay {
      background-color: pink;
      opacity: 0.5;
    }

.btn {
      background-color: orange;
      color: rebeccapurple;
      width: 200px;
    }
  </style>
</head>
<body>

<div id="chart"></div>
  <button onclick="d3.maximize('#chart')">Maximize Default</button>
  <button onclick="goBig()">Maximize Custom</button>

<h1>Some header goes here</h1>

<h1>Yet another header</h1>

var bcData = [5, 10, 13, 21, 42, 53]
    var width = 165
    var height = 225

d3.select('#chart')
    .append('svg')
    .attr('width', width)
    .attr('height', height)
    .selectAll('rect')
    .data(bcData)
    .enter()
      .append('rect')
      .style('fill', 'green')
      .attr('x', function (d, i) {
        return i * 28
      })
      .attr('y', function (d, i) {
        return height - (d * 4)
      })
      .attr('width', '25')
      .attr('height', function (d) {
        return d * 4
      })
  </script>
</body>
</html>

Updated missing url https://cdn.rawgit.com/bclinkinbeard/d3-maximize/master/d3-maximize.js to https://cdn.jsdelivr.net/gh/bclinkinbeard/d3-maximize/d3-maximize.js

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js

https://cdn.rawgit.com/bclinkinbeard/d3-maximize/master/d3-maximize.js