Simple example using W javascript library for responsive development with d3.js
Test by changing browser dimensions or rotating mobile. The rectangle remains the 1:4 ratio of the viewport.
xxxxxxxxxx<meta charset="utf-8"><style> body { font-family: Consolas, monaco, monospace; height: 100%;} svg { width: 100%; height: 100%;}</style><link href="//s3-us-west-2.amazonaws.com/colors-css/2.2.0/colors.min.css" rel="stylesheet"><body><svg id="vis"></svg><script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script><!-- <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.6.1/lodash.min.js" charset="utf-8"></script> --><!-- https://github.com/pyrsmk/W --><script src="W.js" charset="utf-8"></script><!-- d3 code --><script src="script-compiled.js" charset="utf-8"></script> https://d3js.org/d3.v3.min.js
https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.6.1/lodash.min.js