I have found this neat tool that helps me generate the map code to display the map: http://mapstarter.com/
If you click US states you get some demo data. If you then select the download tab the source code is provided.
My question is, how much does it take to make the map responsive to the box it's put within? I have been struggling, but I can't figure out how to define the height, width, scale, transition and center points. The map just disappears. If possible, I want to make it responsive to any map size, so I don't have to worry about the map I provide.
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:
$0.removeAttribute("height") $0.removeAttribute("width")$0.setAttribute("viewBox","0 0 600 350")$0.setAttribute("preserveAspectRatio","none")$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.