Ok I will start from the example you gave. I clicked the US states and then I hovered over the svg and inspected element (ctrl+shift+c). The svg has an id of "map" (so store it as: var x = document.getElementById("map")), alternatively if you click on the owner svg node, the variable $0 will point to that svg in chrome. So assume I am in the console now:
They had width and height attributes originally (I never ever recommend this), so let's remove them:
$0.removeAttribute("height")
$0.removeAttribute("width")
Now we properly define a viewport (via 'viewBox' attribute -- case sensitive!)
$0.setAttribute("viewBox","0 0 600 350")
Set preserveAspectRatio (case sensitive!) to none so that we can stretch and distort
$0.setAttribute("preserveAspectRatio","none")
Now you have pretty much access to css, I'll give a basic one:
$0.style.height = "100px"
$0.style.width = "400px"
It can get more complicated from here if you combine it with your own object/routine etc. I'll give an example from one of my projects where the user can change the viewBox programmatically:
github.com/IbrahimTanyalcin/lexicon-rainbow/blob/…
and here is an example with 3 objects that render similar SVGs with different viewBox:
bl.ocks.org/ibrahimtanyalcin/2e478e178470c385656a…
Also you can refer to this post I have previously answered for responsive layouts.